有条件地检查/取消选中Kendo网格列 [英] Check / Uncheck Kendo Grid Columns Conditionally
问题描述
我有一个场景，我需要基于两次复选框单击来隐藏/显示kendo网格中的第一列标题.我尝试了HideColumn功能，但无法正常工作.后来我使用了Hidden属性，并且可以正常工作.但是现在我想隐藏更多的列(第二到第四列).我不知道如何访问这些列.我尝试了此站点中提到的所有技术，但没有任何帮助( https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/showcolumn ).有人可以帮我吗?
I had a scenario where I need to hide/ show first column header in kendo grid based on two checkbox click. I tried the HideColumn functionality but it was not working. I later used the Hidden property and is working properly. But now i wanted to hide some more columns(second till fourth). I dont know how to access those columns. I tried all the techniques mentioned in this site but nothing helped(https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/showcolumn). Can someone help me on this.
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);
})
}
推荐答案
我认为hideColumn& showColumn工作正常，我不确定您要做什么.但是根据图片和您的解释，我创建了一个示例来隐藏第1列，全部显示并隐藏第1-4列的简单示例这里
I think the hideColumn & showColumn is working properly, i'm not sure what are you trying to do. But from the image and your explanation i created an example to hide column 1, show all, and hide column 1-4 simple example here
这篇关于有条件地检查/取消选中Kendo网格列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
