How to move dropdown paging and paging message to toolbar?

[yuren]

Hi, Thanks for the great plugin!

Is it possible to move dropdown paging and paging message in the toolbar section without pagination?

Here is the screenshot image, I want to acheive.

[Manivel Sellamuthu]

Hi yuren, 

Greetings from Syncfusion support. 

We have validated your requirement and you can achieve your requirement using toolbarTemplate and created event of the Grid. Please refer the below code example and sample for more information. 

<template> 

  <div id="app"> 

    <ejs-grid 

      :dataSource="data" 

      :allowPaging="true" 

      ref="grid" 

      :created="created" 

      :pageSettings="pageSettings" 

      :toolbar="toolbar" 

    > 

      <e-columns> 

 . . . 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { 

  GridPlugin, 

  Page, 

  Toolbar 

} from "@syncfusion/ej2-vue-grids"; 

import { data } from "./data"; 

 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: data, 

// in the toolbar using the template define the container elements using template property 

      toolbar: [ {template: '<div id="pgrSize"></div>'},{template: '<div id="pgrContainer"></div>'}, "Search"], 

      pageSettings : {pageSizes: true} 

    }; 

  }, 

  provide: { 

    grid: [Page, Toolbar], 

  }, 

  methods: { 

created: function (args) { 

// appending the pager message in the toolbar containers as per requirement 

  var pagesizes = document.getElementsByClassName('e-pagerdropdown')[0]; 

  var constant = document.getElementsByClassName('e-constant')[0]; 

  var pager = document.getElementsByClassName('e-parentmsgbar')[0]; 

  document.getElementById("pgrSize").append(pagesizes); 

  document.getElementById("pgrSize").parentElement.appendChild(constant) 

  document.getElementById("pgrContainer").append(pager); 

} 

  }, 

}; 

</script> 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

Sample: https://codesandbox.io/s/160739-toolbartemplate-paging-oll86?file=/src/App.vue 

Please let us know, if you need further assistance. 

Regards, 

Manivel