RadGrid Batch Edit Checkbox Column Client Event

[Lannity]

Hi.

I want to call a Javascript function on a batch edit enabled grid for the actual moment the user clicks the checkbox, checking or unchecking the value on a GridCheckBoxColumn checkbox control in the grid.  The JavaScript function called should be able to reference the row to which the clicked checkbox belongs in order to change any values in the same row.

Where in the batch edit grid do I setup the call to the function for the GridCheckBoxColumn click event in a way that allows setting up the (sender, args) parameters that allow manipulating data in the row which contains the clicked checkbox?

Many thanks for your help in advance.

 -Lannity

[Konstantin Dikov]

Hi Lannity,

I am posting the answer from the support ticket that you have opened with the same question:

"The easiest way for getting reference to the row and the data item when the value of the check box is changes is by handling the client-side OnBatchEditCellValueChanged event of the grid. For your convenience, following is a simple example demonstrating such implementation:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function pageLoad() {
            $find("<%=RadGrid1.ClientID%>").get_masterTableView().get_dataItems();
        }

        function valueChanged(sender, args) {
            if (args.get_columnUniqueName() == "rgcExcellent") {
                var row = args.get_row();
                var dataItem = $find(row.id);
                var idCell = dataItem.get_cell("ID");
                var batchManager = sender.get_batchEditingManager();
                batchManager.changeCellValue(idCell, 9);
                //.....
                //.....
                //call the line below if you are going to change values in other cells
                batchManager._tryCloseEdits(sender.get_masterTableView());
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadGrid runat="server" ID="RadGrid1"OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="false" EditMode="Batch">
        <Columns>
            <telerik:GridBoundColumn DataField="ID"></telerik:GridBoundColumn>
            <telerik:GridCheckBoxColumn UniqueName="rgcExcellent"DataField="ExcellenceMarker"></telerik:GridCheckBoxColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnBatchEditCellValueChanged="valueChanged" />
    </ClientSettings>
</telerik:RadGrid>

And some dummy data:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("ExcellenceMarker", typeof(Boolean));
    for (int i = 0; i < 5; i++)
    {
        table.Rows.Add(i, i % 2 == 0);
    }

    (sender as RadGrid).DataSource = table;
}

As you can notice, I have also demonstrated how to use the data item for getting reference to a particular cell and how to change the value of that cell."


Regards,
Konstantin Dikov
Telerik