Cell Click or Cell Edit event for Checkbox column in EjGrid

[Ganga]

I need to call a function while editing a check box column.For this i am using Cell Edit Event .But it's not working for check box column.How can I achieve this?

[Ajith R]

Hi Ganga,

Thanks for using Syncfusion products.

Query: I need to call a function while editing a check box column. For this I am using Cell Edit Event .But it's not working for check box column. How can I achieve this?

We need more clarification regarding your requirement before start working on it. Please refer the below queries for further details. Could you please let us know whether,

1.       Do you need to call a function when editing a row cell or changing the check box status on the cell ?

2.       Have you bound the check box column from data source or used as a  template column ?

3.       Please provide us the EditType of your Grid and we would like to let you know that the batch edit type only can trigger the CellEdit event.

Please provide the information about the above queries or else please provide us the code snippet of your view page. It will be helpful for us to sort out your requirement and provide you the response as soon as possible.

Please let us know if you have any concerns.

Regards,

Ajith R

[Ganga]

Thanks for the reply.The values were bounded from the datasource only.Editing type of that column is boolean.The function will trigger when the checkbox is checked ...

[Ajith R]

Hi Ganga,

Thanks for your update.

Query: The function will trigger when the checkbox is checked

We suggest you to use EditTemplate property in the ejGrid to achieve your requirement. We can set the change client side event to the CheckBox control in the edit template and handle the change event function. Please refer the below code snippet for further details.

@(Html.EJ().Grid<CheckboxEditing.OrdersView>("FlatGrid")

        --------

        --------               

        .Columns(col =>

        {

            -------

            -------

            col.Field("Verified").HeaderText("Verified").EditTemplate(ET => { ET.Create("create").Read("read").Write("write"); })

.EditType(EditingType.Boolean).TextAlign(TextAlign.Center).Width(100).Add();

      })

)

<script type="text/javascript">

    function create() {

        // Create the input for check box

        return $("<input>");

    }

    function write(args) {

        // Render the check box

        args.element.ejCheckBox({ change:"onChange", checked: args.rowdata !== undefined ? args.rowdata["Verified"] : "" });

    }

    function read(args) {

        // Read the checked value from checkbox

        return args.ejCheckBox("isChecked");

    }

    function onChange(args) {

       //write your code here

        alert("Change event triggered");

    }

</script>

Please refer the below UG Documentation and online demo to know further details about EditTemplate in ejGrid.

UG Documentation: http://help.syncfusion.com/ug/js/default.htm#!documents/edittemplate.htm

Online Demo: http://mvc.syncfusion.com/demos/web/grid/edittemplate

For your convenience we have created a simple sample and the same can be downloaded from the below link.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/118384/CheckboxEditing-1257521764.zip

Please let us know if you have any concerns.

Regards,

Ajith R