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,
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.
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 added the DataKeyFields property:
dgvStaff.DataSource = Staff; dgvStaff.DataKeyFields = "stfGID";
It is giving me a null exception error now when I click Delete and doing the same as before when I click Edit. All the code to load the WebDataGrid should be below along with the HTML of the Grid itself. Anything I am missing here?
private DataTable Staff { get { object obj = this.ViewState["_gds"]; if ((((obj) != null))) { return (DataTable)obj; } else { DataTable table = objDataFunctions.GetCustStaff(Session["LoginID"].ToString(), ConfigurationManager.AppSettings.Get("Connection").ToString()); DataColumn[] Col = { table.Columns["stfGID"] }; table.PrimaryKey = Col; return table; } } }
protected void Page_Load(object sender, EventArgs e) { if (Page.IsPostBack == false) { Response.Cache.SetCacheability(HttpCacheability.NoCache);
if (Session.IsNewSession == true) { Response.Write("<script language='javascript'>window.open('" + ConfigurationManager.AppSettings.Get("LoginAddress").ToString() + "?TimeOut=TRUE', '_parent')</script>"); }
}
dgvStaff.DataSource = Staff; dgvStaff.DataKeyFields = "stfGID"; }
<ig:WebDataGrid ID="dgvStaff" Width="100%" runat="server" AutoGenerateColumns="False" ClientIDMode="Static"> <Columns> <ig:BoundDataField DataFieldName="stfGID" Hidden="True" Key="stfGID"> <Header Text="stfGID" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="stfFK_cstGID" Hidden="True" Key="stfFK_cstGID"> <Header Text="stfFK_cstGID" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Position" Key="Position"> <Header Text="Position" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="First Name" Key="First Name"> <Header Text="First" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Last Name" Key="Last Name"> <Header Text="Last" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Email" Key="E-Mail"> <Header Text="Email" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Appts" Hidden="True" Key="Appts"> <Header Text="Appointment" /> </ig:BoundDataField> <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> </Columns> <Behaviors> <ig:EditingCore> <Behaviors> <ig:CellEditing> </ig:CellEditing> </Behaviors> </ig:EditingCore> <ig:Activation> </ig:Activation> </Behaviors> </ig:WebDataGrid>
Any idea what I am missing here?
I would suggest you to try binding the grid only first time the page loads. Then set EnableViewState and EnableDataViewState to true. Also, make sure you have enabled the row deleting behavior of the grid. I am attaching a sample, demonstrating your scenario.
If you have any questions regarding the matter, please let me know.
Alright I was able to get that all to work, thank you very much!
I'm glad to hear that.
Please feel free to contact me if you have any other questions.