This is a migrated thread and some comments may be shown as answers.

How can we add Kendo UI Grid Group Header Template in Vue ?

1 Answer 104 Views
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 1
Rahul asked on 18 Dec 2018, 09:59 AM

I am facing issue with display number of rows in a particular group header in kendo grid group header template in single file component in Vue.


This is my code.

           <kendo-datasource ref="localDataSource" :data="filteredUsers"
          :group='{ field : "Role", aggregates: [ { field: "Role", aggregate: "count" }] }'>
    </kendo-datasource>
 
           <kendo-grid :height="500"  :data-source-ref="'localDataSource'"  :resizable="true"
               :filterable="false":sortable-allow-unsort="true":sortable-show-indexes="true"
               :scrollable-virtual="true" :pageable-numeric="false"
               :pageable-previous-next="false" :pageable-messages-display="'Showing {2} users'"
               :editable="'popup'":toolbar="[{name: 'excel', text: 'Excel'}]"
               :excel-file-name="'Motadata_UserListing.xlsx'" :excel-filterable="true" >

 

                  <kendo-grid-column :selectable="true" :width="35"></kendo-grid-column>
               <kendo-grid-column :field="'UserId'" :hidden="true"></kendo-grid-column>
               <kendo-grid-column :field="'UserName'"  :width="150"></kendo-grid-column>
               <kendo-grid-column :field="'UserType'":width="180"></kendo-grid-column>
              
            <kendo-grid-column :field="'Role'" :width="170"
:group-header-template='headerTemplate'></kendo-grid-column>

 

               <kendo-grid-column :field="'AssignedGroups'"  ></kendo-grid-column>
               <kendo-grid-column :field="'Email'":width="210" ></kendo-grid-column>
               <kendo-grid-column :field="'Description'":width="200" ></kendo-grid-column>
 
          <kendo-grid-column :field="'Status'"  :width="170" :template="this.toggleTemplate()"></kendo-grid-column>
 
</kendo-grid>

 

Vue js code

 
        data () {
 
   return {
                          
                 users:[ {
                          "UserId":1,
                          "UserName":"Rahul",
                          "UserType":"System Users",
                          "Role":"Super Admin",
                          "AssignedGroups":"Sales",
                          "Status":true,
                          "Email":"rahul@motadata.com",
                          "Description":"Rahul is a java developer"
                       },
                     {
                         "UserId":2,
                         "UserName":"Meet",
                         "UserType":"System Users",
                         "Role":"Super Admin",
                         "AssignedGroups":"Finance",
                         "Status":false,
                         "Email":"meet@motadata.com",
                         "Description":"meet is a CA"
                   },
                   {
                      "UserId":3,
                      "UserName":"Ravi1",
                      "UserType":"System Users",
                      "Role":"Admin",
                      "AssignedGroups":"Sales",
                      "Status":true,
                "Email":"ravi@motadata.com",
                "Description":"Ravi is a java developer"
            },
            {
}]
         }
        
    },
Methods:{ 
    headerTemplate () {
             return kendo.template("Role #=value# (#= count #)");
        }
}

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 20 Dec 2018, 09:17 AM
Hi, Rahul,

Thank you for the provided snippets.

There are two ways to achieve the desired results - use the template inline as demonstrated in the documentation:

https://www.telerik.com/kendo-vue-ui/components/grid/grouping/aggregates/#toc-aggregates

Alternatively, to use it as a function, you should call the resulting kendo.template() function with parameters so they can be bound:

https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/template

    headerTemplate (e) {
     return kendo.template("Role #=value# (#= count #)")(e);
}

Here is a runnable example with the provided data and template: 

https://dojo.telerik.com/@bubblemaster/izoZaToQ

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Rahul
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or