[Solved] Responding to a Click Event of a Checkbox in a row

[Reid]

Hello,

I have a CheckBox bound to a boolean column in the ViewModel that is bound to a Grid using a List<> object.  I would like to respond to the click event of the checkbox so that I can update the record in the database using Ajax.

I have a grid in another view that updates records using ajax, this case is a bit different.  Ideally this would happen:

1. The user Checks the checkbox on a row to stop payment
2. There is a confirmation Window shown and if confirmed calls the Ajax Update action on the controller with the key value of the row and the Checked or not Checked state of the checkbox, or stop payment option.  (I have added the PaymentID to the datakeys.)

is that possible? 

Thanks,

Reid

[Daniel]

Hello Reid,

To add a handler for the CheckBoxes click event you could either use the jQuery delegate method or specify the onclick attribute on the element. The model DataKey can be obtained by using the Grid's dataItem method on the closest row. For example:

$("#Grid").delegate(":checkbox", 'click', function (e) {
    if (confirm("Are you sure?") == true) {
        var grid = $("#Grid").data("tGrid");
        var row = $(this).closest('tr');
        var id = grid.dataItem(row).ProductID;
        var isChecked = $(this).is(":checked");
        // make the request to save the value
    }
});

Kind regards,
Daniel
the Telerik team

[Reid]

Hi Daniel,

Thanks for the response.

Ok I am not as good as I should be on the client DOM and don't see how to engage it.  Where should this code be called?  I tried the OnDocumentReady handler and get nothing when it is clicked.  Can you expand a bit on this?

I also tried this and get nothing:

 columns.Bound(p =>  p.OnHold).Width(Model.GridModel.ColumnWidths["OnHold"])                                         

        .ClientTemplate("<input type='checkbox' name='OnHold' value='<#=OnHold#>' 
            onclick='checkboxClicked(this)' />");

<script type="text/javascript" language="javascript">

    function checkboxClicked(checkBox) 

        {     
            alert(checkBox.clicked);        

        };    
</script>

Also one more question along this topic if you know, the checkboxes show up as greyed with a greyed checkmark.   Is there a way to default it to no checkmark until checked?

Much appreciated!

Reid

[Daniel]

Hi Reid,

I am not sure what may be preventing the click event from being fired. The code you sent seems correct. I attached a sample project which uses the checkbox click event to make a request and save the value. Could you check it and see if I missed something?
The checkbox will be gray if you have set the "disabled" attribute. This will also explain why the event is not fired. 
The checked state is controlled with the "checked" attribute.

Kind regards,
Daniel
the Telerik team