Calculate column value based on another column with filtering in Vue Grid

[Christian DAquino]

I have two columns which should return the Year (headerText='Needed Year') and the Week number (headerText='Needed Week') based another column (field='need_date' headerText='Need Date').

In order to show their calculated values, I'm using templates (yearTemplate & weekTemplate) for these columns. But the problem is that when I do that the filters won't show up.

Is there another better way to show a column with a calculated value based on another column? How do I add the filters to those two columns?

Attachment: RoughCutPlan_cd799f8e.zip

[Sujith Kumar Rajkumar]

Hi Christian, 

 

Greetings from Syncfusion support. 

 

The Grid’s filtering functionality works on basis of the column field by comparing the filtered data with the corresponding data in the underlying data source which is bound to the grid. And the custom values set using the column template cannot be filtered in the Grid. So for performing the filtering on the Grid column, the field property needs to be set on it as this operation will be done based on the field value in the data source. 

 

Since your requirement is to calculate column value based on another column with filtering(and other Grid actions) enabled for it, you can achieve it by using the Grid’s queryCellInfo event(Triggers before each cell is appended to the Grid) to calculate and set the value to the row data and the cell element’s innerText(These will be received in the event arguments). Using this approach, this newly calculated data will be added to the grid data source with the field name it is assigned with and so the Grid actions in this column will be performed based on this field value. This is demonstrated in the below code snippet, 

 

<template> 

        <div id="app"> 

            <ejs-grid :dataSource="data" :allowFiltering="true" allowPaging="true"                       :queryCellInfo="queryCellInfo"> 

                <e-columns> 

                            . 

                            . 

                    <e-column field="Year" type="number" headerText="Year" width="150"></e-column> 

                    <e-column field="Day" type="number" headerText="Day" width="150"></e-column> 

                </e-columns> 

            </ejs-grid> 

        </div> 

</template> 

<script> 

export default { 

            data() { 

                . 

                . 

            }, 

            methods: { 

               // Grid’s queryCellInfo event handler 

               queryCellInfo: function(args) { 

                   // Check the column field 

                   if (args.column.field === "Year") { 

                       // New value is calculated 

                       var currentDate = args.data.OrderDate; 

                       var year = currentDate.getFullYear(); 

                      // Calculated value is set to the row data 

                      args.data.Year = year; 

                      // Calculated value is set as the cell’s inner text 

                      args.cell.innerText = year; 

                 } 

                 else if (args.column.field === "Day") { 

                      // New value is calculated 

                      var currentDate = args.data.OrderDate; 

                      var day = currentDate.getDate(); 

                     // Calculated value is set to the row data 

                     args.data.Day = day; 

                     // Calculated value is set as the cell’s inner text 

                     args.cell.innerText = day; 

                } 

           } 

        } 

} 

</script> 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://codesandbox.io/s/vue-forked-q46n4?file=/src/App.vue  

 

API link: https://ej2.syncfusion.com/vue/documentation/api/grid/#querycellinfo  

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R