Reuse grid, add properties dynamically

[Sreevatsan]

I have couple of grids. I need to set some common properties for all grids like allowSorting="true" :allowFiltering="true" :allowPaging="true". How can I set a common file for these properties and reuse it in all grids. I don't want to repeat these in every grids unnecessarily

[Dineshnarasimman Muthu]

Hi,

Greetings from Syncfusion Support.

We reviewed your query and understand that you are using two grids and want to apply common properties like allowSorting, allowFiltering, and allowPaging across them. To achieve this, we recommend defining these properties in the parent component [App.vue] and passing them as props to the reusable grid components [Grid1.vue, Grid2.vue].

App.vue

    <div>

      <Grid1 :common-grid-props="commonGridProps" />

      <br />

      <br />

      <Grid2 :common-grid-props="commonGridProps" />

    </div>

 

 

  data: () => {

    return {

      commonGridProps: {

        allowSorting: true,

        allowFiltering: true,

        allowPaging: true,

      },

    };

  },

 

Grid1.vue

  <ejs-grid

        :dataSource="data"

        :allowSorting="commonGridProps.allowSorting"

        :allowFiltering="commonGridProps.allowFiltering"

        :allowPaging="commonGridProps.allowPaging"

        :toolbar="toolbar"

        :filterSettings="filterSettings"

      >

 

 

Sample: https://stackblitz.com/edit/s6aecgkv?file=src%2FApp.vue,src%2FGrid2.vue,src%2FGrid1.vue

When commonGridProps in App.vue is updated, the changes will automatically propagate to all corresponding grids (Grid1 and Grid2).

Please get back to us for further assistance.

Regards,

Dineshnarasimman M