I have buttons (a href links) that are styled with CSS to look/act like a button. How do I hook these existing buttons up to edit a single row or delete the row. They appear in the last cell dgvStaff.Columns[7] of each row.
So when I click the edit button: <a href='#' class='sepV_a' title='Delete' onclick='alert(""Delete staff"")'><i class='splashy-calendar_day_remove'></i></a>
It would allow me to edit the row. Do I need to change the html in any way or can it work with the html I provided above?
Also for the same, how would I make the delete button delete the row?
I am using Infragistics v12.1 WebDataGrid
Hi OmegaPrime,
You should set DataKeyFields property of the grid in order to be able to edit and delete rows. DataKeyFields is the name of a column in your datasource which uniquely identifies given record.
If you have any other questions, please feel free to contact me.
I got the cells setup correctly.
<ig:TemplateDataField Key="TemplateField_0"> <ItemTemplate> <asp:LinkButton ID="Delete" CssClass="sepV_a" OnClientClick="return deleteRow()" ToolTip="Delete" runat="server"><i class='splashy-calendar_day_remove'></i></asp:LinkButton> <asp:LinkButton ID="Edit" CssClass="sepV_a" OnClientClick="return editRow()" ToolTip="Edit" runat="server"><i class='splashy-calendar_month_edit'></i></asp:LinkButton> </ItemTemplate> <Header Text="Delete / Edit" /> </ig:TemplateDataField>
I have activation, editing core and cell editing turned on.
Here is the script
<script type="text/javascript"> function editRow() {
var grid = $find("dgvStaff");
// Get active row var activeRow = grid.get_behaviors().get_activation().get_activeCell().get_row();
// Enter edit mode on the first cell of active row grid.get_behaviors().get_editingCore().get_behaviors().get_cellEditing().enterEditMode(activeRow.get_cell(0));
// Cancel auto postback from link button return false; }
function deleteRow() {
// Delete active row grid.get_rows().remove(grid.get_behaviors().get_activation().get_activeCell().get_row());
function msgBox() { alert('test worked');
return false; } </script>
I added the msgBox function to make sure the buttons worked. They work correct when attached to the msgBox function.
When they are linked up to the edit/delete functions the delete button gives me a javascript error.
Delete Button Error:
Async request failed
[NotSupportedException]: A row can only be updated or deleted if the DataKeyFields property is set.
I couldn't copy and paste it all.
The Edit button does not error out, but it does not open up Cell(0) for editing, nothing seemed to happen. I can step through the code but on the web page nothing happens.
I know editing is turned on because i can double click a cell and it allows me to edit.
Any help is appreciated.
I would suggest you to use ItemTemplates - here you can find detailed guide for implementing the functionality you required - http://help.infragistics.com/Help/NetAdvantage/ASPNET/2012.1/CLR4.0/html/WebDataGrid_Using_Item_Template.html.
Please let me know if this helps.