Telerik Kendo --Grid之CheckBox 多选 toolbar监听编辑（ASP.NET MVC）

备注：主要介绍的是其中一种思路，代码可能有部分不全或者失误

CHTML:

<span style="color:#009900;"><!-- list--></span>
    <div id="myGrid"></div>

<span style="color:#006600;"><!--toolBar--></span>
<script id='cust_toolbar' type='text/x-kendo-template'>    
        <div class="col-md-10 clear-padding">
            <a class="k-button k-button-icontext k-grid-add k-cust-add" data-resx="text:addNewSchedule">
                <span class="k-icon k-add"></span>Add New Schedule
            </a>
        </div>      
        <div class="col-md-2 clear-padding">
            <a class="k-button k-button-icontext k-grid-delete k-cust-delete">
                <span class="k-icon k-delete"></span>Remove
            </a>
            <a class="k-button k-button-icontext k-grid-update k-cust-edit">
                <span class="k-icon k-edit"></span>Clone
            </a>
        </div>
       
    </script>

JS:

初始化kendo grid 表： 

		//initial Telerik Grid control
                    var gridDataSource = new kendo.data.DataSource({
                        data: someDateObject,
                        pageSize: 15
                    });

                    var $myGrid = $("#myGrid");
                    $myGrid.kendoGrid({
                        toolbar: [
                             { template: kendo.template($("#cust_toolbar").html()) }
                        ],
                        dataSource: gridDataSource,
                        height: 500,
                        groupable: true,
                        sortable: true,
                        filterable: {
                            extra: false
                        },
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                        columns: [
                        {
                            field: "ProductName",
                            title: "Name",
                            width: 300,
                            filterable: true,
                            template: '<a href="/Schedule/Edit/#= ID #">#= ProductName #</a>'
                        }, {
                            field: "Location",
                            title: "Location",
                            width: 400,
                            filterable: true,
                        }, {
                            field: "EffectiveDate",
                            title: "Date",
                            width: 200,
                            filterable: true,
                        }, {
                            title: " ",  //checkbox
                            width: 150,
                            template: "<input class='check_row' value='#= ID #' type='checkbox' />",
                            filterable: false
                        }],

                    });

checkbox 监听:（监听checkbox的选定状态disable和enable两个按钮（.k-cust-edit, .k-cust-delete））

$(".check_row").change(function () {
                        app.schedule.selRows = $(".check_row:checked");
                        if (app.schedule.selRows.length === 0) {
                            $(".k-cust-edit").addClass("not-active");
                            $(".k-cust-delete").addClass("not-active");
                        } else {
                            if ($(".k-cust-edit").hasClass("not-active")) {
                                $(".k-cust-edit").removeClass("not-active");
                            }
                            if ($(".k-cust-delete").hasClass("not-active")) {
                                $(".k-cust-delete").removeClass("not-active");
                            }
                        }
                    });

css: not-active

.not-active {
   pointer-events: none;
   cursor: default;
}

toolbar 按钮监听：

//Reomve the selected records
        $(".k-cust-delete", grid.element).off('click').on("click", function (ev) {
            selRows = $(".check_row:checked");
           //do something..
            }
        });

        $(".k-cust-edit").addClass("not-active");
        //Clone the selected records
        $(".k-cust-edit", grid.element).off('click').on("click", function (ev) {
            app.schedule.selRows = $(".check_row:checked");
            //do something..
            }
        });