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
220
WebDataGrid - Custom Row Editing
posted

Hi,

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

      CAS-195239-H4D4V6

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>
            <ig:WebDataGrid 
                ID="grdDataTable" 
                runat="server" 
                AutoGenerateColumns="true" 
                width="100%"  
                ClientIDMode="Static" 
                EnableDataViewState ="true" 
                EnableViewState ="true"
                HeaderCaptionCssClass="WebDataGridColumnHeader" 
                ItemCssClass = "WebDataGridRow"
                AltItemCssClass = "WebDataGridAlternating"
                OnColumnSorted="grdDataTable_SortColumn"
                OnPageIndexChanged="grdDataTable_PageIndexChanged"
                OnInitializeRow="grdDataTable_InitializeRow" 
                EnableAjax ="true"
                OnRowAdding="grdDataTable_RowAdding"       
                OnRowUpdating="grdDataTable_RowUpdating">
                <Behaviors>
                    <ig:Selection CellClickAction="Row" CellSelectType="Single" RowSelectType="Single" SelectedRowSelectorCssClass="DataGridSelectedRow" >
                        <SelectionClientEvents RowSelectionChanged="RowSelection_Changed" />
                    </ig:Selection>
                    <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" />
                        <Behaviors>
                            <ig:RowAdding Enabled="false" EnableInheritance="false" Alignment="Bottom">
                                <EditModeActions EnableOnActive="true" MouseClick="Single" />  
                             </ig:RowAdding>
                            <ig:RowEditing Enabled="false" EnableInheritance="false">                                                                
                                <EditModeActions EnableOnActive="true" MouseClick="None" />
                                <RowEditingClientEvents EnteringEditMode="RowEditing_EnteringEditMode" ExitedEditMode="RowEditing_ExitedEditMode" />    
                                <ColumnSettings>
                                                <ig:EditingColumnSetting  ReadOnly="true" />
                                </ColumnSettings>                             
                            </ig:RowEditing>                   
                        </Behaviors>                        
                    </ig:EditingCore>
                    <%--<ig:EditingCore Enabled="false">
                    </ig:EditingCore>--%>
                    <ig:Activation></ig:Activation> 
                </Behaviors>
            <ClientEvents  Initialize="Initialize"   />
            </ig:WebDataGrid>
	<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>
	</DIV>
</asp:panel>
<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
        alert(toSave);
        if (!toSave) {
            e.set_cancel(true);
        }
        toSave = false;
    }
    function EditingEvents_CellValueChanged(sender, e) {
        isAlreadyRowEdited = true;
    }

    function AddRow() {
        toSave = true;
        $find("<%= grdDataTable.ClientID%>")
         .get_behaviors()
         .get_editingCore()
         .get_behaviors().get_rowAdding()._commitRow();
    }
    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) {
            e.set_cancel(true)
        }
        else {
            var editingRow = e.getCells()[0].getCell().get_row();
            // Allow Editing only for the selected row
            if (editingRow.get_index() !== selectedRowIndex) {
                e.set_cancel(true);
            }
        }
    }
    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) {
            grid.get_behaviors().get_editingCore().commit();
        }
    }
</script>

Thanks,

Aravind

    

Parents Reply Children