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.
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);
Hello,
Is it possible to provide some more information regarding how would you like to perform the change into the second grid, for example is it via a button click or the action should be performed automatically once the user has changed data inside the first grid?
Also, do you want to change a specific cell or it could be any cell determined by the user?
It would be ideal, if you could provide a short list of steps that would provide the main idea of how would you like the cells to be changed.
This information is going to be highly appreciated and will help me in my further investigation.
Looking forward to hearing from you.
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.
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.