Backend API
<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>
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();
}
const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridSemanticSearch';
@Component({
styleUrls: [`app/app.component.css`],
selector: 'demo-app',
templateUrl: './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 }),
],
});
<!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" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script>
<script src="./bundle.js" type="module"></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.