filtering only on certain columns

[William Morgenweck]

Is it possible to have the filter only show up for one or two columns?  I'm looking at 

https://ej2.syncfusion.com/vue/demos/?_ga=2.83058838.1641193944.1561689069-616283409.1556326607#/material/grid/filter-menu.html 

and it seems that it is an all or nothing situation.  I would like the filter to only be active for the customer column.

Thanks

[Hariharan J V]

Hi William, 

Thanks for contacting Syncfusion support. 

From your query we found that your want to disable the filter option for particular Grid columns. You can achieve this requirement by simply provide the allowFiltering property value as false in Grid column level. Please refer the below code snippet, 

<e-column field="CustomerID" headerText="Customer ID" :allowFiltering="false" width="120"></e-column> 

Sample: https://codesandbox.io/s/vue-template-i14i1 

Regards, 

Hariharan 

[Anton Popov]

Hi Hariharan,

Is it/ would it, be possible to only have an excel filter on a specific column? 
Lets say I have a table:

Id---Name---DateOfBirth
1---john---07/04/2000
2---max---08/010/1901
3---jess---21/07/1856

I want check box filtering on the Id and Name columns, but for the DateOfBirth column I want excel so I can do date ranges, is this/would it, be possible to do this?

Thanks in advance!
Best Regards,
Anton

[Aishwarya Rameshbabu]

Hi Anton Popov,

Greetings from Syncfusion support.

Based on the information provided, it appears that you need to render an Excel filter menu for a single column while using a checkbox filter menu for other columns in the Syncfusion Grid. This can be accomplished by utilizing the column.filter.type property of the Grid columns. We have developed a sample that meets your requirements, where the Excel filter menu is rendered for the ‘DateOfBirth’ column and checkbox filter menus are rendered for the ‘Id’ and ‘Name’ columns. Please refer to the code example and sample below.

        <ejs-grid :dataSource="data" :allowFiltering="true" :filterSettings='filterOptions' width='500px'>

        <e-columns>

          <!-- ID and Name Column with CheckBox filter -->

          <e-column field="Id" headerText="Id" textAlign="Right" width="100" ></e-column>

 

          <e-column field="Name" headerText="Name" textAlign="Left" width="150"></e-column>

  

          <!-- DateOfBirth Column with Excel filter -->

          <e-column field="DateOfBirth" headerText="Date of Birth" textAlign="Left" width="150" format="yMd" :filter="excelFilter"></e-column>

        </e-columns>

      </ejs-grid>

 

<script lang="ts">

import { GridComponent, ColumnsDirective, ColumnDirective, Page, Toolbar, Sort, Filter} from "@syncfusion/ej2-vue-grids";

import { categoryData } from "./data-source";

export default {

  components: {

    'ejs-grid': GridComponent,

    'e-column': ColumnDirective,

    'e-columns': ColumnsDirective

  },

  data: () => {

    return {

     data: [

      { Id: 1, Name: 'John', DateOfBirth: new Date('2000-07-04') },

      { Id: 2, Name: 'Max', DateOfBirth: new Date('1901-10-08') },

      { Id: 3, Name: 'Jess', DateOfBirth: new Date('1856-07-21') },

    ],

    excelFilter: { type: 'Excel' }, 

    filterOptions: {

      type: 'CheckBox'

   },

    };

  },

  provide: {

      grid: [Page, Toolbar, Sort, Filter]

  }

}

</script>

 

Sample: Rfrw7u (forked) - StackBlitz

API Reference: column.filter

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R