Vue Data Grid - Semantic Search

This demo incorporates server-side semantic search into the DevExtreme DataGrid. Semantic search finds results based on meaning rather than exact wording, understanding the context and intent behind a question or phrase. This allows your DevExtreme-powered app to deliver more relevant answers by connecting related concepts, even if exact words differ.

To review benefits of this feature, search for dictionary entries and their descriptions and use synonyms or generic descriptions instead of exact search strings (such as "clothing" instead of a specific product name). You can fine-tune search results: use the Similarity Factor editor to change the search precision.

Backend API

<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="before" > <template #default> <div> <div :style="{ display: 'flex', alignItems: 'center' }"> <span :style="{ marginRight: '8px' }">Similarity Factor:</span> <DxNumberBox :value="similarityFactor" :min="0" :max="1" format="0.00" :step="0.05" :show-spin-buttons="true" :input-attr="{ 'aria-label': 'Similarity Factor' }" @value-changed="onSimilarityFactorChanged" /> </div> </div> </template> </DxItem> <DxItem name="searchPanel" /> </DxToolbar> <DxColumn data-field="ID" :width="50" /> <DxColumn data-field="Name"/> <DxColumn data-field="Description"/> </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-vue/common/data'; 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>

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#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.3/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/typescript@6.0.3/lib/typescript.js"></script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/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>

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.