diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.css
new file mode 100644
index 000000000000..4a7b8ff8058c
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.css
@@ -0,0 +1,4 @@
+:host .align-bottom.dx-toolbar-item {
+  vertical-align: bottom;
+}
+
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.html
new file mode 100644
index 000000000000..4ec9bfddc3e3
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.html
@@ -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>
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.ts b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.ts
new file mode 100644
index 000000000000..8c83cad4c5e2
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/app/app.component.ts
@@ -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 }),
+  ],
+});
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/Angular/index.html b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/index.html
new file mode 100644
index 000000000000..1ab1fb54a1df
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/Angular/index.html
@@ -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>
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/React/App.tsx b/apps/demos/Demos/DataGrid/SemanticSearch/React/App.tsx
new file mode 100644
index 000000000000..88816005df69
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/React/App.tsx
@@ -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;
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/React/index.html b/apps/demos/Demos/DataGrid/SemanticSearch/React/index.html
new file mode 100644
index 000000000000..ee451f8288ff
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/React/index.html
@@ -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>
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/React/index.tsx b/apps/demos/Demos/DataGrid/SemanticSearch/React/index.tsx
new file mode 100644
index 000000000000..8acbec4b6179
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/React/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App.tsx';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app'),
+);
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/React/styles.css b/apps/demos/Demos/DataGrid/SemanticSearch/React/styles.css
new file mode 100644
index 000000000000..49409f518a7b
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/React/styles.css
@@ -0,0 +1,3 @@
+.align-bottom.dx-toolbar-item {
+  vertical-align: bottom;
+}
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/App.js b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/App.js
new file mode 100644
index 000000000000..3784c7084244
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/App.js
@@ -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;
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.html b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.html
new file mode 100644
index 000000000000..db31b0fd60c6
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.html
@@ -0,0 +1,44 @@
+<!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.js");
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="app"></div>
+    </div>
+  </body>
+</html>
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.js b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.js
new file mode 100644
index 000000000000..b853e0be8242
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App.js';
+
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/styles.css b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/styles.css
new file mode 100644
index 000000000000..49409f518a7b
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/ReactJs/styles.css
@@ -0,0 +1,3 @@
+.align-bottom.dx-toolbar-item {
+  vertical-align: bottom;
+}
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/Vue/App.vue b/apps/demos/Demos/DataGrid/SemanticSearch/Vue/App.vue
new file mode 100644
index 000000000000..64fd7e83915b
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/Vue/App.vue
@@ -0,0 +1,98 @@
+<template>
+  <DxDataGrid
+    :data-source="dataSource"
+    :show-borders="true"
+    :remote-operations="true"
+    :height="600"
+    @editor-preparing="onEditorPreparing"
+  >
+    <DxScrolling mode="virtual"/>
+    <DxSearchPanel :visible="true"/>
+    <DxToolbar>
+      <DxItem
+        location="after"
+        css-class="align-bottom"
+        template="similarityFactorTemplate"
+      />
+      <DxItem
+        name="searchPanel"
+        css-class="align-bottom"
+      />
+    </DxToolbar>
+    <DxColumn data-field="ID"/>
+    <DxColumn data-field="Name"/>
+    <DxColumn data-field="Description"/>
+    <template #similarityFactorTemplate>
+      <DxNumberBox
+        label="Similarity Factor"
+        label-mode="floating"
+        :value="similarityFactor"
+        :min="0"
+        :max="1"
+        format="0.00"
+        :step="0.05"
+        @value-changed="onSimilarityFactorChanged"
+      />
+    </template>
+  </DxDataGrid>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  DxDataGrid,
+  DxColumn,
+  DxScrolling,
+  DxSearchPanel,
+  DxToolbar,
+  DxItem,
+  type DxDataGridTypes,
+} from 'devextreme-vue/data-grid';
+import DxNumberBox, { type DxNumberBoxTypes } from 'devextreme-vue/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 searchValue = ref('');
+const similarityFactor = ref(0.31);
+
+const dataSource = new DataSource({
+  store: createStore({
+    key: 'ID',
+    loadUrl: `${url}/Get`,
+    loadParams: {
+      searchValue: () => searchValue.value,
+      similarityFactor: () => similarityFactor.value,
+    },
+    onBeforeSend(method, ajaxOptions) {
+      ajaxOptions.xhrFields = { withCredentials: true };
+    },
+  })
+});
+
+const onSimilarityFactorChanged = (e: DxNumberBoxTypes.ValueChangedEvent) => {
+  similarityFactor.value = e.value;
+  if (searchValue.value !== '') {
+    dataSource.reload();
+  }
+};
+
+const onEditorPreparing = (e: DxDataGridTypes.EditorPreparingEvent) => {
+  if (e.parentType === 'searchPanel') {
+    let searchTimeout: ReturnType<typeof setTimeout> | undefined;
+    e.editorOptions.onValueChanged = (args: { value: string }) => {
+      clearTimeout(searchTimeout);
+      searchTimeout = setTimeout(() => {
+        searchValue.value = args.value;
+        e.component.getDataSource().reload();
+      }, e.updateValueTimeout);
+    };
+    e.editorOptions.placeholder = 'Try: clothing';
+  }
+};
+</script>
+<style scoped>
+.align-bottom.dx-toolbar-item {
+  vertical-align: bottom;
+}
+</style>
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.html b/apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.html
new file mode 100644
index 000000000000..b21c5e373a7a
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.html
@@ -0,0 +1,29 @@
+<!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 type="module">
+      import * as vueCompilerSFC from "../../../../node_modules/@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js";
+
+      window.vueCompilerSFC = vueCompilerSFC;
+    </script>
+    <script src="../../../../node_modules/typescript/lib/typescript.js"></script>
+    <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.ts");
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="app" />
+    </div>
+  </body>
+</html>
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.ts b/apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.ts
new file mode 100644
index 000000000000..684d04215d72
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/Vue/index.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.html b/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.html
new file mode 100644
index 000000000000..5bfc9fb29a7c
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.html
@@ -0,0 +1,20 @@
+<!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" />
+    <script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
+    <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/devextreme-dist/js/dx.all.js"></script>
+    <script src="../../../../node_modules/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>
+    <script src="index.js"></script>
+  </head>
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="gridContainer"></div>
+    </div>
+  </body>
+</html>
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.js b/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.js
new file mode 100644
index 000000000000..2dd62a5bcb18
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/index.js
@@ -0,0 +1,74 @@
+$(() => {
+  const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridSemanticSearch';
+
+  let searchValue = '';
+  let similarityFactor = 0.31;
+
+  const dataGrid = $('#gridContainer').dxDataGrid({
+    dataSource: DevExpress.data.AspNet.createStore({
+      key: 'ID',
+      loadUrl: `${url}/Get`,
+      loadParams: {
+        searchValue: () => searchValue,
+        similarityFactor: () => similarityFactor,
+      },
+      onBeforeSend(method, ajaxOptions) {
+        ajaxOptions.xhrFields = { withCredentials: true };
+      },
+    }),
+    showBorders: true,
+    remoteOperations: true,
+    height: 600,
+    columns: ['ID', 'Name', 'Description'],
+    scrolling: {
+      mode: 'virtual',
+    },
+    searchPanel: {
+      visible: true,
+    },
+    toolbar: {
+      items: [
+        {
+          location: 'after',
+          cssClass: 'align-bottom',
+          template: function (data, container) {
+            $('<div>')
+              .appendTo(container)
+              .dxNumberBox({
+                label: 'Similarity Factor',
+                labelMode: 'floating',
+                value: similarityFactor,
+                min: 0,
+                max: 1,
+                format: '0.00',
+                step: 0.05,
+                onValueChanged(e) {
+                  similarityFactor = e.value;
+                  if (searchValue !== '') {
+                    dataGrid.getDataSource().reload();
+                  }
+                },
+              });
+          }
+        },
+        {
+          name: 'searchPanel',
+          cssClass: 'align-bottom',
+        },
+      ],
+    },
+    onEditorPreparing(e) {
+      if (e.parentType === 'searchPanel') {
+        let searchTimeout;
+        e.editorOptions.onValueChanged = (args) => {
+          clearTimeout(searchTimeout);
+          searchTimeout = setTimeout(() => {
+            searchValue = args.value;
+            e.component.getDataSource().reload();
+          }, e.updateValueTimeout);
+        };
+        e.editorOptions.placeholder = 'Try: clothing';
+      }
+    },
+  }).dxDataGrid('instance');
+});
diff --git a/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/styles.css b/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/styles.css
new file mode 100644
index 000000000000..49409f518a7b
--- /dev/null
+++ b/apps/demos/Demos/DataGrid/SemanticSearch/jQuery/styles.css
@@ -0,0 +1,3 @@
+.align-bottom.dx-toolbar-item {
+  vertical-align: bottom;
+}
diff --git a/apps/demos/menuMeta.json b/apps/demos/menuMeta.json
index bb9175e74ef8..ccc66e33ea50 100644
--- a/apps/demos/menuMeta.json
+++ b/apps/demos/menuMeta.json
@@ -38,6 +38,29 @@
                 "Modules": "openai"
               }
             ]
+          },
+          {
+            "Name": "Semantic Search",
+            "Equivalents": "",
+            "Demos": [
+              {
+                "Title": "Semantic Search",
+                "Name": "SemanticSearch",
+                "Widget": "DataGrid",
+                "Badge": "AI",
+                "DemoType": "Web",
+                "Modules": "devextreme-aspnet-data-nojquery",
+                "MvcAdditionalFiles": [
+                  "/DataProviders/SmartFilterProvider.cs",
+                  "/Controllers/ApiControllers/DataGridSemanticSearchController.cs",
+                  "/Services/EmbeddingsInitializerService.cs",
+                  "/Models/DataGrid/DictionaryItem.cs",
+                  "/Models/SampleData/DictionaryItems.cs"
+                ],
+                "TopLevel": true,
+                "Equivalents": "AI-Powered Search, Smart Search, Context-Aware Search, Natural Language Search, AI Search, Semantic Retrieval, Similarity Search"
+              }
+            ]
           }
         ]
       },
@@ -315,6 +338,22 @@
                   "/Models/SampleData/DataGridEmployees.cs"
                 ],
                 "DemoType": "Web"
+              },
+              {
+                "Title": "Semantic Search",
+                "Name": "SemanticSearch",
+                "Widget": "DataGrid",
+                "Badge": "AI",
+                "DemoType": "Web",
+                "Modules": "devextreme-aspnet-data-nojquery",
+                "MvcAdditionalFiles": [
+                  "/DataProviders/SmartFilterProvider.cs",
+                  "/Controllers/ApiControllers/DataGridSemanticSearchController.cs",
+                  "/Services/EmbeddingsInitializerService.cs",
+                  "/Models/DataGrid/DictionaryItem.cs",
+                  "/Models/SampleData/DictionaryItems.cs"
+                ],
+                "Equivalents": "AI-Powered Search, Smart Search, Context-Aware Search, Natural Language Search, AI Search, Semantic Retrieval, Similarity Search"
               }
             ]
           },