具有默認列的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網格

回答

相關問題