IgniteUI · tishko0 · Jul 11, 2025 · Jul 17, 2025 · Jul 21, 2025 · Oct 6, 2025
diff --git a/samples/grids/grid/filtering-options.7z b/samples/grids/grid/filtering-options.7z
diff --git a/samples/grids/grid/filtering-remote/.eslintrc.js b/samples/grids/grid/filtering-remote/.eslintrc.js
@@ -0,0 +1,78 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "no-mixed-spaces-and-tabs": 0,
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+	    "no-mixed-spaces-and-tabs": 0,
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
diff --git a/samples/grids/grid/filtering-remote/ReadMe.md b/samples/grids/grid/filtering-remote/ReadMe.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Filtering Options feature using [Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/grids/grid/filtering-options" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/grids/grid/filtering-options?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/grids/grid/filtering-options
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/grids/grid/filtering-remote/package.json b/samples/grids/grid/filtering-remote/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.16.1",
+    "igniteui-react": "19.0.2",
+    "igniteui-react-core": "19.0.0",
+    "igniteui-react-grids": "19.0.2",
+    "igniteui-react-inputs": "19.0.0",
+    "igniteui-react-layouts": "19.0.0",
+    "igniteui-webcomponents": "6.0.0",
+    "lit-html": "^3.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/grids/grid/filtering-remote/public/index.html b/samples/grids/grid/filtering-remote/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/samples/grids/grid/filtering-remote/sandbox.config.json b/samples/grids/grid/filtering-remote/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
diff --git a/samples/grids/grid/filtering-remote/src/RemoteService.ts b/samples/grids/grid/filtering-remote/src/RemoteService.ts
@@ -0,0 +1,188 @@
+const DATA_URL = 'https://services.odata.org/V4/Northwind/Northwind.svc/Products';
+
+export enum FILTER_OPERATION {
+    CONTAINS = 'contains',
+    STARTS_WITH = 'startswith',
+    ENDS_WITH = 'endswith',
+    EQUALS = 'eq',
+    DOES_NOT_EQUAL = 'ne',
+    GREATER_THAN = 'gt',
+    LESS_THAN = 'lt',
+    LESS_THAN_EQUAL = 'le',
+    GREATER_THAN_EQUAL = 'ge'
+}
+
+export enum LOGICAL_OPERATOR {
+    AND = 0,
+    OR = 1
+}
+
+export enum SORT_DIRECTION {
+    ASC = 1,
+    DESC = 2
+}
+
+interface FilterCondition {
+    name: string;
+}
+
+interface FilterOperand {
+    fieldName: string;
+    searchVal: string | number;
+    condition: FilterCondition;
+    filteringOperands?: FilterOperand[];
+    operator?: LOGICAL_OPERATOR;
+}
+
+interface FilteringArgs {
+    filteringOperands: FilterOperand[];
+    operator: LOGICAL_OPERATOR;
+}
+
+interface SortingArgs {
+    fieldName: string;
+    dir: SORT_DIRECTION;
+}
+
+export class RemoteService {
+    public static getData(
+        filteringArgs?: FilteringArgs,
+        sortingArgs?: SortingArgs[]
+    ): Promise<any[]> {
+        const url = this.buildDataUrl(filteringArgs, sortingArgs);
+        return fetch(url)
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then((data) => data.value || []) 
+            .catch((error): any[] => {
+                console.error('Error fetching data:', error);
+                return []; 
+            });
+    }
+
+    private static buildDataUrl(filteringArgs?: FilteringArgs, sortingArgs?: SortingArgs[]): string {
+        const baseQuery = `${DATA_URL}?$count=true&$top=1000`;
+        const parts: string[] = [];
+
+        if (sortingArgs && sortingArgs.length > 0) {
+            const sortExpr = this.buildSortExpression(sortingArgs);
+            if (sortExpr) parts.push(sortExpr);
+        }
+
+        if (filteringArgs?.filteringOperands?.length) {
+            const filterExpr = this.buildFilterExpression(filteringArgs);
+            if (filterExpr) parts.push(filterExpr);
+        }
+
+        return parts.length > 0 ? `${baseQuery}&${parts.join('&')}` : baseQuery;
+    }
+
+    private static buildFilterExpression(filteringArgs: FilteringArgs): string {
+        if (!filteringArgs?.filteringOperands?.length) return '';
+
+        const expression = this.buildAdvancedFilterExpression(
+            filteringArgs.filteringOperands,
+            filteringArgs.operator
+        );
+
+        return expression ? `$filter=${expression}` : '';
+    }
+
+    private static buildAdvancedFilterExpression(operands: FilterOperand[], operator: LOGICAL_OPERATOR): string {
+        const filterParts: string[] = [];
+
+        operands.forEach((operand) => {
+            if (operand.filteringOperands && operand.filteringOperands.length > 0) {
+                const subExpr = this.buildAdvancedFilterExpression(
+                    operand.filteringOperands,
+                    operand.operator || LOGICAL_OPERATOR.AND
+                );
+                if (subExpr) {
+                    filterParts.push(`(${subExpr})`);
+                }
+                return;
+            }
+
+            const { fieldName, searchVal, condition } = operand;
+            if (searchVal === undefined || condition === undefined || !fieldName) return;
+
+            const filterPart = this.buildSingleFilterExpression(fieldName, searchVal, condition.name);
+            if (filterPart) {
+                filterParts.push(filterPart);
+            }
+        });
+
+        const logicalOp = this.getFilteringLogic(operator);
+        return filterParts.join(` ${logicalOp} `);
+    }
+
+    private static buildSingleFilterExpression(fieldName: string, searchVal: string | number, conditionName: string): string {
+        // Input validation
+        if (!fieldName || searchVal === null || searchVal === undefined) {
+            return '';
+        }
+
+        const isNumber = typeof searchVal === 'number';
+        const filterValue = isNumber ? searchVal : `'${String(searchVal).replace(/'/g, "''")}'`;
+
+        switch (conditionName) {
+            case 'contains':
+                return `${FILTER_OPERATION.CONTAINS}(${fieldName}, ${filterValue})`;
+            case 'startsWith':
+                return `${FILTER_OPERATION.STARTS_WITH}(${fieldName}, ${filterValue})`;
+            case 'endsWith':
+                return `${FILTER_OPERATION.ENDS_WITH}(${fieldName}, ${filterValue})`;
+            case 'equals':
+                return `${fieldName} ${FILTER_OPERATION.EQUALS} ${filterValue}`;
+            case 'doesNotEqual':
+                return `${fieldName} ${FILTER_OPERATION.DOES_NOT_EQUAL} ${filterValue}`;
+            case 'greaterThan':
+                return `${fieldName} ${FILTER_OPERATION.GREATER_THAN} ${filterValue}`;
+            case 'greaterThanOrEqualTo':
+                return `${fieldName} ${FILTER_OPERATION.GREATER_THAN_EQUAL} ${filterValue}`;
+            case 'lessThan':
+                return `${fieldName} ${FILTER_OPERATION.LESS_THAN} ${filterValue}`;
+            case 'lessThanOrEqualTo':
+                return `${fieldName} ${FILTER_OPERATION.LESS_THAN_EQUAL} ${filterValue}`;
+            case 'null':
+                return `${fieldName} ${FILTER_OPERATION.EQUALS} null`;
+            case 'notNull':
+                return `${fieldName} ${FILTER_OPERATION.DOES_NOT_EQUAL} null`;
+            case 'empty':
+                return `length(${fieldName}) ${FILTER_OPERATION.EQUALS} 0`;
+            case 'notEmpty':
+                return `length(${fieldName}) ${FILTER_OPERATION.GREATER_THAN} 0`;
+            default:
+                console.warn(`Unknown filter condition: ${conditionName}`);
+                return '';
+        }
+    }
+
+    private static buildSortExpression(sortingArgs: SortingArgs[]): string {
+        if (!sortingArgs || sortingArgs.length === 0) return '';
+
+        const sortStrings = sortingArgs
+            .filter(sort => sort.fieldName) // filter out invalid entries
+            .map(sort => {
+                const dir = sort.dir === SORT_DIRECTION.DESC ? 'desc' : 'asc';
+                return `${sort.fieldName} ${dir}`;
+            });
+
+        return sortStrings.length > 0 ? `$orderby=${sortStrings.join(',')}` : '';
+    }
+
+    private static getFilteringLogic(operator: LOGICAL_OPERATOR): string {
+        switch (operator) {
+            case LOGICAL_OPERATOR.AND:
+                return 'and';
+            case LOGICAL_OPERATOR.OR:
+                return 'or';
+            default:
+                return 'and';
+        }
+    }
+}
diff --git a/samples/grids/grid/filtering-remote/src/index.css b/samples/grids/grid/filtering-remote/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/* shared styles are loaded from: */
		/* https://static.infragistics.com/xplatform/css/samples */