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

[Rahul]

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":"[e-mail]",
                         "Description":"Rahul is a java developer"
                      },
                    {
                        "UserId":2,
                        "UserName":"Meet",
                        "UserType":"System Users",
                        "Role":"Super Admin",
                        "AssignedGroups":"Finance",
                        "Status":false,
                        "Email":"[e-mail]",
                        "Description":"meet is a CA"
                  },
                  {
                     "UserId":3,
                     "UserName":"Ravi1",
                     "UserType":"System Users",
                     "Role":"Admin",
                     "AssignedGroups":"Sales",
                     "Status":true,
                "Email":"[e-mail]",
                "Description":"Ravi is a java developer"
            },
            {
}]
         }

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

[Alex Hajigeorgieva]

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