Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
WebDataGrid - Custom Row Editing


        I have opened up a case # below but also thought of posting my questions here for the benefit of others.


WebDataGrid and i have posted my html code base which you can leverage

I am looking for the below functionality.

1. When user selects a Row and click a button say edit, turn the grid to editable.

2. After edit button postback, Highlight the row that was selected before the edit button was clicked with a different css and turn off edit on all other rows. 

3. Disable selection on the grid after Edit button click postback.

4. Disable the done/cancel buttons in the row edit feature (We don't need it)

5. The rowupdating server side event should fire if atleast one value in a cell in the edited row is changed and user clicks an update button which performs a postback.

6. After update button postback, revert the css from the highlighted row and turn on selection.

<asp:panel id="pnlModuleContent" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" runat="server" cssclass="WideModule">
	<asp:PlaceHolder id="plhFilterContents" Runat="server"></asp:PlaceHolder>
    <asp:ScriptManagerProxy runat="server"></asp:ScriptManagerProxy>
            <ig:WebExcelExporter ID="eExporter" runat="server"></ig:WebExcelExporter>
                EnableDataViewState ="true" 
                EnableViewState ="true"
                ItemCssClass = "WebDataGridRow"
                AltItemCssClass = "WebDataGridAlternating"
                EnableAjax ="true"
                    <ig:Selection CellClickAction="Row" CellSelectType="Single" RowSelectType="Single" SelectedRowSelectorCssClass="DataGridSelectedRow" >
                        <SelectionClientEvents RowSelectionChanged="RowSelection_Changed" />
                    <ig:Paging PagerAppearance="Bottom" PageSize="100" Enabled="true" />
                    <ig:Sorting SortingMode="Single" Enabled="true" />
                    <ig:ColumnResizing Enabled="false" />
                    <ig:EditingCore Enabled="false" EnableInheritance="false" AutoCRUD="false" BatchUpdating="true">
                        <EditingClientEvents CellValueChanged="EditingEvents_CellValueChanged" RowAdding="EditingEvents_RowAdding" />
                            <ig:RowAdding Enabled="false" EnableInheritance="false" Alignment="Bottom">
                                <EditModeActions EnableOnActive="true" MouseClick="Single" />  
                            <ig:RowEditing Enabled="false" EnableInheritance="false">                                                                
                                <EditModeActions EnableOnActive="true" MouseClick="None" />
                                <RowEditingClientEvents EnteringEditMode="RowEditing_EnteringEditMode" ExitedEditMode="RowEditing_ExitedEditMode" />    
                                                <ig:EditingColumnSetting  ReadOnly="true" />
                    <%--<ig:EditingCore Enabled="false">
            <ClientEvents  Initialize="Initialize"   />
	<asp:datagrid id="dgHidden" visible="False" runat="server" autogeneratecolumns="True" headerstyle-cssclass="ListHead"></asp:datagrid>
	<INPUT id="hdnEditRow" type="hidden" value="-1" name="hdnEditRow" runat="server" />
	<asp:label id="lblApplicationError" visible="True" runat="server" cssclass="ErrorMessage" enableviewstate="false"></asp:label>
	<DIV align="left" style="vertical-align:middle">
		<asp:label id="lblNoData" visible="False" runat="server" cssclass="normal">No data available.</asp:label>
<script  type="text/javascript">
    var toSave = false;
    var selectedRowIndex = 0;
    var isAlreadyRowEdited = false;
    function Initialize() {
        var wdgd = $find("<%= grdDataTable.ClientID%>");
        wdgd._callbackManager.setTimeout(600000); //One minute callback time
    function EditingEvents_RowAdding(sender, e) {
        // Cancel RowAdding after Row Adding Enabled
        if (!toSave) {
        toSave = false;
    function EditingEvents_CellValueChanged(sender, e) {
        isAlreadyRowEdited = true;

    function AddRow() {
        toSave = true;
        $find("<%= grdDataTable.ClientID%>")
    function RowSelection_Changed(webDataGrid, evntArgs) {
        // When row is changed get the index of the row selected
        var grid = $find("<%= grdDataTable.ClientID%>");
        var gridBehaviors = grid.get_behaviors();
        var row = gridBehaviors.get_selection().get_selectedRows().getItem(0);
        selectedRowIndex = row.get_index();
    function RowEditing_EnteringEditMode(sender, e) {
        // Do not Allow Editing if Already a Row was edited previosly
        if (isAlreadyRowEdited) {
        else {
            var editingRow = e.getCells()[0].getCell().get_row();
            // Allow Editing only for the selected row
            if (editingRow.get_index() !== selectedRowIndex) {
    function RowEditing_ExitedEditMode(sender, e) {
        var grid = $find("<%= grdDataTable.ClientID%>");
        // Find if Row Was Edited(that is atleast 1 cell value in the row was changed from previos, done is clicked and then only set commit the row edited and set isAlreadyRowEdited to true)
        if (isAlreadyRowEdited) {




Parents Reply Children