Angular Data Grid Semantic Search

Updated on Feb 6, 2026

The Semantic Search mode of the AI Smart Box interprets user intent and matches related terms, synonyms, and contextual meanings rather than exact keywords. When users enter a search term, your implementation uses semantic matching techniques to return filter criteria that capture semantically related content.

For example, try searching for "workout essentials" in the demo below to look for records like "resistance bands set", "fitness guide", or "multivitamin tablets", even though none of these records contain the exact query. This intelligent matching is particularly valuable when users might not know the exact terminology used in your data.

The demo in this article uses a third-party service to implement semantic search for demonstration purposes. For production applications, evaluate and select semantic matching techniques that best suit your specific data characteristics and accuracy requirements.

The following example demonstrates Semantic Search mode in action:

Change Theme

Theme

Loading ...

Semantic Search Implementation

The Semantic Search mode requires an implementation that analyzes query meaning and returns semantically relevant results. Unlike traditional keyword matching that looks for exact text, your semantic search implementation must analyze the intent behind user queries and recognize when different words express the same concept.

Generally, such capabilities rely on machine learning models that understand language patterns and conceptual relationships through natural language processing (NLP) techniques.

The typical workflow is:

1. User enters a search query in natural language.
2. The semanticSearch event of the AI Smart Box fires with the query text.
3. You process the query using your chosen semantic matching technique.
4. Your implementation returns filter criteria based on semantic matching.
5. You apply the filters to the Grid data.

The demo above uses a third-party transformer model to generate vector embeddings that understand semantic relationships in the data. Other approaches include large language models (LLMs), entity recognition, synonym expansion, or hybrid methods that combine multiple techniques.

To implement Semantic Search in the AI Smart Box tool:

1. Add the <kendo-grid-smartbox-tool> component to your Grid toolbar with Semantic Search mode enabled:

   html

   <kendo-grid [kendoGridBinding]="customers">
       <kendo-toolbar>
           <kendo-grid-smartbox-tool [semanticSearchMode]="semanticSearchSettings">
           </kendo-grid-smartbox-tool>
       </kendo-toolbar>
   </kendo-grid>

2. Configure additional Semantic Search mode settings in your component if needed:

   typescript

   public semanticSearchSettings: GridSmartBoxSemanticSearchSettings = {
       enabled: true,
       placeholder: 'Describe what you need...',
       delay: 600,
       history: {
           size: 5,
           timestampFormat: 'h:mm a'
       }
   };

3. Handle the semanticSearch event to implement your semantic search logic:

   HTML

   <kendo-grid [kendoGridBinding]="customers">
       <kendo-toolbar>
           <kendo-grid-smartbox-tool 
               [semanticSearchMode]="semanticSearchSettings"
               (semanticSearch)="onSemanticSearch($event)">
           </kendo-grid-smartbox-tool>
       </kendo-toolbar>
   </kendo-grid>

   TypeScript

   public async onSemanticSearch(event: GridSmartBoxSemanticSearchEvent): Promise<void> {
       const query = event.searchValue;
       
       // Generate embedding for the search query
       const queryEmbedding = await this.semanticService.embed(query);
       
       // Compare query embedding with pre-computed Grid data embeddings
       const results = this.embeddedData
           .map(item => ({
               ...item,
               similarity: this.semanticService.cosineSimilarity(queryEmbedding, item.embedding)
           }))
           .filter(x => x.similarity > 0.35)  // Apply similarity threshold
           .sort((a, b) => b.similarity - a.similarity);
       
       // Update Grid data with semantically similar results
       this.gridData = results;
   }

4. Create a separate service to encapsulate the semantic matching mechanism. In the demo, the SemanticSearchService loads the transformer model, converts text into vector embeddings, and provides the cosine similarity calculation to compare vectors.

Configuration Options

The Semantic Search mode provides the following configuration options to customize its behavior through the GridSmartBoxSemanticSearchSettings object:

• Typing Delay—Set the debounce time before triggering the search.
• Placeholder Text—Provide guidance text in the search input field.
• Query History—Enable users to access and reuse previous search queries.

Typing Delay

You can use the delay property to control how long the AI Smart Box waits after the user stops typing before triggering the search. Since the semantic search logic may take time to process, consider using a longer delay to avoid triggering too many searches as users type. The default value is 700 milliseconds.

typescript

public semanticSearchSettings: GridSmartBoxSemanticSearchSettings = {
    enabled: true,
    delay: 800  // Wait 800ms after user stops typing
};

Placeholder Text

The placeholder property allows you to customize the placeholder text that appears in the AI Smart Box when Semantic Search mode is active. The placeholder text should communicate that this mode understands natural language and concepts, not just exact keywords.

typescript

public semanticSearchSettings: GridSmartBoxSemanticSearchSettings = {
    enabled: true,
    placeholder: 'Describe what you need...'
};

Query History

The history property configures query history specifically for Semantic Search mode, allowing users to access and reuse previous searches. The default history size is 5 queries, and the default timestamp format is 'HH:mm:ss'.

typescript

public semanticSearchSettings: GridSmartBoxSemanticSearchSettings = {
    enabled: true,
    history: {
        size: 5,  // Keep last 5 searches
        timestampFormat: 'h:mm a'  // Show time in 12-hour format
    }
};

Suggested Links

• AI Smart Box
• Angular Data Grid Searching
• AI Assistant Tools Setup
• Smart Grid Overview
• Angular Grid Configuring the ToolBar
• API Reference of the GridSmartBoxToolComponent