Handling the checkbox check event

[Brent Hoskisson]

I have a checkbox in a GridDataControl column.  How can I handle when the checkbox gets checked or not?

[Brent Hoskisson]

I found the GridDataControl.CurrentCellChanged event, but now how do I get the new value of the cell?  It doesn't seem to make updates to the underlying model.

 

[Kasthuriraja G]

Hi Brent,

We have analyzed your Query.

You can achieve your requirement by using ControlValue.This ControlValue holds the Newly Updated Value.

You can refer the below Code Snippet  to achieve your requirement.

Code snippet [C#]:

 

this.SyncGrid.CurrentCellChanged += new Syncfusion.Windows.ComponentModel.

GridRoutedEventHandler(SyncGrid_CurrentCellChanged); 

 

void SyncGrid_CurrentCellChanged(object sender, Syncfusion.Windows.ComponentModel.

SyncfusionRoutedEventArgs args)

        {

             var currentcellmanager = this.SyncGrid.Model.CurrencyManager;

             if (currentcellmanager.CurrentCell.HasCurrentCell)

            {

                var currentcell = currentcellmanager.CurrentCell;

                 if (currentcell.Renderer is GridCellCheckboxRenderer)

                {

                      var value = currentcell.Renderer.ControlValue as bool?;

                      if ((bool)value)

                    {

                        MessageBox.Show("CHECKED");

                    }

                        else

                    {

                        MessageBox.Show("UNCHECKED");

                    }

 

                }

 

            }

 

We have prepared a sample based on this and you can find the sample under the following location:

Sample : checkboxevent.zip

Please let us know if this helps.

Thanks/Regards,

Kasthuriraja.G

[Guadalupe]

Hello 

It's possible in asp.net?

[Vignesh Natarajan]

Hi Guadalupe, 

 

Thanks for using Syncfusion product. 

 

From your query, we are able to understand that you want to get the row and cell information in the server side, when the checkbox cell is clicked in the grid. To achieve your requirement we suggest you to use the below solution. 

 

Refer the below code example. 

 

In the below code example we have used the OnServerRecordClick event to trigger the server side event when the checkbox is clicked. We have canceled the default server side record click event when the record is clicked and triggered the server side event when the checkbox is clicked. 

 

 

<asp:UpdatePanel runat="server"> 

        <ContentTemplate> 

            <script type="text/x-jsrender" id="columnTemplate"> 

                <input type="checkbox" id="check{{:EmployeeID}}" onclick="myfunc(event)" name="CheckBoxColumn" /> 

            </script> 

            <div> 

                <ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True" IsResponsive="true" OnServerRecordClick="FlatGrid_ServerRecordClick"> 

                    <Columns> 

                        <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" /> 

                        <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" /> 

                        <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75" Priority="4" /> 

                        <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="75" Format="{0:C}" Priority="3" /> 

                        <ej:Column HeaderText="CheckBox" Template="#columnTemplate" TextAlign="Center" Width="110" /> 

                    </Columns> 

                    <ClientSideEvents TemplateRefresh="templaterefresh" RecordClick="RecordClick" ActionComplete="complete" /> 

                </ej:Grid> 

            </div> 

 

 

            <script type="text/javascript"> 

 

                var id, state; 

 

                function myfunc(e) { 

                    id = $(e.target).attr("id"); 

                    state = $(e.target).prop("checked"); 

                    triggerEvent(e); 

                } 

 

                function triggerEvent(e) { 

                    var obj = $(".e-grid").data("ejGrid"); 

                    var args = { currentTarget: e.currentTarget.name, selectedRecord: obj.getSelectedRecords(), selectedIndex: obj.model.selectedRowIndex }; 

                    obj._trigger("recordClick", args); 

                } 

 

                function RecordClick(e) { 

                    if (e.currentTarget != "CheckBoxColumn") 

                        return false 

                    else { 

                        triggerEvent(e); 

                    } 

                } 

 

                function complete(args) { 

                    setTimeout(function () { 

                        $("#" + id).prop("checked", state); 

                    }, 500) 

                } 

            </script> 

        </ContentTemplate> 

    </asp:UpdatePanel> 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/143616/ze/WebApplication1-389536620  

 

We also have a Knowledge base document regarding this issue. Please refer the below link for KB document. 

 

https://www.syncfusion.com/kb/4886/how-to-add-a-custom-command-with-server-side-event-handling 

 

If we misunderstood, your requirement please get back to us with the following details. 

1. Share the complete grid code example are you using.
2. Share your requirement in detail.

 

Regards, 

Vignesh Natarajan.