具有默认列的Kendo网格
问题描述:
我想向用户展示列的子集并允许它们在需要时添加额外的列。我努力在加载时只加载列的子集。请找到我已经完成的代码。具有默认列的Kendo网格
<kendo-grid k-options="vm.mainGridOptions"
k-columns="vm.mainGridColumns"
k-sortable="true"
k-filterable="{mode: 'row'}"
k-column-menu="true"
k-serverFiltering="false"
k-pageSize="10"
k-pageable="{ pageSizes: [5, 10, 25, 50, 100] }"> </kendo-grid>
控制器代码
var mainGridDataSource = new kendo.data.DataSource({
transport: { read: mainGridReadEventHandler, cache: true },
serverFiltering: false,
page: 1,
pageSize: 10,
schema: {
data: 'data',
total: 'total',
model: {
fields: {
customerName: { type: "string" },
serviceAccountStatus: { type: "string" },
customerNumber: { type: "string" },
serviceType: { type: "string" },
utilityAccountNumber: { type: "string" },
serviceAddress: { type: "string" },
billingAccountNumber: { type: "string" },
utility: { type: "string" },
phoneNumber: { type: "string" },
email: { type: "string" }
}
}
}
});
vm.mainGridColumns = [
{
field: "customerName",
title: "Name",
template:
"<a ui-sref='resiservice.account-search.customer-details({ customerId:${customerId}, serviceAccountId:${serviceAccountId} })'>${customerName}</a>"
},
{
field: "serviceAccountStatus",
title: "Status"
},
{
field: "customerNumber",
title: "NAP Customer #"
},
{
field: "serviceType",
title: "Commodity"
},
{
field: "utilityAccountNumber",
title: "Utility/Account #"
},
{
field: "serviceAddress",
title: "Service Address"
},
{
field: "billingAccountNumber",
title: "NAP Account #"
},
{
field: "utility",
title: "Utility"
},
{
field: "phoneNumber",
title: "Phone #"
},
{
field: "email",
title: "Email Address"
}
];
答
使用columns.hidden property隐藏一列,即
{
field: "utility",
title: "Utility",
hidden: true
},
{
field: "phoneNumber",
title: "Phone #",
hidden: true
},
{
field: "email",
title: "Email Address",
hidden: true
}
例如: http://dojo.telerik.com/EzuFO
该列在菜单中的列列表上仍然可见。
Dawid,我也有另外一个问题。是否有可能将所有列选择保留在单个位置。可能是用来隐藏和显示列的按钮?如果你想我可以为此添加另一个问题。 – tt0206
下面是我为隐藏/显示列菜单实现单点的方法。它非常复杂,尽管在我的项目中使用了所有适当的样式,看起来好多了,但它应该能让你继续下去:http://dojo.telerik.com/@Stephen/AvAqE单击左上角的小按钮网格工具栏的角落可以看到它的行动。链接到我在Telerik论坛上的原始答案,并提供一些解释:http://www.telerik.com/forums/grid-column-menu-only-in-one-column#6d94PE5530C9OpC4n5JhXA –
@TrusharTandel - 我很乐意提供帮助。如果我的回答解决了您的问题,并且有帮助,请将其标记为已接受并立即开通。关于你的第二个问题,我认为下次你应该考虑提出另一个问题,以便对有同样问题的人很容易找到。与此同时,斯蒂芬的回答可能会被提高并加入到他的得分中。 –