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>
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>
<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>
Thank you very much Nick. The suggested solution worked for me.
Hello Sreeraj,
Thank you for your feedback.
I am glad that I was able to help you achieve the functionality you were looking for. If you have further questions concerning this matter please let me know.