0
votes

I have a kendo grid with 4 checkbox columns with checked and unchecked status. Now I want to updated tabel based on checkbox checked status on custom command button click. Here is my kendo grid binding code

$(document).ready((function () {
            $.ajax({
                type: "POST",
                url: "member-security-list.aspx/getStatus",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $("#grid").kendoGrid({
                        dataSource: {data: response.d,pageSize: 20},
                        sortable: {mode: "single",allowUnsort: false},
                        pageable: {buttonCount: 5},
                        scrollable: false,
                        columns: [
                            { field: "login", title: "Login Id" },
                            { field: "name", title: "Member Name" },
                            { field: "mobile", title: "Mobile No." },
                            { field: "Alert Status", template: "<input type='checkbox' value='oncredit' class='oncredit' #if(oncredit === '1'){#= checked='checked' #}else{}#= />On Credit&nbsp;&nbsp;<input type='checkbox' value='ondebit' class='ondebit' #if(ondebit === '1'){#= checked='checked' #}else{}#= />On Debit&nbsp;&nbsp;<input type='checkbox' value='onlogin' class='onlogin' #if(onlogin === '1'){#= checked='checked' #}else{}#= />On Login&nbsp;&nbsp;<input type='checkbox' value='isblock' class='isblock' #if(isblock === '1'){#= checked='checked' #}else{}#=  />Block SMS Recharge" },
                            { command: { text: "Set", click: showDetails }, title: "Set" }
                        ]
                    });
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        }));

and here is my command button click code

function showDetails(e) {
            e.preventDefault();
            var d = this.dataItem($(e.currentTarget).closest("tr"));

//I want to access checkbox here and find its checked status for pass parameter.

            $.ajax({
                type: "POST", url: "member-security-list.aspx/setAlert",
                data: '{ "id":"' + d.id + '","status":"' + d.status + '"}',
                contentType: "application/json; charset=utf-8", dataType: "json",
                success: function (response) {
                    //some other 
                },
                failure: function (response) { }
            });
        }
1
.closest("tr").find("td:nth-child(1) input") ?Ross Bush
@RossBush thanks for response but here I want to access all 4 check boxes and its checked status.Amit Mishra

1 Answers

0
votes

Now I have solved my problem. Here is my working code

function showDetails(e) {
            e.preventDefault();
            var credit, debit, login, block;
            var d = this.dataItem($(e.currentTarget).closest("tr"));
            var tr = $(e.target).closest("tr");
            if (tr.find('.oncredit').is(':checked'))
                credit = '1';
            else
                credit = '0';
            if (tr.find('.ondebit').is(':checked'))
                debit = '1'
            else
                debit = '0';
            if (tr.find('.onlogin').is(':checked'))
                login = '1';
            else
                login = '0';
            if (tr.find('.isblock').is(':checked'))
                block = '1'
            else
                block = '0';

            $.ajax({
                type: "POST", url: "member-security-list.aspx/setAlert",
                data: '{ "id":"' + d.id + '","oncredit":"' + credit + '","ondebit":"' + debit + '","onlogin":"' + login + '","isblock":"' + block + '"}',
                contentType: "application/json; charset=utf-8", dataType: "json",
                success: function (response) {
                    alert('Updated');
                },
                failure: function (response) { }
            });
        }