DevExpress · flagmanAndrew · Jun 22, 2026 · Jun 23, 2026
@@ -0,0 +1,4 @@
+:host .align-bottom.dx-toolbar-item {
+  vertical-align: bottom;
+}
+
@@ -0,0 +1,31 @@
+<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="after" cssClass="align-bottom">
+      <div *dxTemplate>
+        <dx-number-box
+          label="Similarity Factor"
+          labelMode="floating"
+          [value]="similarityFactor"
+          [min]="0"
+          [max]="1"
+          format="0.00"
+          [step]="0.05"
+          (onValueChanged)="onSimilarityFactorChanged($event)"
+        ></dx-number-box>
+      </div>
+    </dxi-data-grid-item>
+    <dxi-data-grid-item name="searchPanel" cssClass="align-bottom"></dxi-data-grid-item>
+  </dxo-data-grid-toolbar>
+  <dxi-data-grid-column dataField="ID"></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,78 @@
+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/data/data_source';
+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`,
+  styleUrls: [`.${modulePrefix}/app.component.css`],
+  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,80 @@
+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/data/data_source';
+import { createStore } from 'devextreme-aspnet-data-nojquery';
+
+const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridSemanticSearch';
+
+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();
+    }
+  }, []);
+
+  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="after" cssClass="align-bottom">
+          <NumberBox
+            label="Similarity Factor"
+            labelMode="floating"
+            defaultValue={similarityFactorRef.current}
+            min={0}
+            max={1}
+            format="0.00"
+            step={0.05}
+            onValueChanged={onSimilarityFactorChanged}
+          />
+        </Item>
+        <Item name="searchPanel" cssClass="align-bottom" />
+      </Toolbar>
+      <Column dataField="ID" key="ID" />
+      <Column dataField="Name" key="Name" />
+      <Column dataField="Description" key="Description" />
+    </DataGrid>
+  );
+};
+
+export default App;
@@ -0,0 +1,24 @@
+<!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" />
+    <link rel="stylesheet" type="text/css" href="styles.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,3 @@
+.align-bottom.dx-toolbar-item {
+  vertical-align: bottom;
+}
@@ -0,0 +1,99 @@
+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/data/data_source';
+import { createStore } from 'devextreme-aspnet-data-nojquery';
+
+const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridSemanticSearch';
+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();
+    }
+  }, []);
+  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="after"
+          cssClass="align-bottom"
+        >
+          <NumberBox
+            label="Similarity Factor"
+            labelMode="floating"
+            defaultValue={similarityFactorRef.current}
+            min={0}
+            max={1}
+            format="0.00"
+            step={0.05}
+            onValueChanged={onSimilarityFactorChanged}
+          />
+        </Item>
+        <Item
+          name="searchPanel"
+          cssClass="align-bottom"
+        />
+      </Toolbar>
+      <Column
+        dataField="ID"
+        key="ID"
+      />
+      <Column
+        dataField="Name"
+        key="Name"
+      />
+      <Column
+        dataField="Description"
+        key="Description"
+      />
+    </DataGrid>
+  );
+};
+export default App;