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

Initiate filter unchecked

Hello, my problem is when I make a list of objects, my filter returns all selected, but I need only one item to be selected when rendering this filter like de eg bellow.

Could you help me with this problem?

I'm using React TypeScript to do these functions.


Attachment: Eg_8142b8a5.zip

2 Replies 1 reply marked as answer

NS Nithya Sivaprakasam Syncfusion Team October 27, 2022 09:05 AM

Hi Breno,


Greetings from Syncfusion Support.


Query: “Initiate filter unchecked”


Based on your query, we analyzed that you want to uncheck all the checkboxes in the filter initially and select only one checkbox. So we suggest you to set the filter predicate object in filterSettings.columns that specify the columns to be filtered at the initial rendering of the Grid.


For your reference, we have prepared a sample based on your requirement that selects only one checkbox value “Alejandra Camino“ of the CustomerName column initially.


Kindly check the below code and sample for reference.


Sample code:


Index.ts

 

public filterOptions: FilterSettingsModel = {

columns: [

  {

        field: 'CustomerName',

        matchCase: false,

        operator: 'equal',

        predicate: 'or',

        value: 'Alejandra Camino', 

      },  }

]

  };

 

<GridComponent dataSource={data} allowFiltering={true} filterSettings={this.filterOptions}

      height={273}>

      <ColumnsDirective>

          <ColumnDirective field='OrderID' width='100' textAlign="Right"/>

          <ColumnDirective field='CustomerID' width='100'/>

          <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>

          <ColumnDirective field='ShipCity' width='100'/>

          <ColumnDirective field='ShipName' width='100'/>

      </ColumnsDirective>

      <Inject services={[Filter]} />

  </GridComponent>



Sample: https://stackblitz.com/edit/react-9t4b5m?file=index.js


Kindly check the below documentation for more information.


Documentation:


https://ej2.syncfusion.com/react/documentation/grid/filtering/filtering/#initial-filter


API:


https://ej2.syncfusion.com/react/documentation/api/grid/filterSettingsModel/#columns

https://ej2.syncfusion.com/react/documentation/api/grid/predicate/


Please get back to us if you need further assistance on this.


Regards,

Nithya Sivaprakasam.


Marked as answer

BL Breno Laustidio Amaral de Oliveira replied to Nithya Sivaprakasam October 28, 2022 08:13 AM

Thank you Nithya Sivaprakasam, your answer help me a lot.


Loader.
Live Chat Icon For mobile
Up arrow icon