有条件地检查/取消选中Kendo网格列

Question

我有一个场景，我需要基于两次复选框单击来隐藏/显示kendo网格中的第一列标题。我尝试了HideColumn功能，但无法正常工作。后来我使用了Hidden属性，并且工作正常。但是现在我想隐藏更多的列（第二到第四列）。我不知道如何访问这些列。我尝试了本站点中提到的所有技术，但没有帮助（https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/showcolumn）。有人可以帮我吗？

function BuildNSTGrid() {
    var termLength = "",
          piidlist = "",
          customerContact = $('#rCustomerContact').val(),
            transaction = $('#rRenewalTransactionName'),
        chkHidden = $('#cboxEntire').is(":checked"),
        cList = $("#cList").children(),
        col = [],
        endpoint = "xyz";   

    if ($("input[name='cbRenewal']:checked").length>0) {

        $.each($("input[name='cbRenewal']:checked"), function () {
            termLength += this.value + ",";
        });
    }
    else if ($("input[name='cbNST']:checked").length>0) {
        termLength += $('#txtNonStdterm').val() + ",";
    }

    $.each(cList, function (idx, val) {

        piidlist += val.getAttribute("piid") + ","
    });


    $.get("/api/" + endpoint + "/xyz", {
        piidList: piidlist,
        termLength: termLength
    })
   .success(function (data, textStatus, jqXHR) {


           $('#NSTGrid').kendoGrid({

               dataSource: {
                   data: data.ReportData,
                   schema: {
                       model: {
                           fields: {

                               ProposedDiscount: {
                                   validation: { 
                                       required: true,
                                       proposeddiscountcvalidation: function (input) {
                                           if (input.val() != "" && input.is("[name='ProposedDiscount']")) {
                                               input.attr("data-proposeddiscountcvalidation-msg", "Should be whole number between 0 & 100");

                                               return input.val() >= 0 && input.val() < 101 && input.val() % 1 == 0;

                                           } else {
                                               return true;
                                           }
                                       }
                                   }
                               },


                               ProductApprovedDiscount: { type: "decimal", editable: false },
                               BAN: { type: "string", editable: false },
                               ProductName: { type: "string", editable: false },
                               piid: { type: "string", editable: false },
                               Currency: { type: "string", editable: false },
                               AddressA: { type: "string", editable: false },
                               AddressZ: { type: "string", editable: false },
                               CityA: { type: "string", editable: false },
                               CityZ: { type: "string", editable: false },
                               StateA: { type: "string", editable: false },
                               StateZ: { type: "string", editable: false },
                               ZipA: { type: "string", editable: false },
                               ZipZ: { type: "string", editable: false },
                               CountryA: { type: "string", editable: false },
                               CountryZ: { type: "string", editable: false },
                               CountyA: { type: "string", editable: false },
                               CountyZ: { type: "string", editable: false },
                               GeoCodeA: { type: "string", editable: false },
                               GeoCodeZ: { type: "string", editable: false },
                               GroupID: { type: "string", editable: false }
                           }
                       },
                   },
                   pageSize: 50
               },
               resizable: true,
               scrollable: true,
               sortable: true,editable:true,
               height: 310,
               columns: [

                     { width: "100px", field: "ProposedDiscount", title: "Proposed Discount", hidden: chkHidden, format: "{0:n0}"  },
                      { width: "100px", field: "ProductApprovedDiscount", title: "Product Approved Discount" },
                      { width: "120px", field: "piid", title: "Circuit ID / PIID " },
                      { width: "100px", field: "BAN", title: "Billing Account" },
                      { width: "100px", field: "ProductName", title: "Product Name/Location" },
                       {
                           field: "",
                           width: "120px",
                           title: "Location A",
                           template: function (d) {
                               if (d.AddressA != null)
                                   return d.AddressA + " " + d.CityA + " " + d.StateA + " " + d.ZipA + " - " + d.CountryA;
                               else
                                   return 'N/A';
                           }
                       },
                     {
                         field: "",
                         width: "120px",
                         title: "Location Z",
                         template: function (d) {
                             if (d.AddressZ != null)
                                 return d.AddressZ + " " + d.CityZ + " " + d.StateZ + " " + d.ZipZ + " - " + d.CountryZ;
                             else
                                 return 'N/A';
                         }
                     },
                    { width: "100px", field: "Currency", title: "Currency" },

               ]
           });

           if (chkHidden) {
               $("#NSTGrid th.k-header:first-child").hide();


           }
           else {
               $("#NSTGrid th.k-header:first-child").show();


           }


           var browser = get_browser_info();

           if (browser.name == "MSIE" && browser.version <= 9) {
               $(".k-grid-excel").hide();
           }

       })
        .error(function (XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        })

    }

Answer 1

我认为hideColumn和showColumn正常工作，我不确定您要做什么。但是根据图片和您的解释，我创建了一个示例来隐藏第1列，全部显示并隐藏第1-4列的简单示例here