15
How to set value in a Webdatagrid editable column from client side ?
posted

Hi 

   I have a WebDataGrid with an editable Text box column. The user will enter data in one of the textbox and I want to copy this data to some other text box in the same column. Please help me to find out how to copy data from one text box to another textbox in the same column of the Grid. I have given my sample WebDataGrid code below.

 <ig:WebDataGrid ID="wdResult" runat="server" Height="500px" Width="100%" DataSourceID="odsData" TotalRowCount="0"
                DataMember="DefaultView"  OnDataBound="OnDataBound"
                AutoGenerateColumns="False">
                <Columns>
  <ig:BoundDataField DataFieldName="Column1" Key="Name">
                        <Header Text="Name" />
 <ig:BoundDataField DataFieldName="Column2"  CssClass="RightAlign" Key="UserInput">
                        <Header Text="Input Value" />                                                
                    </ig:BoundDataField>
 </Columns>              
                  <EditorProviders>                                
                    <ig:NumericEditorProvider ID="wdResult_NumericEditorProvider1" >
                        <EditorControl ClientIDMode="Predictable"  DataMode="Decimal" MinDecimalPlaces="6" >
                        </EditorControl>
                    </ig:NumericEditorProvider>
                  </EditorProviders>        
                <Behaviors>
                    <ig:EditingCore BatchUpdating="True" AutoCRUD="True">
                        <Behaviors>
                            <ig:CellEditing>
                                  <CellEditingClientEvents   ExitedEditMode="EditGrid"  />
                                <EditModeActions EnableOnActive="True" />
                                <EditModeActions EnableOnActive="True" />
                                <ColumnSettings>                                                                      
                                    <ig:EditingColumnSetting ColumnKey="Column2" EditorID="wdResult_NumericEditorProvider1" />                                    
                                </ColumnSettings>
                                <EditModeActions EnableOnActive="True" />
                            </ig:CellEditing>                            
                            <ig:RowDeleting />
                        </Behaviors>
                    </ig:EditingCore>
                     <ig:Sorting Enabled="true" EnableCellMerging="True" SortingMode="Multi"></ig:Sorting>
                    <ig:Activation>
                    </ig:Activation>
                    <ig:ColumnFixing>
                    </ig:ColumnFixing>
                    <ig:ColumnMoving>
                    </ig:ColumnMoving>
                    <ig:ColumnResizing>
                    </ig:ColumnResizing>                  
                    <ig:Selection CellClickAction="Row" RowSelectType="Single">
                    </ig:Selection>
                    <ig:RowSelectors>
                    </ig:RowSelectors>                  
                </Behaviors>
            </ig:WebDataGrid>

  • 2450
    Verified Answer
    Offline posted

    Hello,

    Thank you for the sample code you have sent.

    You can use the CellValueChanged event to see if the user actually modified a value in the desired column. If he did, you can use ExitedEditMode to set the value. In the following example if you type some value in "UserInput" column the last row will always be updated with the value you typed.

      <script>
            var isChanged = false;
            function CellValueChanged(sender, e) {
                if (e.get_cell().get_column().get_key() == "UserInput") {
                    isChanged = true;
                }
            }
            function EditGrid(sender, e) {
                if (e.getCell().get_column().get_key() == "UserInput" && isChanged) {
                    var grid = $find("wdResult");
    
                    var currentValue = e.getCell().get_value();
                    var lastRow = grid.get_rows().get_length() - 1;
                    var lastColumn = grid.get_columns().get_length() - 1;
    
                    grid.get_rows().get_row(lastRow).get_cell(lastColumn).set_value(currentValue);
                    isChanged = false;
                }
            };
        </script>


    And your modified WebDataGrid:



    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" AllowCustomErrorsRedirect="True"></asp:ScriptManager>
            <div>
    
                <ig:WebDataGrid ID="wdResult" runat="server" Height="500px" Width="100%" TotalRowCount="0"
                    DataMember="DefaultView"
                    AutoGenerateColumns="False">
                    <Columns>
                        <ig:BoundDataField DataFieldName="Name" Key="Name">
                            <Header Text="Name" />
                        </ig:BoundDataField>
    
                        <ig:BoundDataField DataFieldName="Column2"  CssClass="RightAlign" Key="UserInput">
                            <Header Text="Input Value" />                                                
                        </ig:BoundDataField>
                    </Columns>
                    <EditorProviders>
                        <ig:NumericEditorProvider ID="wdResult_NumericEditorProvider1">
                            <EditorControl ClientIDMode="Predictable" DataMode="Decimal" MinDecimalPlaces="6">
                            </EditorControl>
                        </ig:NumericEditorProvider>
                    </EditorProviders>
                    <Behaviors>
                        <ig:EditingCore BatchUpdating="True" AutoCRUD="True">
                            <EditingClientEvents CellValueChanged="CellValueChanged" />
                            <Behaviors>
                                <ig:CellEditing>
                                    <CellEditingClientEvents ExitedEditMode="EditGrid" />
                                    <EditModeActions EnableOnActive="True" />
                                    <EditModeActions EnableOnActive="True" />
                                    <ColumnSettings>
                                        <ig:EditingColumnSetting ColumnKey="Column2" EditorID="wdResult_NumericEditorProvider1" />
                                    </ColumnSettings>
                                    <EditModeActions EnableOnActive="True" />
                                </ig:CellEditing>
                                <ig:RowDeleting />
                            </Behaviors>
                        </ig:EditingCore>
                        <ig:Sorting Enabled="true" EnableCellMerging="True" SortingMode="Multi"></ig:Sorting>
                        <ig:Activation>
                        </ig:Activation>
                        <ig:ColumnFixing>
                        </ig:ColumnFixing>
                        <ig:ColumnMoving>
                        </ig:ColumnMoving>
                        <ig:ColumnResizing>
                        </ig:ColumnResizing>
                        <ig:Selection CellClickAction="Row" RowSelectType="Single">
                        </ig:Selection>
                        <ig:RowSelectors>
                        </ig:RowSelectors>
                    </Behaviors>
                </ig:WebDataGrid>
    
            </div>
        </form>
        <script>
            var isChanged = false;
            function CellValueChanged(sender, e) {
                if (e.get_cell().get_column().get_key() == "UserInput") {
                    isChanged = true;
                }
            }
            function EditGrid(sender, e) {
                if (e.getCell().get_column().get_key() == "UserInput" && isChanged) {
                    var grid = $find("wdResult");
    
                    var currentValue = e.getCell().get_value();
                    var lastRow = grid.get_rows().get_length() - 1;
                    var lastColumn = grid.get_columns().get_length() - 1;
    
                    grid.get_rows().get_row(lastRow).get_cell(lastColumn).set_value(currentValue);
                    isChanged = false;
                }
            };
        </script>
    </body>