Comment utiliser les images au lieu du texte pour AutoGenerateEditButton dans ASP.Net GridView

Question

J'utilise AutoGenerateEditButton et les Delete et Select aussi. Je voudrais utiliser des images plutôt que du texte pour les liens.

Comment faire?

Je ne souhaite pas créer manuellement les colonnes de commande, car les propriétés AutoGenerate sont utilisées dans un grand projet sur lequel je travaille.

Answer 1

Sous le contrôle GridView et plus monter la méthode CreateChildControls

protected override int CreateChildControls(System.Collections.IEnumerable dataSource, bool dataBinding) 
    { 
     // re-use the AutoGenerate...Button properties 
     bool showDelete = AutoGenerateDeleteButton; 
     bool showEdit = AutoGenerateEditButton; 
     bool showSelect = AutoGenerateSelectButton; 

     // turn them all off, we'll be creating our own 
     AutoGenerateDeleteButton = false; 
     AutoGenerateEditButton = false; 
     AutoGenerateSelectButton = false; 

     // hide the column if it already exists 
     if (Columns[0].GetType() == typeof(CommandField)) 
     { 
      Columns.RemoveAt(0); 
     } 

     // add the command column if necessary 
     if (showDelete || showEdit || showSelect) 
     { 
      CommandField cmdField = new CommandField(); 
      cmdField.HeaderText = string.Empty; 
      cmdField.ButtonType = ButtonType.Image; 
      cmdField.ShowSelectButton = showSelect; 
      cmdField.ShowEditButton = showEdit; 
      cmdField.ShowDeleteButton = showDelete; 
      cmdField.DeleteImageUrl = "~/images/delete.bmp"; 
      cmdField.EditImageUrl = "~/images/edit.bmp"; 
      cmdField.SelectImageUrl = "~/images/select.bmp"; 

      Columns.Insert(0, cmdField); 
     } 

     // this will show the grid even if there is no data 
     int numRows = base.CreateChildControls(dataSource, dataBinding); 

     //no data rows created, create empty table if enabled 
     if (numRows == 0 && ShowWhenEmpty) 
     { 
      //create table 
      Table table = new Table(); 
      table.ID = this.ID; 

      //convert the exisiting columns into an array and initialize 
      DataControlField[] fields = new DataControlField[this.Columns.Count]; 
      this.Columns.CopyTo(fields, 0); 

      if (this.ShowHeader) 
      { 
       //create a new header row 
       _headerRow2 = base.CreateRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal); 

       this.InitializeRow(_headerRow2, fields); 
       table.Rows.Add(_headerRow2); 
      } 

      //create the empty row 
      GridViewRow emptyRow = new GridViewRow(-1, -1, DataControlRowType.EmptyDataRow, DataControlRowState.Normal); 

      TableCell cell = new TableCell(); 
      cell.ColumnSpan = this.Columns.Count; 
      cell.Width = Unit.Percentage(100); 
      if (!String.IsNullOrEmpty(EmptyDataText)) 
       cell.Controls.Add(new LiteralControl(EmptyDataText)); 

      if (this.EmptyDataTemplate != null) 
       EmptyDataTemplate.InstantiateIn(cell); 

      emptyRow.Cells.Add(cell); 
      table.Rows.Add(emptyRow); 

      if (this.ShowFooter) 
      { 
       //create footer row 
       _footerRow2 = base.CreateRow(-1, -1, DataControlRowType.Footer, DataControlRowState.Normal); 

       this.InitializeRow(_footerRow2, fields); 
       table.Rows.Add(_footerRow2); 
      } 

      this.Controls.Clear(); 
      this.Controls.Add(table); 
     } 

     // I wanted one place to set alternating color for all instances of this control 
     base.AlternatingRowStyle.BackColor = System.Drawing.Color.LightBlue; 

     // now that the controls have been created, it's safe to reset these to their original values. They'll be needed if you bind data later 
     AutoGenerateDeleteButton = showDelete; 
     AutoGenerateEditButton = showEdit; 
     AutoGenerateSelectButton = showSelect; 

     return numRows; 
    } 

Answer 2

Vous pouvez passer à l'événement GridView.RowDataBound. Sur cela, utilisez FindControl ne personnalisé votre bouton autogenerate:

protected void yourGridView_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
    if (e.Row.RowType == DataControlRowType.DataRow) 
    { 
     LinkButton link = e.Row.Cells[0].Controls[0] as LinkButton; 
     // do your stuff 
    } 
} 

Answer 3

La meilleure façon de le faire est de gérer vous-même. Voici un exemple rapide à l'aide d'un ImageButton pour remplacer le bouton de commande d'édition:

<asp:GridView ID="yourGrid" runat="server" OnRowEditing="yourGrid_RowEditing"> 
    <Columns> 
     <asp:TemplateField> 
      <ItemTemplate> 
       <asp:ImageButton ID="yourEditButton" runat="server" 
        CommandName="Edit" ImageUrl="edit.jpg" /> 
      </ItemTemplate> 
      <EditItemTemplate> 
       <!-- your edit controls here --> 
      </EditItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

maintenant le code derrière:

protected void yourGrid_RowEditing(object sender, GridViewEditEventArgs e) 
{ 
    // You could just do yourGrid and ignore casting the sender but this 
    // makes the code generic for reuse. 
    GridView grid = (GridView)sender; 
    grid.EditIndex = e.NewEditIndex; 
    BindData(); // need to rebind once the edit index is set. 
} 

Cette remplace à peu près le bouton d'édition générée automatiquement avec un ImageButton. En réglant le CommandName pour éditer, il déclenchera exactement les mêmes événements que le bouton d'édition généré automatiquement. Cela s'appliquerait également à supprimer, mettre à jour, etc ...