Backend API
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;
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;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
<!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="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
<script src="bundles/vendor/react.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
using System;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.Linq;
using System.Numerics.Tensors;
using System.Threading.Tasks;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
namespace DevExtreme.MVC.Demos.DataProviders {
public class SmartFilterProvider {
readonly IEmbeddingGenerator<string, Embedding<float>> Embedder;
readonly static ConcurrentDictionary<string, Embedding<float>> cache = new ConcurrentDictionary<string, Embedding<float>>(StringComparer.OrdinalIgnoreCase);
public SmartFilterProvider(AzureOpenAIClient openAIClient) {
Embedder = openAIClient.GetEmbeddingClient("text-embedding-3-small").AsIEmbeddingGenerator();
}
public async Task FillCacheAsync(IEnumerable<string> words) {
try {
var nonCachedWords = words.Where(x => !cache.ContainsKey(x)).ToArray();
if(!nonCachedWords.Any())
return;
var embeddings = await Embedder.GenerateAsync(nonCachedWords);
foreach(var (word, embedding) in nonCachedWords.Zip(embeddings, (word, embedding) => (word, embedding))) {
cache[word] = embedding;
}
} catch {
}
}
public float GetSimilarity(string text, string searchText) {
var eFilter = cache[text];
var eText = cache[searchText];
var cosineSimilarity = TensorPrimitives.CosineSimilarity(eText.Vector.Span, eFilter.Vector.Span);
return cosineSimilarity;
}
}
}
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.DataProviders;
using DevExtreme.MVC.Demos.Models.DataGrid;
using DevExtreme.MVC.Demos.Models.SampleData;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web.Http;
namespace DevExtreme.MVC.Demos.Controllers.ApiControllers {
public class DataGridSemanticSearchController : ApiController {
SmartFilterProvider smartFilter;
public DataGridSemanticSearchController(SmartFilterProvider smartFilterProvider) {
smartFilter = smartFilterProvider;
}
[HttpGet]
public async Task<object> Get(string searchValue, float similarityFactor, DataSourceLoadOptions loadOptions) {
if(string.IsNullOrEmpty(searchValue)) {
return DataSourceLoader.Load(SampleData.DictionaryItems, loadOptions);
}
await smartFilter.FillCacheAsync(new[] { searchValue });
var result = Search(searchValue, similarityFactor);
return DataSourceLoader.Load(result, loadOptions);
}
IEnumerable<DictionaryItem> Search(string searchValue, float similarityFactor = 0.31f) {
return SampleData.DictionaryItems
.Select(item => new {
Entry = item,
Similarity = smartFilter.GetSimilarity(DictionaryItem.GetItemDescription(item), searchValue)
})
.OrderByDescending(x => x.Similarity)
.Where(x => x.Similarity > similarityFactor)
.Select(x => x.Entry);
}
}
}
using DevExtreme.MVC.Demos.DataProviders;
using DevExtreme.MVC.Demos.Models.DataGrid;
using DevExtreme.MVC.Demos.Models.SampleData;
using Microsoft.Extensions.Hosting;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
namespace DevExtreme.MVC.Demos.Services {
public class EmbeddingsInitializerService : IHostedService {
readonly SmartFilterProvider smartFilter;
public EmbeddingsInitializerService(SmartFilterProvider smartFilterProvider) {
smartFilter = smartFilterProvider;
}
public Task StartAsync(CancellationToken cancellationToken) {
return smartFilter.FillCacheAsync(SampleData.DictionaryItems.Select(DictionaryItem.GetItemDescription));
}
public Task StopAsync(CancellationToken cancellationToken) => Task.CompletedTask;
}
}
namespace DevExtreme.MVC.Demos.Models.DataGrid {
public class DictionaryItem {
public DictionaryItem(int id, string name, string description) {
ID = id;
Name = name;
Description = description;
}
public int ID { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public static string GetItemDescription(DictionaryItem item) {
return $"{item.Name} - {item.Description}";
}
}
}
AI services used for this demo have been rate and data limited. As such, you may experience performance-related delays when exploring the capabilities of the DataGrid AI Assistant.
When connected to your own AI model/service without rate and data limits, semantic search will perform seamlessly, without artificial delays. Note that DevExtreme does not offer an AI REST API and does not ship any built-in LLMs/SLMs.
This demo configures semantic filtering on the server (using AzureOpenAI embeddings). You can incorporate server-side semantic search using built-in DataGrid visual elements. In this demo, each request returns filtered data using two parameters:
- A search value (entered in the built-in search panel)
- A similarity factor (can be modified via a custom toolbar item)
After you enter a query in the search panel, the DevExtreme DataGrid passes the new search value to the backend and loads the filtered data set.