I have two grids. I need to do this client side in JavaScript. When a cell value of Grid1 is changed I need to find and change a cell value in Grid2. TI can't find an example of what I am trying to do. Thanks in advance for providing one.
Hello,
In order to achieve this, you can use the EditingClientEvents CellValueChanged event. In it the value of the cell as well as the row index and column index could be obtained, which can be used to modifying the cell value of the other grid. Below I am pasting the markup as well as the JavaScript that demonstrates what I have explained above:
HTML:
<ig:WebScriptManager ID="WebScriptManager1" runat="server"></ig:WebScriptManager> <ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px" DefaultColumnWidth="150px" DataKeyFields="id"> <Behaviors> <ig:Activation> </ig:Activation> <ig:ColumnResizing> </ig:ColumnResizing> <ig:EditingCore> <EditingClientEvents CellValueChanged="WebDataGrid1_Editing_CellValueChanged"/> <Behaviors> <ig:CellEditing> </ig:CellEditing> </Behaviors> </ig:EditingCore> <ig:Selection> </ig:Selection> </Behaviors> </ig:WebDataGrid> <ig:WebDataGrid ID="WebDataGrid2" runat="server" Height="350px" Width="400px" DefaultColumnWidth="150px" DataKeyFields="id"> </ig:WebDataGrid>
JavaScript:
function WebDataGrid1_Editing_CellValueChanged(sender, eventArgs) { grid2 = $find("WebDataGrid2"); let currentCell = eventArgs.get_cell(); let value = currentCell.get_value(); let rowIndex = currentCell.get_row().get_index(); let columnIndex = currentCell.get_column().get_index(); grid2.get_rows().get_row(rowIndex).get_cell(columnIndex).set_value(value); }
Please let me know if you have any questions.
Regards, Ivan Kitanov
That's close but I don't want the current cell or row I want to be able to select and change any row or cell that I choose.
Thank you for the provided clarification. I have created and attached a sample project demonstrating the desired behavior.
Please test it and let us know if you need any further assistance with this matter.
Looking forward to hearing from you.
1362.Sample.zip
The sample you uploaded has nothing to do with my question. Answering my question with an example would require a sample with some JavaScript and two web data grids. This sample has no JS and only 1 datagrid. It is so off point that I think maybe you uploaded the wrong zip file. What I need is:
When a cell value in Grid 1 is changed I want to select a cell in Grid 2 (via javascript) and change it. Example:
function Grid1_CellEditing_ExitedEditMode(sender, eventArgs) {
var techLaborBelow = sender.get_rows().get_row(ROW_INDEX_LABOR_TECH_LABOR_BELOW).get_cell(currentCellAddress).get_value();
// Now change a cell in Grid 2
select a row in grid 2 then select the cell in that row then change the value
grid2SelectedCell.set_value(techLaborBelow * 2);
I have double checked the attached sample and I can verify that it describes your scenario. There are two WebDataGrids controls and the client-side CellValueChanged event is handled as per your requirement. When value in the first grid is changed, a cell value in the second grid reflects the changes.
<script> function reflectChangeToSecondGrid(sender, eventArgs) { const secondGrid = $find("secondWDG"); let currentCell = eventArgs.get_cell(); let value = currentCell.get_value(); let rowIndex = currentCell.get_row().get_index(); let columnIndex = currentCell.get_column().get_index(); if (typeof value === "number") value *= 2; secondGrid.get_rows().get_row(rowIndex).get_cell(columnIndex).set_value(value); } </script>
Please download the sample again in order to confirm my statement.
Got it! But I might have a follow up. Please do not close this case. I will check back in when complete. Thank you.
Take your time, and do not hesitate to post in this thread if you need further assistance with this matter.