屎弟夫

        const TemplateSet = {
            NoRecords: '<em>查無符合資料!</em>',
            CheckAll: "<input type='checkbox' id='header-chb' class='k-checkbox header-checkbox'><label class='k-checkbox-label' for='header-chb'></label>",
        };

上方全選按鈕的html template

            columns: [
                {
                    headerTemplate: TemplateSet.CheckAll,
                    template: function (dataItem) {
                        return `<input type='checkbox' id="${dataItem.FeeID}" class='k-checkbox row-checkbox'>
                                    <label class='k-checkbox-label' for="${dataItem.FeeID}"></label>`;
                    },
                    width: "5%"
                },

套用在Grid 欄位的物件內 這邊小記(dataItem 是 整個dataSource 的完整每一筆資料,所以可以用dataItem.XXX 來呼叫，或是像json格式呼叫 dataItem["XXX"] )

        $grid.data("kendoGrid").table.on("click", ".row-checkbox", selectRow);

定義KendoGrid Click Event 要呼叫的function

        function selectRow() {

            let checked = this.checked,
                row = $(this).closest("tr"),
                grid = $grid.data("kendoGrid"),
                dataItem = grid.dataItem(row);

            self.todoListChkList[dataItem.get('FeeID')] = checked;

            if ($('#header-chb').prop('checked')) {
                $('#header-chb').prop('checked', false)
            }
        }

 

$('#header-chb').change(function (e) {

            var checked = $(e.target).prop('checked');

            switch (true) {

                //全部選取
                case checked:

                    $('.row-checkbox').each(function (idx, item) {
                        let $target = $(item);
                        $target.prop('checked', true);
                        self.todoListChkList[$target.attr('id')] = true;
                    });

                    break;

                //取消選取
                case !checked:

                    $('.row-checkbox').each(function (idx, item) {
                        let $target = $(item);
                        self.todoListChkList[$target.attr('id')] = false;
                        $target.prop('checked', false);
                    });

                    break;
            };            
        });

全選的控制，這邊的做法是先全選，再按一次才會全部取消

所以上面那段Grid 在點擊取消後，也會把全選按鈕取消掉