DevExpress · markallenramirez · Jul 20, 2026 · Jul 13, 2026 · Jul 16, 2026
@@ -0,0 +1,34 @@
+<dx-data-grid
+  id="gridContainer"
+  [dataSource]="dataSource"
+  [showBorders]="true"
+  [remoteOperations]="true"
+  [height]="600"
+  (onEditorPreparing)="onEditorPreparing($event)"
+>
+  <dxo-data-grid-scrolling mode="virtual"></dxo-data-grid-scrolling>
+  <dxo-data-grid-search-panel [visible]="true"></dxo-data-grid-search-panel>
+  <dxo-data-grid-toolbar>
+    <dxi-data-grid-item location="before">
+      <div *dxTemplate>
+        <div [style]="{ display: 'flex', alignItems: 'center' }">
+          <span [style]="{ marginRight: '8px' }">Similarity Factor:</span>
+          <dx-number-box
+            [value]="similarityFactor"
+            [min]="0"
+            [max]="1"
+            format="0.00"
+            [step]="0.05"
+            [showSpinButtons]="true"
+            [inputAttr]="{ 'aria-label': 'Similarity Factor' }"
+            (onValueChanged)="onSimilarityFactorChanged($event)"
+          ></dx-number-box>
+        </div>
+      </div>
+    </dxi-data-grid-item>
+    <dxi-data-grid-item name="searchPanel"></dxi-data-grid-item>
+  </dxo-data-grid-toolbar>
+  <dxi-data-grid-column dataField="ID" [width]="50"></dxi-data-grid-column>
+  <dxi-data-grid-column dataField="Name"></dxi-data-grid-column>
+  <dxi-data-grid-column dataField="Description"></dxi-data-grid-column>
+</dx-data-grid>
@@ -0,0 +1,77 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { DxDataGridModule, type DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import { DxNumberBoxModule, type DxNumberBoxTypes } from 'devextreme-angular/ui/number-box';
+import { DataSource } from 'devextreme-angular/common/data';
+import * as AspNetData from 'devextreme-aspnet-data-nojquery';
+
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+
+let modulePrefix = '';
+// @ts-ignore
+if (window && window.config?.packageConfigPaths) {
+  modulePrefix = '/app';
+}
+
+const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridSemanticSearch';
+
+@Component({
+  selector: 'demo-app',
+  templateUrl: `.${modulePrefix}/app.component.html`,
+  imports: [
+    DxDataGridModule,
+    DxNumberBoxModule,
+  ],
+})
+export class AppComponent {
+  searchValue = '';
+
+  similarityFactor = 0.31;
+
+  dataSource: DataSource;
+
+  constructor() {
+    this.dataSource = new DataSource({
+      store: AspNetData.createStore({
+        key: 'ID',
+        loadUrl: `${url}/Get`,
+        loadParams: {
+          searchValue: () => this.searchValue,
+          similarityFactor: () => this.similarityFactor,
+        },
+        onBeforeSend: (method, ajaxOptions) => {
+          ajaxOptions.xhrFields = { withCredentials: true };
+        },
+      }),
+    });
+  }
+
+  onSimilarityFactorChanged(e: DxNumberBoxTypes.ValueChangedEvent): void {
+    this.similarityFactor = e.value;
+    if (this.searchValue !== '') {
+      this.dataSource.reload();
+    }
+  }
+
+  onEditorPreparing(e: DxDataGridTypes.EditorPreparingEvent): void {
+    if (e.parentType === 'searchPanel') {
+      let searchTimeout: ReturnType<typeof setTimeout> | undefined;
+      e.editorOptions.onValueChanged = (args: { value: string }) => {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+          this.searchValue = args.value;
+          this.dataSource.reload();
+        }, e.updateValueTimeout);
+      };
+      e.editorOptions.placeholder = 'Try: clothing';
+    }
+  }
+}
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
+  ],
+});
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+    <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
+
+    <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
+    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
+    <script src="../../../../node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="../../../../node_modules/systemjs/dist/system.js"></script>
+
+    <script src="config.js"></script>
+    <script>
+      System.import("app").catch(console.error.bind(console));
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <demo-app>Loading...</demo-app>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,84 @@
+import React, { useCallback, useRef, useMemo } from 'react';
+import DataGrid, { Column, Scrolling, SearchPanel, Toolbar, Item, type DataGridTypes } from 'devextreme-react/data-grid';
+import NumberBox, { type NumberBoxTypes } from 'devextreme-react/number-box';
+import { DataSource } from 'devextreme-react/common/data';
+import { createStore } from 'devextreme-aspnet-data-nojquery';
+
+const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridSemanticSearch';
+const numberBoxAttr = { 'aria-label': 'Similarity Factor' };
+
+const App = () => {
+  const searchValueRef = useRef<string>('');
+  const similarityFactorRef = useRef<number>(0.31);
+
+  const dataSource = useMemo<DataSource>(() => new DataSource({
+    store: createStore({
+      key: 'ID',
+      loadUrl: `${url}/Get`,
+      loadParams: {
+        searchValue: () => searchValueRef.current,
+        similarityFactor: () => similarityFactorRef.current,
+      },
+      onBeforeSend(method, ajaxOptions) {
+        ajaxOptions.xhrFields = { withCredentials: true };
+      },
+    }),
+  }), []);
+
+  const onSimilarityFactorChanged = useCallback(({ value }: NumberBoxTypes.ValueChangedEvent) => {
+    similarityFactorRef.current = value;
+    if (searchValueRef.current !== '') {
+      dataSource.reload();
+    }
+  }, [dataSource]);
+
+  const onEditorPreparing = useCallback((e: DataGridTypes.EditorPreparingEvent) => {
+    if (e.parentType === 'searchPanel') {
+      let searchTimeout: ReturnType<typeof setTimeout> | undefined;
+      e.editorOptions.onValueChanged = (args: { value: string }) => {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+          searchValueRef.current = args.value;
+          e.component.getDataSource().reload();
+        }, e.updateValueTimeout);
+      };
+      e.editorOptions.placeholder = 'Try: clothing';
+    }
+  }, []);
+
+  return (
+    <DataGrid
+      dataSource={dataSource}
+      showBorders={true}
+      remoteOperations={true}
+      height={600}
+      onEditorPreparing={onEditorPreparing}
+    >
+      <Scrolling mode="virtual" />
+      <SearchPanel visible={true} />
+      <Toolbar>
+        <Item location="before">
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <span style={{ marginRight: '8px' }}>Similarity Factor:</span>
+            <NumberBox
+              defaultValue={similarityFactorRef.current}
+              min={0}
+              max={1}
+              format="0.00"
+              step={0.05}
+              showSpinButtons={true}
+              inputAttr={numberBoxAttr}
+              onValueChanged={onSimilarityFactorChanged}
+            />
+          </div>
+        </Item>
+        <Item name="searchPanel" />
+      </Toolbar>
+      <Column dataField="ID" key="ID" width={50} />
+      <Column dataField="Name" key="Name" />
+      <Column dataField="Description" key="Description" />
+    </DataGrid>
+  );
+};
+
+export default App;
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+    <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
+
+    <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
+    <script src="../../../../node_modules/systemjs/dist/system.js"></script>
+    <script type="text/javascript" src="config.js"></script>
+    <script type="text/javascript">
+      System.import("./index.tsx");
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="app"></div>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App.tsx';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app'),
+);
@@ -0,0 +1,101 @@
+import React, { useCallback, useRef, useMemo } from 'react';
+import DataGrid, {
+  Column,
+  Scrolling,
+  SearchPanel,
+  Toolbar,
+  Item,
+} from 'devextreme-react/data-grid';
+import NumberBox from 'devextreme-react/number-box';
+import { DataSource } from 'devextreme-react/common/data';
+import { createStore } from 'devextreme-aspnet-data-nojquery';
+
+const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridSemanticSearch';
+const numberBoxAttr = { 'aria-label': 'Similarity Factor' };
+const App = () => {
+  const searchValueRef = useRef('');
+  const similarityFactorRef = useRef(0.31);
+  const dataSource = useMemo(
+    () =>
+      new DataSource({
+        store: createStore({
+          key: 'ID',
+          loadUrl: `${url}/Get`,
+          loadParams: {
+            searchValue: () => searchValueRef.current,
+            similarityFactor: () => similarityFactorRef.current,
+          },
+          onBeforeSend(method, ajaxOptions) {
+            ajaxOptions.xhrFields = { withCredentials: true };
+          },
+        }),
+      }),
+    [],
+  );
+  const onSimilarityFactorChanged = useCallback(
+    ({ value }) => {
+      similarityFactorRef.current = value;
+      if (searchValueRef.current !== '') {
+        dataSource.reload();
+      }
+    },
+    [dataSource],
+  );
+  const onEditorPreparing = useCallback((e) => {
+    if (e.parentType === 'searchPanel') {
+      let searchTimeout;
+      e.editorOptions.onValueChanged = (args) => {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+          searchValueRef.current = args.value;
+          e.component.getDataSource().reload();
+        }, e.updateValueTimeout);
+      };
+      e.editorOptions.placeholder = 'Try: clothing';
+    }
+  }, []);
+  return (
+    <DataGrid
+      dataSource={dataSource}
+      showBorders={true}
+      remoteOperations={true}
+      height={600}
+      onEditorPreparing={onEditorPreparing}
+    >
+      <Scrolling mode="virtual" />
+      <SearchPanel visible={true} />
+      <Toolbar>
+        <Item location="before">
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <span style={{ marginRight: '8px' }}>Similarity Factor:</span>
+            <NumberBox
+              defaultValue={similarityFactorRef.current}
+              min={0}
+              max={1}
+              format="0.00"
+              step={0.05}
+              showSpinButtons={true}
+              inputAttr={numberBoxAttr}
+              onValueChanged={onSimilarityFactorChanged}
+            />
+          </div>
+        </Item>
+        <Item name="searchPanel" />
+      </Toolbar>
+      <Column
+        dataField="ID"
+        key="ID"
+        width={50}
+      />
+      <Column
+        dataField="Name"
+        key="Name"
+      />
+      <Column
+        dataField="Description"
+        key="Description"
+      />
+    </DataGrid>
+  );
+};
+export default App;