I have a WebHierarchicalDataGrid with 2 UnboundCheckBoxField; one if for email and the other is for print. The user can select either the email or print, not both. In the javascript it ends up in a loop even though I using eventArgs.set_cancel.
Here's the grid:
<ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid1" runat="server" Height="250px" Width="100%" DataKeyFields="ID" DataMember="t_Band1" AutoGenerateColumns="False" InitialDataBindDepth="-1" Key="Band1"> <Columns> <ig:BoundDataField DataFieldName="ID" Key="ID" Hidden="true"> <Header Text="VendID" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Name" Key="Name"> <Header Text="Name" /> </ig:BoundDataField> <ig:UnboundCheckBoxField Key="EmailYSN" Width="50px" HeaderCheckBoxMode="Off"> <Header Text="Email"></Header> </ig:UnboundCheckBoxField> <ig:UnboundCheckBoxField Key="PrintYSN" Width="50px" HeaderCheckBoxMode="Off"> <Header Text="Print"></Header> </ig:UnboundCheckBoxField> </Columns> <Bands> <ig:Band AutoGenerateColumns="False" DataKeyFields="ID" DataMember="t_Band2" Key="Band2"> <Columns>....</Columns> </ig:Band> </Bands> <Behaviors> <ig:EditingCore AutoCRUD="False"> <EditingClientEvents CellValueChanged="WHDG_Editing_CellValueChanged" /> <Behaviors> <ig:CellEditing> <ColumnSettings> <ig:EditingColumnSetting ColumnKey="Name" ReadOnly="true" /> </ColumnSettings> </ig:CellEditing> </Behaviors> </ig:EditingCore> <ig:RowSelectors> </ig:RowSelectors> <ig:Selection RowSelectType="Single" CellClickAction="Cell"> </ig:Selection> </Behaviors></ig:WebHierarchicalDataGrid>
Here is the javascript:
function WHDG_Editing_CellValueChanged(sender, eventArgs) { var grid = $find('<%= WebHierarchicalDataGrid1.ClientID %>'); var parentGrid = grid.get_gridView().get_rows();
if (eventArgs.get_cell(1).get_column().get_key() == "EmailYSN") { parentGrid.get_row(0).get_cell(3).set_value("false"); eventArgs.set_cancel(true); }
if (eventArgs.get_cell().get_column().get_key() == "PrintYSN") { parentGrid.get_row(0).get_cell(2).set_value("false"); eventArgs.set_cancel(true); }}
Hello Pat,
Instead of cancelling the event I recommend you including another expression inside your if statement to check whether the new value that is being changed is equal to true. In this case the CellValueChanged event handler would not loop since only one of the fields would be able to hold the true value.
Below I am pasting a JavaScript snippet that demonstrates the change I have described above:
function WHG_CellValueChanged(sender, eventArgs) { var currentCell = eventArgs.get_cell(); if (currentCell.get_column().get_key() == "EmailYSN" && currentCell.get_value() == true) { currentCell.get_row().get_cell(3).set_value(false); } else if (currentCell.get_column().get_key() == "PrintYSN" && currentCell.get_value() == true) { currentCell.get_row().get_cell(2).set_value(false); } }
Please test the snippet on your side and let me know if you have any questions.
Regards, Ivan Kitanov