Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1075
Custom igGrid Filtering
posted

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?