具有默认列的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" 
     } 
    ];

Currently columns list coming like this first time

And i want to achive like this

来源

2016-11-10 tt0206

使用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

该列在菜单中的列列表上仍然可见。

来源

2016-11-10 19:05:13

Dawid，我也有另外一个问题。是否有可能将所有列选择保留在单个位置。可能是用来隐藏和显示列的按钮？如果你想我可以为此添加另一个问题。 – tt0206

下面是我为隐藏/显示列菜单实现单点的方法。它非常复杂，尽管在我的项目中使用了所有适当的样式，看起来好多了，但它应该能让你继续下去：http://dojo.telerik.com/@Stephen/AvAqE单击左上角的小按钮网格工具栏的角落可以看到它的行动。链接到我在Telerik论坛上的原始答案，并提供一些解释：http://www.telerik.com/forums/grid-column-menu-only-in-one-column#6d94PE5530C9OpC4n5JhXA –

@TrusharTandel - 我很乐意提供帮助。如果我的回答解决了您的问题，并且有帮助，请将其标记为已接受并立即开通。关于你的第二个问题，我认为下次你应该考虑提出另一个问题，以便对有同样问题的人很容易找到。与此同时，斯蒂芬的回答可能会被提高并加入到他的得分中。 –

具有默认列的Kendo网格

回答

相关问题