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

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

CHTML:


    





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: '#= ProductName #'
                        }, {
                            field: "Location",
                            title: "Location",
                            width: 400,
                            filterable: true,
                        }, {
                            field: "EffectiveDate",
                            title: "Date",
                            width: 200,
                            filterable: true,
                        }, {
                            title: " ",  //checkbox
                            width: 150,
                            template: "",
                            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..
            }
        });








你可能感兴趣的:(ASP.NET)