BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
I would like to have something like this.
I would like to have a simple checkbox in the filter, that will show 'true' values when checked and 'false' values when un-checked.
I tried something like this, but it doesn't filter:
Thankyou!
Hi Iana,
Greetings from Syncfusion support
From your query we suspect that you are rendering checkbox in the filterbar template and like to filter the true/false value. When the filterbar template is checked you like to filter the true values and when it is unchecked you like to filter the false values. So please confirm on what case you like to reset the filter (clear filter for the respective column). Please share your use case scenario with detailed description.
If we misunderstood anything wrongly, please share your requirement with detailed description.
Regards,
Rajapandi R
Thank you for the reply.
I apologize, I think it makes sense to change the requirement a bit. I would like to see 'true' when it's checked, and everything, when un-checked.
Here is the case scenario:
Hi Iana,
Greetings from Syncfusion support
Based on your requirement we have prepared a sample and achieved your requirement by using Filterbar template feature of Grid. Please refer the below code example and sample for more information.
App.component.html
<ejs-grid #grid id="Grid" [dataSource]='data' allowPaging='true' allowFiltering='true' [pageSettings]="pageOptions"> <e-columns> <e-column field='CategoryName' headerText='Category Name' width='150'></e-column> <e-column field='UnitsInStock' headerText='Units In Stock' width='150' textAlign='Right'></e-column> <e-column field='Discontinued' headerText='Discontinued' width='150' textAlign='Center' [filterBarTemplate]='filterBarTemplate' type='boolean'></e-column> </e-columns> </ejs-grid>
App.component.ts
export class AppComponent { public filterBarTemplate: any;
@ViewChild('grid') public grid: GridComponent; constructor( ) {
}
public ngOnInit(): void { this.filterBarTemplate = { create: (args: { element: any, column: any }) => { let input: any = document.createElement('input'); input.id = 'ProductName'; return input; }, write: (args: { element: any, column: any }) => { let inputobj: CheckBox = new CheckBox({ change: function(args) { var grid = (document.getElementById('Grid') as any).ej2_instances[0]; if (args.checked) { grid.filterByColumn('Discontinued', 'equal', args.checked); //filter the column with true value } else { grid.removeFilteredColsByField('Discontinued'); //remove the filtering when the checkbox is unchecked } } }); inputobj.appendTo('#ProductName'); }, } }
}
|
Sample: https://stackblitz.com/edit/angular-yeto7g-jrke4v?file=app.component.ts,app.component.html
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/filtering/filter-bar/#filter-bar-template-with-custom-component
Screenshot:
Regards,
Rajapandi R
Thank you for the reply. We had to make a slight style change, otherwise, checkbox would move on click. But the main logic worked. Appreciate the help!
Iana,
We are happy to hear that our provided solution was helpful to achieve your requirement at your end.
Please get back to us if you need further assistance.