首页 > 解决方案 > Kendo Grid 自定义工具栏按钮启用/禁用

问题描述

我在工具栏面板中有一个带有保存按钮的剑道网格。我有一个可编辑的建议折扣列,如果用户输入 0 到 100(不包括小数)之间的整数,则保存按钮应该可见或启用,否则不可见或禁用。我能够实现使按钮不可见或禁用,但是当他们输入正确的值时,按钮不可见或启用。请帮我。我最近才开始研究 Kendo UI。

function setEnabled(enabled) {
    if (enabled) {
        // $(".k-grid-nstToolbarBtn").removeClass("k-state-disabled");
        $(".k-grid-nstToolbarBtn").show();
    }
    else {
        // $(".k-grid-nstToolbarBtn").addClass("k-state-disabled");
        $(".k-grid-nstToolbarBtn").removeAttr("href");
        $(".k-grid-nstToolbarBtn").hide();
    }
}



$('#NSTGrid').kendoGrid({
           toolbar: [{ type: "button", text: "Save", name: "nstToolbarBtn", className: "k-grid-saveData" }],
           dataSource: {
               data: data.ReportData,
               schema: {
                   model: {
                       fields: {

                           ProposedDiscount: {
                               validation: { 
                                   required: true,
                                   proposeddiscountvalidationcvalidation: function (input) {
                                       if (input.val() != "" && input.is("[name='ProposedDiscount']")) {
                                           input.attr("data-proposeddiscountvalidationcvalidation-msg", "Proposed Discount should be whole number");
                                           setEnabled(false);
                                           return input.val() >= 0 && input.val() < 101 && input.val() % 1 == 0;

                                       } else {


                                           setEnabled(true);
                                           return true;
                                       }
                                   }
                               }
                           },


                           ProductApprovedDiscount: { type: "decimal", editable: false },
                           BAN: { type: "string", editable: false },

标签: kendo-uikendo-grid

解决方案


我认为传递给您的setEnabled函数的值需要与您作为验证结果返回的值相同。请尝试以下更改:

proposeddiscountvalidationcvalidation: function (input) {
    if (input.val() != "" && input.is("[name='ProposedDiscount']")) {
        input.attr("data-proposeddiscountvalidationcvalidation-msg", "Proposed Discount should be whole number");
        var valid = input.val() >= 0 && input.val() < 101 && input.val() % 1 == 0;
        setEnabled(valid);
        return valid;
    } else {
        return true;
    }
}

推荐阅读