Filter: Excel type and Multiple options

[Christian DAquino]

1st question: Is there a way to implement the Excel type of filtering on the Gantt?

2nd question: How do I filter for two different criterias on the default filtering mode? Eg: "Task name = Task 1", OR "Task name = Task 2"

[Christian DAquino]

I've managed to use Excel type filter by changing the treeGrid module filter settings:

        load: function (args) {

          var ganttObj = document.getElementById(self.objectID).ej2_instances[0]

          ganttObj.treeGrid.filterSettings.type = 'Excel'

        },

Although it works, I get the error message below. Suggestions on how prevent the error?

[Monisha Sivanthilingam]

Hi Christian, 

 

Greetings from Syncfusion support. 

 

Please find the response for your queries below. 

 

Sl.No.	Query	Syncfusion Comments
1	How do I filter for two different criterias on the default filtering mode? Eg: "Task name = Task 1", OR "Task name = Task 2"	We can make use of the filterByColumn method to filter the same column based on multiple criteria. The following code snippets demonstrate the solution.    App.vue  <ejs-button id="filterRecord" cssClass="e-info" v-on:click.native="filter"        >Filter</ejs-button      methods: {      filter: function (e) {        var ganttObj = document.getElementById("gantt").ej2_instances[0];        ganttObj.filterByColumn("TaskName", "startswith", ["Iden", "List"], "or");      },    },      We have also prepared a sample for your reference.
2	Although it works, I get the error message below. Suggestions on how prevent the error?	We were able to replicate the error you reported and have considered it as a bug from our side. We have logged a bug report for it. You can track its status from the below feedback link.    Feedback: https://www.syncfusion.com/feedback/25122/issue-in-excel-type-filtering    The fix will be provided in the patch release scheduled on May 19, 2021.

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Christian DAquino]

Hi Monisha,

Thanks for that.

How do I display the labels on the filter options instead of their IDs? For instance, on the Discipline column below I've managed to have the labels displayed correctly on the grid by using the value accessor method. But the IDs are still showing on the filter options instead of their labels.

I've tried changing the both the filter template and adding its datasource to the gantt's TreeGrid module to no success.

[Monisha Sivanthilingam]

Hi Christian, 

 

You are welcome. 

 

We have made use of the custom filter to provide the text of the items in the filter drop down. The following code snippets demonstrate the solution. 

 

App.vue 

<e-columns> 

        <e-column field="TaskID"></e-column> 

        <e-column field="TaskName"></e-column> 

        <e-column field="StartDate"></e-column> 

        <e-column field="Duration"></e-column> 

        <e-column field="Progress"></e-column> 

        <e-column field="State" :filter="filter"></e-column> //bind the custom filter to the column 

      </e-columns> 

 

 

<ejs-gantt 

      id="gantt" 

      ref="gantt" 

      :dataSource="data" 

      :resources="resources" 

      :taskFields="taskFields" 

      :resourceFields="resourceFields" 

      :height="height" 

      :editSettings="editSettings" 

      :allowFiltering="true" 

      :filterSettings="filterOptions" 

    > 

    </ejs-gantt> 

 

 

import Vue from "vue"; 

import { 

  GanttPlugin, 

  Edit, 

  Selection, 

  Filter, 

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

import { DropDownList } from "@syncfusion/ej2-dropdowns"; 

import { createElement } from "@syncfusion/ej2-base";    // Don't forget to import createElement from ej2-base 

import { editingData, resourceCollection } from "./datasource"; 

 

 

filter: { 

        ui: { 

          create: function (args) { 

            let flValInput = createElement("input", { className: "flm-input" }); 

            args.target.appendChild(flValInput); 

            dropInstance = new DropDownList({ 

              dataSource: state, 

              fields: { text: "stateName", value: "stateName" }, 

              placeholder: "Select a value", 

              popupHeight: "200px", 

            }); 

            dropInstance.appendTo(flValInput); 

          }, 

          write: function (args) { 

            dropInstance.value = args.filteredValue; 

          }, 

          read: function (args) { 

            args.fltrObj.filterByColumn( 

              args.column.field, 

              args.operator, 

              dropInstance.value 

            ); 

          }, 

        }, 

      }, 

 

 

Please find the sample we prepared from the below link. 

 

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

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Christian DAquino]

Hi Monisha,

There are two issues with your previous example:

1) In the datasource the states were defined as per their name, and not their IDs;

2) It doesn't consider my previous request about rendering the filter type = 'Excel' instead of Menu

The problem is that once you set the filter type = 'Excel' through the TreeGrid on the load method, the grid seems to ignore the filter template as I've mentioned on my previous message. Here is an example:

https://codesandbox.io/s/vue-template-forked-mrd6p?file=/src/App.vue

[Pooja Priya Krishna Moorthy]

Hi Christian, 

  

Currently we don’t have support for excel filtering. We logged a feature request for this. The status can be tracked from below feedback link. 

https://www.syncfusion.com/feedback/25434/provide-excel-filter-support-in-gantt 

As we have already lined up some major features, we could not include this support immediately.  

We will complete this feature and include it in any of our upcoming releases. Please cast your vote to make it count. We will prioritize the features for every release based on demands. 

Until then we appreciate your patience. 

  

Regards, 

Pooja K.