About datagrid resize and filter

[CZ]

Hi,

We use this control in our project, everything is good in one place, but in another place columns in data grid cannot be resize, the width of columns can't be changed, we are trying to fix this, but can't find solution, does the control have any requirement for resizing? the code is like below

<ejs-grid

            :key="pipelinelistrefreshkey"

            :allowSorting = 'true'

            :allowFiltering = 'true'

            :allowResizing = 'true'

            height="200"

            rowHeight=30

            :columns = "pipelinevpcolumns"

            :dataSource = "pipelinevpList"

            :rowSelected='pipelinerowSelected'

            :queryCellInfo='queryCellInfo'

            :rowDataBound='rowDataBound'

          />

Another question, is there any callback after filter columns, we need to show rows number after filter?

Thanks,

CZ

[Rajapandiyan Settu]

Hi Zhao, 

 

Thanks for contacting Syncfusion support. 

Query #1: columns in data grid cannot be resize, the width of columns can't be changed, we are trying to fix this, but can't find solution, does the control have any requirement for resizing? 

From you query, we suspect that the Resize module might not be injected the Grid. To use Grid features like Sorting, Filtering, Resizing, etc., then the required service modules should be injected into the providers section of root vue. 

Feature modules: https://ej2.syncfusion.com/vue/documentation/grid/module/ 

[App.vue] 

<script> 

import { GridPlugin, Sort, Filter, Resize } from "@syncfusion/ej2-vue-grids"; 

export default { 

  --- 

  provide: { 

    grid: [Sort, Filter, Resize] 

  } 

} 

</script> 

We have prepared a sample for your reference. You can get it from the below link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue_grid_resize93021715.zip 

Refer to the below documentation to get starts with EJ2 Vue Grid component. 

Getting-Started: https://ej2.syncfusion.com/vue/documentation/grid/getting-started/ 

Query #2: is there any callback after filter columns, we need to show rows number after filter? 

By default, the actionComplete event will be triggered once the Grid actions like Filtering, Sorting, Paging, etc., are done. In that event you can perform your actions as you want. 

actionComplete: https://ej2.syncfusion.com/vue/documentation/api/grid/#actioncomplete 

[App.vue] 

<template> 

<div id="app"> 

    <ejs-grid 

            :columns = "pipelinevpcolumns" 

            :dataSource = "pipelinevpList" 

            --- 

            :actionComplete="actionComplete" 

          /> 

</div> 

</template> 

<script> 

export default { 

  --- 

  methods: { 

    actionComplete: function(args){ 

      if(args.requestType == "filtering"){ 

        // do your action hear  

        console.log(args); 

      } 

    } 

  }, 

} 

</script> 

Please let us know if you have any concerns. 

Regards, 

Rajapandiyan S 

[CZ]

Hi  Rajapandiyan S,

It works, thank you for the support always!

Thanks,

CZ

[Rajapandiyan Settu]

Hi CZ, 

 

We are glad that you have achieved your requirement with the provided solution. 

 

Please get back to us if you need any assistance.  

Regards, 

Rajapandiyan S