I've already submitted an idea about it last year: http://ideas.infragistics.com/forums/211535-ignite-ui/suggestions/5448684-iggridfiltering-customer-filter-template
I've posted about this on another account before and I am still in need of this support. I need to override the default filtering in the grid. Here's our grid:
CED.Util.Infragistics.igGrid.create({ id: "igGridPackageSearch", allowHiding: false, allowSorting: false, allowFiltering: false, allowPaging: false, primaryKey: "PackageItemId", emptyDataText: "SEARCH FOR AVAILABLE GROUPS", columns: [ { key: "Group", dataType: "string", headerText: "Group", hidden: true }, { key: "GroupId", dataType: "number", hidden: true }, { key: "PackageItemId", dataType: "number", headerText: "", template: "ADD", width: "80px" }, { key: "Quantity", dataType: "number", hidden: true }, { key: "Category", dataType: "string", hidden: true }, { key: "Length", dataType: "number", hidden: true }, { key: "Height", dataType: "number", hidden: true }, { key: "Width", dataType: "number", hidden: true }, { key: "Weight", dataType: "number", hidden: true }, { key: "ItemDescription", dataType: "string", hidden: true }, { key: "ItemCode", dataType: "string", hidden: true }, { key: "Class", dataType: "number", hidden: true }, { key: "RequiresCuft", dataType: "bool", hidden: true }, { key: "RequiresDensity", dataType: "bool", hidden: true }, { key: "Description", dataType: "string", headerText: "Description", template: "<table class='table table-responsive table-condensed'><tr><td colspan='2'>${Description}</td></tr><tr><td colspan='2'>${ItemDescription}</td></tr><tr><td>Class: ${Class}</td><td class='text-right'>${ItemCode}</td></tr></table>"
, width: "562px" }, { key: "Cuft", dataType: "number", hidden: true }, { key: "Density", dataType: "number", hidden: true } ], features: [ { name: "GroupBy", groupByAreaVisibility: "hidden", initialExpand: false, columnSettings: [ { columnKey: "Group", allowGrouping: false, isGroupBy: true }, { columnKey: "PackageItemId", allowGrouping: false, isGroupBy: false }, { columnKey: "Quantity", allowGrouping: false, isGroupBy: false }, { columnKey: "Category", allowGrouping: false, isGroupBy: false }, { columnKey: "Length", allowGrouping: false, isGroupBy: false }, { columnKey: "Height", allowGrouping: false, isGroupBy: false }, { columnKey: "Width", allowGrouping: false, isGroupBy: false }, { columnKey: "Weight", allowGrouping: false, isGroupBy: false }, { columnKey: "ItemDescription", allowGrouping: false, isGroupBy: false }, { columnKey: "ItemCode", allowGrouping: false, isGroupBy: false }, { columnKey: "Class", allowGrouping: false, isGroupBy: false }, { columnKey: "Description", allowGrouping: false, isGroupBy: false }, { columnKey: "RequiresCuft", allowGrouping: false, isGroupBy: false }, { columnKey: "RequiresDensity", allowGrouping: false, isGroupBy: false }, ] }, { name: "Filtering", renderFilterButton: false, columnSettings: [ { columnKey: "PackageItemId", allowFiltering: false }, { columnKey: "Description", allowFiltering: true } ], dataFiltering: function (e, ui) { } } ], dataSource: [] });
The problem I am running into the is the Description template. I need to provide a means to filter this column. Out of the box your tool DOES NOT SUPPORT template filtering. We can argue the semantics of this but returning values of HTML elements in the template is NOT ACCEPTABLE.
When the user types a value in the filter box, I need to intercept that expression and filter on the 'Description', 'ItemDescription', 'Class' and 'ItemCode' values. Today's filtering ignores the template and only goes against the 'Description' value leaving out 3/4's of the requirement.
I COULD $.map all of the values into a single property but then again the filtering on your grid includes non-visible elements such as HTML in the filtering. WHICH IS NOT ACCEPTABLE.
So out of the box won't work. I'll need to use the events and the API to do this. How would you suggest this? I need to hook into the dataFiltering event and cancel it but add my own implementation (I think). I do know I need to remove all records in the $(.selector).data("igGrid").dataSource.filteredData() array and then add my own but how do I bind this back to the grid? Is it a call to the data bind method?
Hello Karthik,
Currently the custom filtering that you require using bound columns could not be achieved out of the box. A backlog item is submitted on our side and it's considered for future implementation. At the meantime I would suggest you to use unbound column that displays information for other columns from the data source using formula function. Filtering by complex unbound column is supported. I'm attaching a sample with similar scenario for your reference. If you have any further questions, please let me know.
Regards,
Tsanna
This does solve filtering on multiple a column with multiple values but it does not solve HTML elements from being filtered.
In your example you have a template with '${FirstName} is ${Age}'. This works perfectly but my template requires a bit of formatting. If we replace this with a real world template we'll have '<div><div>${FirstName}</div><div>is ${Age}</div></div>'. I need to ensure that no HTML is processed in the filter box. I've modified your example to show this.
In the last column, search for the following:
'<div>''d'
All of the results show up because it takes into account the hidden HTML. The sorting feature provides an option for a 'customSortFunction'. We like to have a 'customFilterFunction' or at least some events to hook into the filtering. Or even a filtering template that allows us to pass in the columns we want to evaluate.
Hello Daniel,
It's expected that in the template column filtering will be included also the filtering of the template's html elements if they're passed as filtering conditions. This could be avoided, however with a custom solution on your side. The filtering feature itself does not provide custom filtering function, however there is such function provided with the igDataSource component: http://www.igniteui.com/help/api/2015.1/ig.datasource#options:settings.filtering.customFunc Using this customFunc you may directly filter the dataSource before the grid is bound to it. Otherwise if you want to set custom filter to a certain column during filtering, like in the current case to avoid filtering on html elements, then you may implement your custom logic in for example dataBinding event. If I can provide further assistance, feel free to contact me.
Regards,Tsanna
That's great that there is a custom function on the data source. I never knew that. I'm trying to think how to piece this together but there are too many limitations of why this route is still undesirable. I'd have to account for the following:
- Column data type (The data may look like a number but it is really a string to preserve leading zeros for instance)
- Column template (What if the template consists of more than one column?)
- Column format (Need to know how the data is formatted to filter it correctly)
- Column formatter (Need to execute the formatter function because this is how the client sees the data)
Essentially I'd have to reverse engineer the column options and apply them to the data source before executing the custom filter. Because if I filter the values and they don't match what the client is seeing in the grid, then the results will not filter them in the way that they expect which is a BAD user experience.
If there is a way to hook into all of elements then it may work because there is no need to reinvent the wheel.
Hi Daniel,
Thank you for sharing your thoughts and experience with the community.
If I can provide you with further help, please let me know.