19 Jan to 26 Jan 2026: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/getting-the-right-row-on-the-screen-in-the-kendo-grid
Summary: Learn how to programmatically bring a specific Kendo UI Grid row into view so users don’t lose context after a search, selection, or edit. You’ll locate the target data item, handle paging or virtual scrolling by determining its page/index and navigating to it, then scroll the grid’s content to reveal the row, optionally selecting and focusing it for keyboard navigation.

---------------------------------------------------------------------------------------------------------------------------------------------------------

12 Jan to 19 Jan 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/aspnet-mvc/documentation/knowledge-base/grid-use-grid-as-client-template
Summary: Learn how to render and initialize a Kendo UI for ASP.NET MVC Grid inside a client-side template (for example, a parent Grid column) to create per-row nested grids. You use the MVC helper with ToClientTemplate, assign unique widget names/IDs via #= ... # placeholders, reference the template via ClientTemplate or ClientTemplateId, pass the master row key to the child grid’s DataSource read, and call kendo.init in the parent Grid’s dataBound to activate the generated widgets. This setup avoids duplicate IDs and ensures each grid instance binds to its own data.

Article: https://www.telerik.com/aspnet-mvc/documentation/knowledge-base/tooltip-refresh-with-dynamic-content
Summary: Learn how to refresh a Kendo UI Tooltip in ASP.NET MVC when targets and content are created or updated dynamically. Initialize the tooltip once on a stable container with a filter selector and a content callback tied to the current target, then after AJAX/DOM updates call tooltip.refresh() (or hide/show) and, if using remote content, set cache: false to force a reload. This delegated setup avoids per-element reinitialization and ensures new Grid rows and other dynamic elements display up-to-date tooltip content.

---------------------------------------------------------------------------------------------------------------------------------------------------------

05 Jan to 12 Jan 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/diagrams-and-maps/map/azure-tiles
Summary: Configure the Telerik UI for ASP.NET MVC Map to render Microsoft Azure/Bing Maps tiles by adding a tile layer with a Virtual Earth URL template. You set UrlTemplate with {quadkey} and {subdomain}, define subdomains and attribution, and append your Bing/Azure Maps API key; the examples show Razor code and how to switch between road and aerial imagery.

---------------------------------------------------------------------------------------------------------------------------------------------------------

15 Dec to 22 Dec 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/aspnet-mvc/documentation/knowledge-base/grid-ai-integration
Summary: Learn how to integrate an LLM (OpenAI/Azure OpenAI) with the Telerik UI for ASP.NET MVC Grid to turn natural-language commands into Kendo DataSource descriptors (filter, sort, group, aggregate) and apply them at runtime. The article shows the prompt structure and column metadata to send, includes MVC/C# and JavaScript code to call the model, parse the JSON response, validate it, and update the Grid via dataSource.query or setOptions.

Article: https://www.telerik.com/aspnet-mvc/documentation/knowledge-base/chart-ai-integration
Summary: Learn how to integrate the Telerik UI for ASP.NET MVC Chart with an AI provider (OpenAI or Azure OpenAI) to generate concise, natural-language summaries from chart data. You’ll configure API credentials, implement a C# controller/service that serializes series data and calls the model, and add client-side JavaScript to invoke the endpoint and render the AI output alongside the chart. The article provides example request/response code and notes on securing API keys.

Article: https://www.telerik.com/aspnet-mvc/documentation/knowledge-base/editor-ai-integration
Summary: Learn how to add AI to the Telerik UI for ASP.NET MVC Editor by creating a custom toolbar tool that sends the selected text or full content to OpenAI or Azure OpenAI through an MVC controller and inserts the generated result back into the editor. You’ll implement the client-side JavaScript to trigger the tool and apply the response, and the server-side C# action that calls the Chat Completions REST API with the API key kept on the server, including basic error handling.

Article: https://www.telerik.com/aspnet-mvc/documentation/knowledge-base/scheduler-ai-integration
Summary: Implement natural-language event creation in the Telerik UI for ASP.NET MVC Scheduler by integrating a server-side AI service (OpenAI/Azure OpenAI). You’ll add a prompt input, call the AI API from a controller with a JSON schema for event fields, parse and validate the response, and insert the resulting appointment into the Scheduler DataSource.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/smart-grid/smart-extensions
Summary: Learn how to enable and configure the ASP.NET MVC Grid Smart Extensions—AI-powered actions exposed in the Grid toolbar, column menu, and context menu. The article covers the Smart() server-side API, wiring an AI provider, customizing prompts and scope, handling client-side events, and enabling or disabling specific extensions to fit your requirements.

---------------------------------------------------------------------------------------------------------------------------------------------------------

17 Nov to 24 Nov 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/aspnet-mvc/documentation/knowledge-base/chat-ai-integration
Summary: This article shows you how to integrate the Telerik UI for ASP.NET MVC Chat component with an LLM (OpenAI or Azure OpenAI) by posting user messages to a server-side controller that proxies the Chat Completions API and returns AI replies in the Chat message format. You’ll set up the MVC wrapper and client-side transport, preserve conversation context, map system/user/assistant roles, secure API keys on the server, and handle errors so the AI responses render correctly in the Chat UI.

---------------------------------------------------------------------------------------------------------------------------------------------------------

10 Nov to 17 Nov 2025: highlights of the new online resources that we published last week.

Summary: This article shows how to integrate LLM features in ASP.NET MVC apps using Telerik UI’s AI components, focusing on the AIPrompt and related server-side helpers. You’ll configure OpenAI or Azure OpenAI providers, proxy requests through an MVC controller to protect API keys, and control behavior such as streaming responses, system messages, and prompt templates with clear setup and customization examples.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/diagrams-and-maps/diagram/binding
Summary: Bind the Kendo UI Diagram for ASP.NET MVC to local or remote data so shapes and connections are generated from your models. Configure the Diagram and Connections DataSource with the MVC fluent API—define model fields (Id, Text, X/Y, Width/Height, Type; From/To), map the schema, and set read/create/update/destroy actions—to control loading, layout, linking, and persistence.

---------------------------------------------------------------------------------------------------------------------------------------------------------

05 Nov to 10 Nov 2025: highlights of the new online resources that we published last week.

Summary: Learn how to use the Kendo UI ResponsivePanel in ASP.NET MVC to hide and reveal mobile content (such as navigation and sidebars) based on viewport width. The article shows initialization via the MVC HtmlHelper and HTML5 data attributes, configuring breakpoints, toggle targets, and auto-hide behavior, and handling open/close events and CSS to control layout and accessibility.

---------------------------------------------------------------------------------------------------------------------------------------------------------

29 Oct to 05 Nov 2025: highlights of the new online resources that we published last week.

Summary: Configure the Telerik UI for ASP.NET MVC TabStrip to load tab content on demand via AJAX using .LoadContentFrom or .ContentUrl, with controller actions that return PartialView results. Handle select/contentLoad/error events, optional caching, and route values as needed to optimize page load and keep tab content modular and maintainable.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/listview/binding/overview
Summary: This article explains how to bind the ASP.NET MVC ListView to data: bind directly to an IEnumerable

Feel free to check them out and share your thoughts!

The Telerik Team

1. Is it hard to understand the version numbers of our releases? If yes, what makes them hard to understand them?

2. Would semantic versioning (SemVer) of our releases make it easier to understand our version numbers and what's behind them?

3. If we go with SemVer, we might need to start with version 3000.0.0 as we currently use 2022.x.x. Please share your thoughts about this approach and ideas for what number versioning would work best for you.

At AdvaitUX, we are a UI/UX design agency focused on creating digital products that people truly enjoy using. We believe that great design is not just about how something looks, but how it works and how it feels. Our goal is simple — to build better digital experiences that help businesses grow and users stay engaged.

We combine strategy, creativity, and user research to design websites and mobile apps that are clean, intuitive, and easy to navigate. Every project starts with understanding your users, your goals, and your challenges. This helps us create solutions that are not only beautiful but also practical and results-driven.

From wireframes and prototypes to final UI design and development support, we handle every step with care and precision. We focus on improving usability, increasing conversions, and delivering products that perform smoothly across all devices.

Whether you are a startup launching your first product or an established brand looking to improve your digital presence, our team is here to help you succeed. We design experiences that solve real problems, build trust with users, and turn visitors into loyal customers.

At AdvaitUX, we don’t just design interfaces — we build digital products that make an impact.

Hi,

We have a requirement, where we have a kendo grid, from the grid columns we need one or multiple columns as a dropdown/combobox.

Along with the above requirement we have the below requirements. 

1. Grid column with Dropdown/Combobox should work when paste in grid
2. Export also should work with dropdown/combobox columns.

To add new rows in the grid, we have to copy the rows from excel and paste in the grid, so after the paste all the new records should appear even in the dropdown/combobox field. The export is a client side export. 

And for the grid we have a button for exporting the grid data in excel. If for specific column which will be dropdown/combobox which will be of complex type then after export how that column will display in the excel.

Note: We have already tried with dropdownlist in the grid. We created a UI component and user that inside EditorTemplateComponentName

in the cshtml file. We are able to render the dropdown for that particular column inside the grid. But the problem is with dropdownlist column when we try to copy and paste records from excel to grid, paste is not working for dropdown column.

And also the dropdown column is a complex type so when we export the grid, the dropdown column value is not render in the excel file.

So, we are thinking to achieve the above requirements with a combo box, please provide the solution for the above requirements.

Hi,

I am exporting excel from kendo grid in client side with default Excel() method.

When I am trying to read any exported excel from JavaScript I am not able to read any excel data, but when I open the excel file and click on save button, then going forward that excel I am able to read from JavaScript. Below are the codes used for export and import. 

Export Code:

function exportData(gridName) {
    var grid = $("#" + gridName).data("kendoGrid");
    var pageSize = grid.dataSource._pageSize;
    var dataSourceTotal = grid.dataSource.total();
    grid.dataSource.pageSize(dataSourceTotal);
    grid.saveAsExcel();
    grid.dataSource.pageSize(pageSize); // Reset page size after a delay
}

Import Code :

const reader = new FileReader();
var mappedExcelRecords = [];

// The callback is executed here, once the load event fires
reader.onload = function (event) {
    var data = event.target.result;
    var workbook = XLSX.read(data, {
        type: 'binary'
    });

    var jsonExcelRecords;

    workbook.SheetNames.forEach(function (sheetName) {
        jsonExcelRecords = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName])
    })

In jsonExcelRecords variable I am getting all the excel data if the excel is open and saved once but when the excel is exported from the kendo grid and trying to import then the below code doesn't get any data from excel.

jsonExcelRecords = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName])

Please look into this issue and feel free to ask if you need any new information.

public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
    // Check if any sorts have been applied.if (request.Sorts != null)
    {
        // Loop through each sort.foreach (var sort in request.Sorts)
        {
            // Check if the Category column is being sortedif (sort.Member == "Category")
            {
                // Sort by the CategoryName instead of the Object.
                sort.Member = "Category.CategoryName";
            }
        }
    }
}
 
My grid column coincidentally also has to do with categories.  I tried adding the above code to my read method and it doesn't work.  When I click on the header to sort the column it doesn't automatically initiate a read call so I'm not sure how this could work.  I guess I'm missing something.
My grid definition:
@(
Html.Kendo().Grid<LookupItem>()
    .Name("LookupList")
    .Columns(columns =>
    {
        columns.Bound(m => m.Id).Hidden(true);
        columns.Bound(m => m.CategoryListItem).ClientTemplate("#: CategoryListItem.CategoryName #").EditorTemplateName("LookupCategoryDropDown").Width("25%"); ;
        columns.Bound(m => m.Name).Width("25%");
        columns.Bound(m => m.Value).Width("15%");
        columns.Bound(m => m.AlternativeValue).Width("15%");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
    .ToolBar(toolbar => { toolbar.Create().Text("Add New Lookup Item"); })
    .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation("Are you sure you want to delete this item?"))
    .Sortable()
    .Scrollable()
    .Filterable(filterable => filterable.Extra(false))
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(50)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(m => m.Id);
            model.Field(m => m.Category);
            model.Field(m => m.Name);
            model.Field(m => m.Value);
            model.Field(m => m.AlternativeValue);

        })
        .Read(read => read.Action("Lookup_Read", "Lookup"))
        .Create(create => create.Action("Lookup_Create", "Lookup"))
        .Update(update => update.Action("Lookup_Update", "Lookup"))
        .Destroy(read => read.Action("Lookup_Delete", "Lookup"))
    )
My Controller Read Method:
 public async Task<IActionResult> Lookup_Read([DataSourceRequest] DataSourceRequest request)
 {
     if (request.Sorts != null)
     {
         // Loop through each sort.
         foreach (var sort in request.Sorts)
         {
             // Check if the Category column is being sorted
             if (sort.Member == "CategoryListItem")
             {
                 // Sort by the CategoryName instead of the Object.
                 sort.Member = "CategoryListItem.CategoryName";
             }
         }
     }
     var model = await _service.GetAllLookupTypesAsync();
     var result = model.ToDataSourceResult(request);
     return Json(result);

 }               
    
        
            

I have a asp.net mvc kendo grid with Edit option in each row, on click it brings the data from Editor Template(its having a kendo dropdown in it) I have implemented CSP globally. Grid having Deferred() in it.  Grid works fine with its basic get records.

After CSP . Edit click is not opening the popup. Shows console error with invalid template. 

followed by the entire page html code.

How to eliminate this. How to use Edit with CSP.

Grid Example:

Thanks,

Anupriya. R

I have multiple autocomplete boxes and they all filter through the same AJAX datasource.  I want to somehow pass the ID of the specific box to the AdditionalData javascript function so that I don't have to write like five different JavaScript functions with pretty much the same logic.  I didn't see anything in the documentation and passing "e" in the AdditionalData function just passes the filter.

<strong>To:</strong>  Html.Kendo().AutoComplete().Name("ToAddress")
                    .DataTextField("Email")
                    .Separator(";").MinLength(4).Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(r =>
                        {
                            r.Action("SearchAD", "Home").Data("AdditionalData");
                        })
                        .ServerFiltering(true);
                    }))

<strong>CC:</strong>  Html.Kendo().AutoComplete().Name("ccAddress")
                    .DataTextField("Email")
                    .Separator(";").MinLength(4).Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(r =>
                        {
                            r.Action("SearchAD", "Home").Data("AdditionalData");
                        })
                        .ServerFiltering(true);
                    }))

            
<strong>BCC:</strong>  Html.Kendo().AutoComplete().Name("bccAddress")
                    .DataTextField("Email")
                    .Separator(";").MinLength(4).Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(r =>
                        {
                            r.Action("SearchAD", "Home").Data("AdditionalData");
                        })
                        .ServerFiltering(true);
                    }))

    function AdditionalData() {
        var text = $("[the autocomplete id]").val();  //get the ID or any other identifier
        var i = text.indexOf(";");
        var value = text.substring(i + 1);
        return {
            text: value
        }
    }