Using the in-built Delete button: GridViewCommandColumn.DeleteButton
GridViewCommandColumn commandColumn = new GridViewCommandColumn(); commandColumn.Width = new Unit("40"); commandColumn.ButtonType = ButtonType.Image; commandColumn.DeleteButton.Image.IsResourcePng = true; commandColumn.DeleteButton.Image.Url = Page.ClientScript.GetWebResourceUrl(typeof(xxx.Controls.DynamicGrid), @"xxx.Controls.DeleteBin.png"); commandColumn.DeleteButton.Visible = true; commandColumn.DeleteButton.Text = "Delete"; //Tooltip gvMyDataGrid.Columns.Add(commandColumn); // add custom column to grid gvMyDataGrid.SettingsBehavior.ConfirmDelete = true; // display popup confirmation upon clicking delete button gvMyDataGrid.SettingsText.ConfirmDelete = "Are you sure you want to delete this item?"; //Text you want to be displayed. This can also be retrieved from the resource file
Or creating your own button from scratch
GridViewCommandColumn commandColumn = new GridViewCommandColumn(); commandColumn.Width = new Unit("40"); commandColumn.ButtonType = ButtonType.Image; GridViewCommandColumnCustomButton deleteButton = new GridViewCommandColumnCustomButton(); deleteButton.Image.IsResourcePng = true; deleteButton.Image.Url = Page.ClientScript.GetWebResourceUrl(typeof(xxx.Controls.DynamicGrid), @"xxx.Controls.DeleteBin.png"); deleteButton.Visibility = GridViewCustomButtonVisibility.AllDataRows; deleteButton.Text = "Delete"; deleteButton.ID = "cmdDelete"; commandColumn.CustomButtons.Add(deleteButton); // add custom button to new command column gvMyDataGrid.Columns.Add(commandColumn); //We need the next line of code to add the confirmation popup ourselves. Notice the 'cmdDelete' parameter which is the custom delete button's ID above. gvMyDataGrid.ClientSideEvents.CustomButtonClick = "function (s, e) { if (e.buttonID == 'cmdDelete'){ e.processOnServer = confirm('Are you sure you want to delete this item?'); }}"; //confirm() method will return the user's selection: true if OK, false if cancel. Therefore if return this value and set it to e.processOnServer, this will tell the button to not commit a callback if the user selects 'cancel'
In both examples I am using an embedded image as I wanted the grid to be used by just adding a reference to the DLL and not having to add the image to every project.
In order to embed the image:
- Go to the image's Properties.
- Set Build Action to Embedded Resource
- Go to AssemblyInfo.cs
- Add using System.Web.UI;
- Add [assembly: WebResource("YourNamespace.ImageFileName.png", "image/png")]
- Get the image url as described above Page.ClientScript.GetWebResourceUrl(typeof(xxx.Controls.DynamicGrid), @"xxx.Controls.DeleteBin.png");