We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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

1 Reply 1 reply marked as answer

SK Sujith Kumar Rajkumar Syncfusion Team September 21, 2020 12:14 PM UTC

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, 
 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 


Marked as answer
Loader.
Up arrow icon