UI for ASP.NET MVC Forum RSS

Latest Online Resources about UI for ASP.NET MVC

16 Mar to 23 Mar 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/aspnet-mvc/documentation/knowledge-base/scheduler-create-event-from-selected-time-slots
Summary: Learn how to let users drag-select time slots in the Kendo UI Scheduler for ASP.NET MVC and immediately open the editor to create a new event with the selected start, end, all-day, and resource values prepopulated. The article shows enabling selectable on the Scheduler, handling the select event to capture the slot range, and calling addEvent (or dataSource.add + editEvent) to create the event from the selection.

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

09 Mar to 16 Mar 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/diagram/tooltips
Summary: Learn how to add and customize tooltips in the Telerik UI for ASP.NET MVC Diagram for both shapes and connections. The article shows how to enable the Diagram’s tooltips, target elements with filter selectors, provide content via templates or functions with access to the bound dataItem, and configure position, animations, auto-hide, and show/hide events to fit your scenario.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/diagrams-and-maps/diagram/accessibility/overview
Summary: This article shows you how to implement accessibility for the Telerik UI for ASP.NET MVC Diagram, covering WCAG 2.2 AA and Section 508 conformance, WAI-ARIA roles and attributes, and screen reader support. You will enable and use keyboard navigation, provide accessible names for shapes and connectors, validate behavior with assistive technologies, and understand current limitations.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/diagrams-and-maps/diagram/accessibility/keyboard-navigation
Summary: This article documents the ASP.NET MVC Diagram keyboard navigation and accessibility: how to make the Diagram focusable and the supported keyboard shortcuts for traversing shapes and connections, selecting and moving items, editing labels, deleting items, and canceling operations. Use these key bindings to implement accessible, predictable interactions that align your app with the Diagram’s built-in keyboard behavior.

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

09 Feb to 16 Feb 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/smart-grid
Summary: Learn how to enable Smart mode in the Telerik UI for ASP.NET MVC Grid to auto-generate columns from your model, detect data types, and turn on paging, sorting, filtering, and grouping with minimal configuration. The article explains the .Smart() setup in the MVC HTML Helper, details the defaults (type-aware columns, editors, and formatting), and shows how to override or disable specific Smart features globally or per column.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/conversational-ui/promptbox/modes
Summary: This article explains the available PromptBox modes in Telerik UI for ASP.NET MVC (Conversational UI), what each mode renders, and how it affects interaction, validation, and value submission so you can choose the right mode for your scenario. It shows how to configure the Mode option with the MVC HtmlHelper, provides code examples for each mode, and outlines related client-side API hooks for switching modes and customizing behavior.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/conversational-ui/promptbox/tools
Summary: Learn how to configure the PromptBox tools in Telerik UI for ASP.NET MVC Conversational UI: add and reorder built-in tools, hide or disable them, insert separators, and define custom buttons. The article shows the MVC helper and client-side setup to control tool appearance (icons/text), behavior, and to handle tool commands via events for integrating your own logic.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/conversational-ui/promptbox/events
Summary: This article documents the client-side events of the Conversational UI PromptBox in Telerik UI for ASP.NET MVC and shows how to subscribe to them from Razor and JavaScript. It includes examples of wiring handlers via the MVC helper Events configuration, accessing event arguments (such as the current input), intercepting the send action, and calling e.preventDefault() to cancel submission for validation or custom logic.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/smartpastebutton/events
Summary: This article documents the client-side events of the SmartPasteButton in Telerik UI for ASP.NET MVC and shows how to wire them using the MVC helper’s .Events configuration and JavaScript handlers. It outlines when events like paste, open, close, click/select fire and what arguments they expose, so you can read pasted content/options, prevent default behavior, and implement custom logic. Code snippets demonstrate subscribing to events and accessing event data in handlers.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/conversational-ui/promptbox/disabled
Summary: Learn how to disable the Telerik UI for ASP.NET MVC PromptBox and control its enabled state programmatically. Set the component’s Enable option to false in the MVC helper for server-side configuration, and toggle it at runtime with the client-side enable(false/true) API; the article clarifies how the disabled state blocks focus and user input and how to re-enable it when needed.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/conversational-ui/promptbox/overview
Summary: Use the Telerik UI for ASP.NET MVC Conversational UI PromptBox to display a modal prompt and collect a single user input value. The article shows how to initialize the PromptBox with the MVC HTML helper in a Razor view, configure title/content/buttons and the input field, open/close it programmatically, and handle the user’s response via client-side events and API methods.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/smartpastebutton/overview
Summary: This article shows how to use the SmartPasteButton HtmlHelper in Telerik UI for ASP.NET MVC to detect clipboard content and trigger context-specific paste actions, such as parsing text or images and executing your commands. It covers Razor configuration, item/command definitions, event handling and validation, and wiring the paste results into form inputs, uploads, or custom server logic.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/conversational-ui/promptbox/adornments
Summary: Learn how to add and configure adornments in the Kendo UI for ASP.NET MVC PromptBox to include inline actions and context, such as prefix/suffix icons, button groups, and custom templates. You’ll use PrefixOptions and SuffixOptions to define icons/templates, separators, and event handlers, and understand how adornments affect layout, sizing, and accessibility.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/conversational-ui/promptbox/appearance
Summary: Learn how to configure the Telerik UI for ASP.NET MVC Conversational UI PromptBox appearance using the built-in options for size, rounded corners, fill mode, and theme color in the MVC wrapper. The article also shows how these settings interact with the built-in Sass themes (Default, Bootstrap, Material) and how to apply custom CSS classes to fine-tune spacing and layout in your views.

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

02 Feb to 09 Feb 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/aspnet-mvc/documentation/ai/troubleshooting
Summary: Use this troubleshooting guide to diagnose and fix issues with the Telerik UI for ASP.NET MVC AI components (e.g., AI Prompt), including misconfigured OpenAI/Azure OpenAI settings (API keys, endpoints/deployment names, model IDs, API versions) and common HTTP errors (401, 403, 404, 429). You’ll set up and test a server-side proxy, resolve CORS and streaming constraints under IIS/Kestrel, adjust timeouts, and inspect client and server logs and network requests to validate your integration.

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

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.

Article: https://www.telerik.com/aspnet-mvc/documentation/ai-components-and-features

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.

Article: https://www.telerik.com/blogs/hiding-revealing-mobile-content-aspnet-mvc-responsive-panel

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.

Article: https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/tabstrip/binding/ajax-binding

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

Telerik UI for ASP.NET MVC versioning feedback

We need your feedback, because we are considering changes in the release approach for Telerik UI for ASP.NET MVC. Please provide your feedback in the comments section below:

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.

Dynamically change the marker size while zooming in and out

I am working with a scatter chart and trying to modify the zoomable feature to change the markers size dynamically. So while zoomed out the markers will be smaller and as you zoom in they will be getting bigger. This is to avoid saturation when there's markers close to each other.

Is that possible?

chart.setOptions({
series: seriesList,
yAxis: yAxisList,
xAxis: {
type: "date"
, labels: {
format: "{0:MM/dd/yyyy}",
rotation: 30
}
},
zoomable: {
mousewheel: {
lock: "y"
},
},
pannable: {
lock: "y"
}
});

I've tried using this function on zoom but it doesn't work, it freezes the zoom:

Migration to Telerik UI

Hello!

I want to ask where can I find some informations or tutorial to migration from old version Telerik to new Telerik UI with Kendo for ASP.NET MVC?

"Old version" - I mean TelerikMvcExtensions from 2013.

I tried here https://www.telerik.com/aspnet-mvc/documentation/migration/migrating-from-telerik-extensions-for-aspnet-mvc but this site doesn't exist anymore.

BR,

Piotr

How to add a column menu item to tabbed component?

In a grid I'm setting up the column menu with the tabbed component style. I would like to add a menu to the second tab.

In the documentation, I found Column Menu mentioning the ColumnMenuInit event. I was able to set up this event and it gets triggered when first opening the menu for a field. But I cannot locate the kendoMenu with

let menu = e.container.find(".k-menu").data("kendoMenu");

I could locate the panels through

let tab = e.container.find("[role=tabpanel]");

but my quest stranded there.

The grid is something like this

 @(Html.Kendo().Grid<DashboardViewModel>()
     .Name("dashboard")
     .Columns(...)
     .Events(e => e.ColumnMenuInit("menuInit"))
     .ColumnMenu(menu =>
     {
          menu.ComponentType("tabbed");
          menu.ClearAllFilters();
          menu.AutoSize();
     })
     ...
)

So how can I accomplish adding a menu to the second tab?

Thanks in advance

Double Controller in my URL Path Nested Partial Views and Grids

This really has got me stumped. I have a grid that has a tabstrip in it's custom editor template. This tabstrip calls a partial view with a grid in it. I'm getting to the partial view just fine. But when I call my read action method it can't find it because it has my controller name twice in the url. When I had this before it was because something was not defined in my grid correctly. I don't think that is the case here since it is so simple. I am using areas.

I'm going to show the code from the EditorTemplate onwards. Please let me know if you need the initial view.

EditorTemplate

@using Compass.Areas.HookupCharges.Models
@using Compass.Areas.Lookup.Models
@model HookupChargeViewModel

<div class="container-fluid">
<form>
<div class="form-group">
<div class="row">
<kendo-tabstrip tab-position="left" name="tabstrip-left">
<items>
<tabstrip-item selected="true"
text="Property Information"
content-url="@Url.Action("PropertyInformation", "HookupCharges", new { hookupId = "#=Id#" })"
type="POST">

</tabstrip-item>

Controller

namespace Compass.Areas.HookupCharges.Controllers
{
[Area("HookupCharges")]
public class HookupChargesController(HookupChargeServices hookupChargeServices, LookupService lookupService) : BaseController

{...

public IActionResult PropertyInformation(int hookupId)
{
ViewData["HookupId"]= hookupId;
// You can pass a model to your partial view here if needed
return PartialView("_PropertyInformation");
}

...}

Partial View

@using Compass.Models;
@{
var _hookupId = (int)ViewData["HookupId"];
}

@(
Html.Kendo().Grid<PropertyInfoViewModel>()
.Name("HookupChargePropertyGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id);
columns.Bound(p => p.Address);
columns.Bound(p => p.AddressDirection);
columns.Bound(p => p.StreetUnit);
columns.Bound(p => p.TaxAccount);
})
.Pageable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("HookupPropertyInfo_Read", "HookupCharge", new { hookupId = _hookupId }))
)
)

Controller

It Never Gets Here

[HttpPost]
public async Task<IActionResult> HookupPropertyInfo_Read([DataSourceRequest] DataSourceRequest request)
{
var model = await _hookupService.GetAllHookupChargePropertiesAsync(1279);
var result = model.ToDataSourceResult(request);

return Json(result);
}

Output

https://localhost:44358/HookupCharges/HookupCharge/HookupPropertyInfo_Read

I have no idea about the aria message. I'll work on that while I wait for an answer.

One dropdownlist column in a grid always editable and still have an edit button that open an editor template or partial view

Hi,

I have a case where I need one column to be always editable as shown in this screenshot:

This was written a long time ago before anyone here was using the telerik grid. Now that I have everything populated nicely I am trying to get the status column to be always accessible for quick setting of the status and at the same time I want an edit button to edit the larger model in an Editor Template or open a partial view. I did my best to google this and the ai generated answer doesn't work. I'm getting conflicting advice on whether or not I should use the Editable property on the column bound vs. in the datasource. I like to take things in small steps so my first task was getting the three other columns readonly. I did this through the datasource because .Editable(false) or .Editable("false') on column bound did not work. I found out that one is the older way of doing this. I can't remember which is which. Anyway below is what the example said to do and it doesn't work unless I press the edit button. I did this inline for now but I will be doing the popup of some type.

GRID DEFINITION

@(
Html.Kendo().Grid<HookupChargeViewModel>()
.Name("HookupChargesList")
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden(true);
columns.Bound(p => p.PropertyOwner).Title("Property Owner");
columns.Bound(p => p.AddressDisplay).Title("Address");
columns.Bound(p => p.TaxAccountDisplay).Title("Tax Account");
columns.ForeignKey(p => p.HookupChargeStatusID, (System.Collections.IEnumerable)ViewData["LookupHookupChargeStatuses"], "IdNumber", "Name").Title("Status").Editable("alwaysEditable");
columns.Command(command => { command.Edit(); }).Width(220);
})
.ToolBar(toolbar => { toolbar.Create().Text("Add New Hookup Charge Worksheet"); })
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Scrollable()
.Filterable(filterable => filterable.Extra(false))
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.PropertyOwner);
model.Field(p => p.AddressDisplay).Editable(false);
model.Field(p => p.TaxAccountDisplay).Editable(false);
model.Field(p => p.HookupChargeStatusID);
})
.Read(read => read.Action("HookupCharges_Read", "HookupCharges"))
.Create(create => create.Action("HookupCharges_Create", "HookupCharges"))
.Update(update => update.Action("HookupCharges_Update", "HookupCharges"))
)
.Events(events => events.Edit("grid_edit"))
)

SCRIPT

</script>

How to enable AutoSwitchParts for Datepicker ?

Hi,

Is it possible to enable AutoSwitchParts for DateInput Integration of Datepicker?
DateInput works fine by itself, but I can’t figure out how to enable AutoSwitchParts with Datepicker.

Any suggestions would be appreciated.

(Telerik UI for Asp.net MVC 2025.4.1217.462)

Kendo Combo-box inside Kendo Grid MVC shows "No data found" and does not hit the server endpoint

Hi,
I am working with Kendo UI grid in ASP .NET MVC using an EditorTemplate with ComboBoxFor inside the grid.

Issue description

The combobox appears inside the grid edit mode.
When I click the dropdown , it shows "No data found"
The server side action method is not being hit at all.
No JS error
Using same server endpoint DropdownListFor works correctly and loads data

Sample code

@model Department

@(Html.Kendo()
.ComboBoxFor(m=>m)
.DataValueField("departmentId")
.DataTextField("departmentName")
.DataSource(ds=>ds.Read(read=>read.Action("GetDepartments", "Home")))
)

Kendo Grid exported excel not able to read

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.

Accessibility Issue: aria-hidden Alert on Kendo Tooltip Icons

I am currently using the ANDI accessibility tool and have encountered an accessibility issue with the tooltip icons across my application.

The tool reports an "Aria-Hidden Alert" stating: "Element is focusable but has or is contained by [aria-hidden = true]."

I've noted that the HTML for these elements shows aria-hidden = true and focusable = false. I believe the focusable attribute should be set to true.

I have attempted to resolve this by directly removing aria-hidden = true and changing focusable to true. However, the Kendo code consistently seems to override my modifications, reverting them back.

I have included the following to help diagnose the issue:

A snapshot of the error.
The corresponding HTML snippet showing aria-hidden = true and focusable = false.
A link explaining the nature of this accessibility alert (https://www.ssa.gov/accessibility/andi/help/alerts.html?ariahidden).

Could you please advise on how to successfully override the Kendo code to correct this aria-hidden alert?

Thank you.

MVC Grid sort on editortemplate dropdownlist column

Hi, I'm asking about an answer posted in the Sorting Grid on Editor Template column post back in 2017. The answer was from Georgi and here is the excerpt:

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);

 }

Enable Combo Box for Grid Column and Export the grid to Excel

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.

What version of DOMPurify is used within Progress Telerik UI for ASP.NET Core version 2025.4.1217

What version of DOMPurify is used within Progress Telerik UI for ASP.NET Core version 2025.4.1217?

Kendo grid Edit Popup Not opening with CSP

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:

@(Html.Kendo().Grid((IEnumerable<test>)Model)
.Name("test")
.DataSource(datasource => datasource.Ajax().Read(read => read.Action("GetRecords", "Test").Type(HttpVerbs.Get)))
.Columns(columns =>
{
columns.Command(command => { command.Edit().Text("Edit"); }).Width(75);
columns.Bound(p => p.Id).Title("ID").Width(130);
columns.Bound(p => p.Name).Title("Name").Width(130);
columns.Bound(p => p.Date).Title("Date").Width(150);
})
.Editable(editable =>
{
editable.Mode(GridEditMode.PopUp).TemplateName("Edit_Details");
})
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
})
.Update(update => update.Action("EditDetails", "Test").Type(HttpVerbs.Post))
)
.Deferred()
)

Thanks,

Anupriya. R

Multimple autocomplete boxes, one filtering ajax datasource. How to pass the id of the box?

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.

Razor:

<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);
                    }))

JavaScript

    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
        }
    }

Error reporting while Creating Build throught GIT-Hub CI Process

Hi team,

We recently upgraded Telerik ASP.Net MVC to 2025.3.825, All the changes are good But when we try to create build the code through GIT-Hub CI/CD process getting below error.

Can you please help us to resolve the issue.

D:\actions-runner\_work\TestProject\Source\Test\packages\Telerik.Licensing.1.6.16\build\Telerik.Licensing.targets(29,3):
error MSB4062: The "Telerik.Licensing.Tasks.ResolveTelerikProducts" task could not be loaded from the
assembly D:\actions-runner\_work\TestProject\Source\Test\packages\Telerik.Licensing.1.6.16\build\..\tasks\netstandard2.0\Telerik.Licensing.Tasks.dll.
Could not load file or assembly 'Microsoft.Build.Utilities.Core, Version=15.1.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or
one of its dependencies. The system cannot find the file specified. Confirm that the <UsingTask> declaration is correct,
that the assembly and all its dependencies are available, and that the task contains a public class that
implements Microsoft.Build.Framework.ITask. [D:\actions-runner\_work\TestProject\Source\Test\Test.Web\Test.Web.csproj]

License Runtime Error

I just upgraded my application and now I am getting a license runtime error.

Here is the exact error I am receiving:

Could not load file or assembly 'Telerik.Licensing.Runtime, Version=1.6.5.0, Culture=neutral, PublicKeyToken=98bb5b04e55c09ef' or one of its dependencies. The system cannot find the file specified.

I went through the steps to download the key and I received a message stating that my key was successfully downloaded.

Am I missing a step?

Thanks for your help!

Change Default Operator

We have a column of type text, and want to change the default filter from 'equals' to 'contains'.

This doesn't seem to have any effect:

.Filterable(f => f.Cell(c => c.Operator("contains")))

This does not seem to work in the context of the MVC Grid: jQuery Set the Default Filter Operator in the Grid - Kendo UI for jQuery

Kendo Scheduler Recurrence Rule Causes DatePickers to Retain or Display Incorrect Values Across Views

I’m working on a legacy ASP.NET MVC application that leverages a custom Kendo Scheduler view (TestScheduler, extending Scheduler<ISchedulerEvent>).

We’ve noticed a recurring issue when editing recurring event series. Kendo DatePickers in the custom popup editor or other views end up displaying incorrect or “sticky” values, even though the underlying <input> element shows the correct value.

The CustomInput have multiple datefields like below, but all DateFields seems to be prefilled by the date cpart of the recurrence rule. This seems to also prefill all other DateFields in the page that use DatePicker component.

Observed Behavior

When editing a recurring series (with a RecurrenceRule like below):

DTSTART;TZID=Europe/London:20240626T090000
DTEND;TZID=Europe/London:20240626T170000
RRULE:FREQ=WEEKLY;BYDAY=TU

Question

Is this behavior expected when RecurrenceRule is applied, i.e., does Kendo’s Scheduler reuse a shared RecurrenceEditor instance or observable model across views?

Here's the sample code that is used while editing a schedule

<div id="DivMainContent" class="content-region">
    <div class="popup-box-head accent-colour-background clearfix">
        <div class="box-title normal-text left">
            Select Start and End Times
        </div>
        <div class="button-funcs right">
            <a href="javascript:void(0);" title="Save" id="repair-manage-diary-difference-btnadd">
                Save
            </a> | <a href="javascript:void(0);" title="Close" class="close">Close</a>
        </div>
    </div>
    <div class="popup-box-main fieldset start-end-popup">
<form action="/read/data" id="manage-diary-difference-new-frm" method="post"><input data-val="true" data-val-required="The DiaryDetailId field is required." id="DiaryDetailId" name="DiaryDetailId" type="hidden" value="152" /><input id="Timestamp" name="Timestamp" type="hidden" value="AAAAAAADEjI=" /><input id="TimestampString" name="TimestampString" type="hidden" value="AAAAAAADEjI=" /><input data-val="true" data-val-required="The Id field is required." id="OwnerDiary_Id" name="OwnerDiary.Id" type="hidden" value="25" /><input id="ParentCalendar_TimestampString" name="ParentCalendar.TimestampString" type="hidden" value="AAAAAAACldk=" /><input data-val="true" data-val-required="The CalendarId field is required." id="ParentCalendar_CalendarId" name="ParentCalendar.CalendarId" type="hidden" value="3" /><input data-val="true" data-val-required="The MondayWorking field is required." id="ParentCalendar_MondayWorking" name="ParentCalendar.MondayWorking" type="hidden" value="True" /><input data-val="true" data-val-required="The TuesdayWorking field is required." id="ParentCalendar_TuesdayWorking" name="ParentCalendar.TuesdayWorking" type="hidden" value="True" /><input data-val="true" data-val-required="The WednesdayWorking field is required." id="ParentCalendar_WednesdayWorking" name="ParentCalendar.WednesdayWorking" type="hidden" value="True" /><input data-val="true" data-val-required="The ThursdayWorking field is required." id="ParentCalendar_ThursdayWorking" name="ParentCalendar.ThursdayWorking" type="hidden" value="True" /><input data-val="true" data-val-required="The FridayWorking field is required." id="ParentCalendar_FridayWorking" name="ParentCalendar.FridayWorking" type="hidden" value="True" /><input data-val="true" data-val-required="The SaturdayWorking field is required." id="ParentCalendar_SaturdayWorking" name="ParentCalendar.SaturdayWorking" type="hidden" value="False" /><input data-val="true" data-val-required="The SundayWorking field is required." id="ParentCalendar_SundayWorking" name="ParentCalendar.SundayWorking" type="hidden" value="False" />            <div id="error-diary-difference-overlap">
                <span id="error-lable-manage-diary-difference-overlap" class="k-invalid-msg-custom">
                </span>
            </div>
            <div class="line clearfix">
                <label for="day-selected" class="field-text">
                    Select Day
                </label>
                <div class="fieldform">

                    <input data-uid="c0a5911c-7f0b-4e73-ba95-eaa9f2f733f2" data-val="true" data-val-range="Please enter Day" data-val-range-max="6" data-val-range-min="0" id="SelectedDays" name="SelectedDays" type="text" value="5" /><script>
	kendo.syncReady(function(){jQuery("[data-uid='c0a5911c-7f0b-4e73-ba95-eaa9f2f733f2']").kendoDropDownList({"change":NameSpace.RepairManageTimeSlots.ChangeWorkingDay,"dataSource":[{"Key":1,"Value":"Monday"},{"Key":2,"Value":"Tuesday"},{"Key":3,"Value":"Wednesday"},{"Key":4,"Value":"Thursday"},{"Key":5,"Value":"Friday"}],"animation":false,"dataTextField":"Value","height":300,"autoBind":true,"dataValueField":"Key","rounded":"null"});});
</script>

                </div>
            </div>
            <div class="line clearfix">
                <label for="start-time" class="field-text">
                    Start Time
                </label>
                <div>
                    <input data-val="true" data-val-required="Please enter Start time" id="StartTime" name="StartTime" type="text" value="00:00" /><script>
	kendo.syncReady(function(){jQuery("#StartTime").kendoTimePicker({"format":"HH:mm","min":new Date(2025,9,14,0,0,0,0),"max":new Date(2025,9,14,0,0,0,0),"interval":15});});
</script>
                    <span class="field-validation-valid" data-valmsg-for="StartTime" data-valmsg-replace="true"></span>
                </div>
            </div>
            <div class="line clearfix">
                <label for="end-time" class="field-text">
                    End Time
                </label>
                <div>
                    <input data-val="true" data-val-required="Please enter end time" id="EndTime" name="EndTime" type="text" value="23:59" /><script>
	kendo.syncReady(function(){jQuery("#EndTime").kendoTimePicker({"format":"HH:mm","min":new Date(2025,9,14,0,0,0,0),"max":new Date(2025,9,14,0,0,0,0),"interval":15});});
</script>
                    <span class="field-validation-valid" data-valmsg-for="EndTime" data-valmsg-replace="true"></span>
                </div>
            </div>
            <div class="line clearfix">
                    <label for="effective-from" class="field-text">
                        Effective from
                    </label>
                    <div class="fieldform">
                        <input data-val="true" data-val-required="Please enter Effective from" endDatePicker="EffectiveToDate" id="EffectiveFromDate" name="EffectiveFromDate" type="text" value="Wed, Oct 15 2025" /><script>
	kendo.syncReady(function(){jQuery("#EffectiveFromDate").kendoDatePicker({"change":NameSpace.RepairManageDiaryDifferences.startChangeCalendar,"open":Helpers.DatePicker.calendarOpen,"format":"ddd, MMM dd yyyy","parseFormats":["dd/MM/yyyy","ddd, MMM dd yyyy"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
</script>
                        <span class="field-validation-valid" data-valmsg-for="EffectiveFromDate" data-valmsg-replace="true"></span>
                    </div>
                </div>
            <div class="line clearfix">
                    <label for="effective-to" class="field-text">
                        Effective to
                    </label>
                    <div class="fieldform">
                        <input id="EffectiveToDate" name="EffectiveToDate" startDatePicker="EffectiveFromDate" type="text" value="Tue, Oct 21 2025" /><script>
	kendo.syncReady(function(){jQuery("#EffectiveToDate").kendoDatePicker({"change":NameSpace.RepairManageDiaryDifferences.endChangeCalendar,"open":Helpers.DatePicker.calendarOpen,"format":"ddd, MMM dd yyyy","parseFormats":["dd/MM/yyyy","ddd, MMM dd yyyy"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
</script>
                        <span class="field-validation-valid" data-valmsg-for="EffectiveToDate" data-valmsg-replace="true"></span>
                    </div>
                </div>
            <div class="line clearfix">
                <label for="effective-to-date" class="field-text">
                    Effective to date js
                </label>
                <div class="fieldform">
                    <input id="TestDate" name="TestDate" type="text" />
                    <script>
                        kendo.syncReady(function () {
                            jQuery("#TestDate").kendoDatePicker({
                                "format": "ddd, MMM dd yyyy",
                                "parseFormats": ["dd/MM/yyyy", "ddd, MMM dd yyyy"],
                                "min": new Date(1900, 0, 1, 0, 0, 0, 0),
                                "max": new Date(2099, 11, 31, 0, 0, 0, 0),
                                "change": function (e) {
                                    console.log("On Change of date picker");
                                    console.log(e);
                                    e.preventDefaut();
                                    var value = this.value();
                                    console.log(value);
                                }
                            });
                        });
                    </script>
                    <span class="field-validation-valid" data-valmsg-for="TestDate" data-valmsg-replace="true"></span>
                </div>
            </div>
            <div class="line clearfix">
                <label for="notes" class="field-text">
                    Comments
                </label>
                <div class="fieldform">
                    <input id="Notes" name="Notes" type="text" value="" />
                </div>
            </div>
</form>    </div>
</div>
<div id="DivMessage_AppointmentOutsite" style="display: none" class="content-region">
    <div class="popup-box-head accent-colour-background clearfix">
        <div class="box-title normal-text left">
            Confirm
        </div>
        <div class="button-funcs right">
            <a id="btnClose-appointmentOutside" href="javascript:void(0);" title="Close">Close</a>
        </div>
    </div>
    <div id="message-content" class="popup-box-content">Message.</div>
    <div class="YNButton clearfix" id="buttons-message">
        <button id='btnOk-appointmentOutside' type="button" title="Ok" class="active-background active-text">
            Ok
        </button>
    </div>
</div>

<div id='hiddenDiv1760456443763' style='display:none'></div>

Adding new row(Custom Button) to filtered kendo grid

Hi,

I have a kendo grid and in the page load kendo grid automatically have a new empty row. When we click on the + icon then it should create multiple rows in the grid.

The above functionality is working fine, but when we do a filter on any of the column then on filter click button it should display filtered row along with new empty row.

After click on filter button the empty row is not creating. I tried the below code on click on filter button it fires the Filter event but

its not creating the empty row. Can you please let me know how to add a new empty row on click of filter button.

.Events(ev => ev.Filter("onFiltering"))

function onFiltering() {
var gridName = "grid1";
var grid = $("#" + gridName).data("kendoGrid");

if (grid && grid.dataSource) {
grid.dataSource.cancelChanges();
var newRow = { field: "NewRow", Value: 0 };
grid.dataSource.add(newRow);
}

}

Can you preload deafult option into a telerik dropdownlist?

I am trying to preload deafult value that will always exist in this downdownlist no matter when. Then load in another list from the data base behind it base on other factors. See test code below.

@(Html.Kendo().DropDownList()
                    .Name("groupTypeFilter")
                    .HtmlAttributes(new { @class = "form-select", data_alpa = "filter", onchange = "ApplyFilter(this)" })
                    .OptionLabel("All")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new List<SelectListItem>
                    {
                        new SelectListItem { Text = "All", Value = "all" },
                        new SelectListItem { Text = "All GMS Groups", Value = "allgms" },
                        new SelectListItem { Text = "All MECCOM Groups", Value = "allmeccom" }
                    })  
                    .DataSource(config => config.Read("GetGroupTypes", "Group"))
                    )
 

 public JsonResult GetGroupTypes()
        {
            var groupTypes = new List<SelectListItem>
            {
                new SelectListItem { Text = "All", Value = "ALL" },
                new SelectListItem { Text = "GMS", Value = "GMS" },
                new SelectListItem { Text = "MEC/COM", Value = "MEC/COM" }
            };
            return Json(groupTypes);
        }
 
It seems to be only load the data from the data call and not the deafult data that I loaded into it

Grid components without ids - how to find components in ui automated tests like cypress

Hello everyone
i have to create some cypress tests and figured out that nested grid components like the header date time filters do not have any ids or data-role-ids.
is there a way to "enable" them?
i can find components searching by Title (like $(e.container).find('select[title="Operator"]'); or $(e.container).find('select[title="Additional operator"]');) but it's not 100% safe

Kendo grid get API is calling twice with strict CSP

Hi,

I have a strict CSP implemented in the Program.cs file, after that when I verified the browser developer tool then I can see the get API is called 2 times.

Can you please let me know why this get API is called 2 times.

When I analyze I found that Kendo Panelbar Select event is called twice so internally the Get API is called twice.

@(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.Events(ev => ev.Select("OnSelect_Panel"))
.Items(panelbar =>
{
panelbar.Add().Text("Test Panel");
})

function OnSelect_Panel(sender) {

}

Inside the OnSelect_Panel() method is calling twice so the GET API also called twice. How can I restrict to one API call.

Note: Without strict CSP OnSelect_Panel() is called once but with strict CSP it called twice.

Two Draggable Grids

I have two draggable grids, but the second has no drop point, just a circle with a line through it. Can you tell me why the second grid allows me to drag the row but no where to drop?

// QUESTIONS
tab.Add().Selected(true).Text("Questions").Content(@<text>
@(Html.Kendo().Grid<TemplateQuestionVM>()
.Name("AI_TemplateQuestionGrid")
.ToolBar(toolbar =>
{
if (Model.TemplateId != 0) toolbar.New("TemplateQuestionEdit", "Template Question", $"AI/TemplateQuestion/edit?parentId={Model.TemplateId}");
toolbar.SuperSearchWindow("TemplateEdit", "AI_TemplateQuestionGrid");
})
.Height(600)
.DataSource(dataSource => dataSource
.Ajax()
.Sort(s => s.Add("Sequence"))
.Read(read => read.Action("Read", "TemplateQuestion", new { parentId = Model.TemplateId }).SuperSearchWindow("TemplateEdit", "AI_TemplateQuestionGrid"))
.Model(m => m.Id(f => f.TemplateQuestionId))
)
.Columns(columns =>
{
columns.Bound(c => c.TemplateQuestionId).Width(1).Title("").Filterable(false);
columns.Bound(c => c.Sequence).Width(80).Title("Seq").Filterable(false);
columns.Template("").Draggable(true).Width(80);
columns.Bound(c => c.QuestionName).Title("Question").Filterable(false);
columns.Bound(c => c.TemplateQuestionId).Edit("TemplateQuestionEdit", "Template Question", "AI/TemplateQuestion/edit/#=TemplateQuestionId#");
})
.Filterable()
.Scrollable()
.Sortable()
.Reorderable(order => order.Rows(true))
.Events(ev => { ev.RowReorder("function(e) { dragRow(e, 'AI_TemplateQuestion', 'TemplateId', " + Model.TemplateId + "); }"); })
)</text>);

// VARIABLES
tab.Add().Selected(false).Text("Variables").Content(@<text>
@(Html.Kendo().Grid<TemplateVariableVM>()
.Name("AI_TemplateVariableGrid")
.ToolBar(toolbar =>
{
if (Model.TemplateId != 0) toolbar.New("TemplateVariableEdit", "Template Variable", $"AI/TemplateVariable/edit?parentId={Model.TemplateId}");
toolbar.SuperSearchWindow("TemplateEdit", "AI_TemplateVariableGrid");
})
.Height(600)
.DataSource(dataSource => dataSource
.Ajax()
.Sort(s => s.Add("Sequence"))
.Read(read => read.Action("Read", "TemplateVariable", new { parentId = Model.TemplateId }).SuperSearchWindow("TemplateEdit", "AI_TemplateVariableGrid"))
.Model(m => m.Id(f => f.TemplateVariableId))
)
.Columns(columns =>
{
columns.Bound(c => c.TemplateVariableId).Width(1).Title("").Filterable(false);
columns.Bound(c => c.Sequence).Width(80).Title("Seq").Filterable(false);
columns.Template("").Draggable(true).Width(80);
columns.Bound(c => c.VariableCode).Width(200).Title("Variable").Filterable(false);
columns.Bound(c => c.VariableName).Title("Name").Filterable(false);
columns.Bound(c => c.VariableType).Width(200).Title("Type").Filterable(false);
columns.Bound(c => c.TemplateVariableId).Edit("TemplateVariableEdit", "Template Variable", "AI/TemplateVariable/edit/#=TemplateVariableId#");
})
.Filterable()
.Scrollable()
.Sortable()
.Reorderable(order => order.Rows(true))
.Events(ev => { ev.RowReorder("function(e) { dragRow(e, 'AI_TemplateVariable', 'TemplateId', " + Model.TemplateId + "); }"); })
)</text>);

Child/Detail grid column aggregate SUM coming as 0

Hi Team,

I want to show the sum of a decimal data type column at the bottom of child grid column in kendo ui mvc 4?
I am using below approach but always getting the sum as 0. Please guide on this.

.Columns(columns =>

{

      //..

       columns.Bound(p => p.amount)

           .HeaderTemplate("Amount")

           .ClientFooterTemplate("Sum: \\#=sum\\# ");

      //..

})

.DataSource(dataSource => dataSource

.Ajax()

.Aggregates(aggregates => {

aggregates.Add(p => p.amount).Sum();

})

.Read(read => read.Action("Invoice_Read", "ProjectsInvoice", new { projectCode = "#=projectCode#" }))

)

Grid Accessibility Issue

Hi,

My job is using the ANDI Accessibility Tool to test for accessibility and Section 508 compliance.

The tool keeps telling me that the, "Grid Element has no accessible name." I have tried all of the suggestions listed in your online Grid Accessibility document. However, I'm still getting the same message.

I also used the ANDI tool on your accessibility grid example and I received the same message.

Can someone assist me with this issue?

ANDI is a free Chrome Extension: https://chromewebstore.google.com/detail/unofficial-andi/fehcidpnbiemiekbbgligjlgjbhjchon.

I am including the results from my application and from your online demo grid.

Thanks,

Trena

How to pass a value to external Web API call

I am trying to call an external web api with the autocomplete but can't seem to pass the autocomplete value as I need to. I need to pass the value at the end of the URL like: https://webapiurl/api/{value} . The farthest I got is passing the value but as a querystring parameter (https://webapiurl/api?name=value), this doesn't work, I get a 404 error. How can I concatenate the value at the end of the URL?

@(Html.Kendo().AutoComplete().Name("auto")
    .DataTextField("Name")
    .Filter("contains")
    .MinLength(4)
    .DataSource(source =>
        {
            source.Read(r =>
            {
                r.Url("https://webapiurl/api")
                    .Data("onAdditionalData");
            })
            .ServerFiltering(false);
        })
    )

<script>
    function onAdditionalData() {
        return {
            name: $("#auto").val()
        };
    }
</script>

DatePicker TimeZone Issue

Hi Team,

I am using kendo date picker for in custom editor template for a kendo grid for pop up editing which is bind to datetime field of the model, now while displaying the value in the kendo date picker in custom editor template the value is displayed according to the user/client machine time zone which is changing the date value when the user is in some other time zone other than EST as application server is in EST , how to resolve the display issue in the kendo date picker for??
I am using the below code in custom editor template.
Please guide how to resolve this?

<div class="editor-field">
        @(Html.Kendo().DatePickeFor(m=>m.EndDate)
            .Format("MM/dd/yyyy")
            .Value(Model.EndDate)
           )
        @Html.ValidationMessageFor(m => m.EndDate)
</div>

Cancel remove operation within onRemove event

Is there a way to cancel item remove in the remove event handler? Something similar to preventDefault()

Kendo Dropdown List Inside Panel Bar Not Initializing After CSP

Problem:
After enabling Content Security Policy (CSP), Kendo DropDownLists inside a PanelBar fail to initialize. On page load:
• The DropDownList renders as a plain input box.
• PanelBar items appear empty, and data binding does not happen.
• JavaScript access to the DDL fails.

Scenario:
• ASP.NET MVC Razor.
• Dropdown Lists inside PanelBar content templates.
• Worked fine before CSP; now initialization and binding fail.

Expected Behavior:
• DDL should initialize and bind data on content load even with CSP.
• PanelBar items should display properly.

Example:

@(
Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.Items(panelbar =>
{
panelbar.Add().Text("Note : Please fill all the input")
.Content(@<text>
@(Html.Kendo().DropDownList()
.Name("dropdown")
.OptionLabel("Please Select")
.OptionLabelTemplate("<span style='color:dimgrey;font-size:10px;font-weight:bold'>Please Select</span>")
.DataValueField("id")
.DataTextField("Text")
.Template("#:id # - #:datacolumn # - #:datecolumn #")
.DataSource(source=>{source.Read(read=>{read.Action("action","controller");});})
.Events(e=>{e.Select("onselect");})
)
</text>
);

Thanks,

Anupriya. R

Kendo Grid Filter throwing javascript error when bound to remote api filter data

hi, I am trying to populate Kendo MVC Grid filter with remote api data but getting js error. Could you help on fixing it? Please find the code snippets and js error below

C# Grid:

@(Html.Kendo().Grid<AggregateModel>()
...
.columns.Bound(e => e.AccountType)
       .Title("Account Type").Width(100)
       .Filterable(f => f.Multi(true).Search(true).DataSource(ds => ds
          .Read(read => read.Type(HttpVerbs.Get).Url("api/AccountTypeFilters")
          .Data("{ field: 'AccountType' }"))));

API Response (api/AcountTypeFilters) : with Text and Value fields

{
    "$id": "1",
    "AccountType": [
        {
            "$id": "2",
            "Disabled": false,
            "Group": null,
            "Selected": false,
            "Text": "Client",
            "Value": "0"
        },
        {
            "$id": "3",
            "Disabled": false,
            "Group": null,
            "Selected": false,
            "Text": "House",
            "Value": "1"
        }
    ]
}

js error:

Uncaught TypeError: n.slice is not a function
    at init.success (kendoscripts.min.js?v=2-0-289-1:1:101049)
    at success (kendoscripts.min.js?v=2-0-289-1:1:100001)
    at i.success (kendoscripts.min.js?v=2-0-289-1:1:88721)
    at v (headerscripts.min.js?v=2-0-289-1:14:35030)
    at Object.fireWith [as resolveWith] (headerscripts.min.js?v=2-0-289-1:14:35775)
    at b (headerscripts.min.js?v=2-0-289-1:14:74792)
    at XMLHttpRequest.<anonymous> (headerscripts.min.js?v=2-0-289-1:14:79897)
    at XMLHttpRequest.wrapFn (webcomponents.js?v=2-0-289-1:2996:35)
    at _ZoneDelegate.invokeTask (webcomponents.js?v=2-0-289-1:2626:171)
    at ZoneImpl.runTask (webcomponents.js?v=2-0-289-1:2425:37)

Kendo.Mvc, Version=2022.1.412.0
Kendo UI js v2018.3.911

Icon on dialog action buttons not showing after upgrading to 2025.1.227

I had the code below in my dialog to show icons in the action buttons. It worked on version 2023 R3. After upgrading to 2025.1.227, all it shows is the code (<span>) text.

Code:

@(Html.Kendo().Dialog()
    .Name("LetterPreviewDialog")
    .Title("Letter Preview")
    .Closable(true)
    .Modal(true)
    .ButtonLayout("normal")
    .Visible(false)
    .Events(e=>e.Close("OnLetterPreviewClose"))
    .Actions(a =>
    {
        a.Add().Text("<span class='k-icon k-font-icon k-i-envelop'></span> Send Letter").Primary(true).Action("SendEmail");
        a.Add().Text("<span class='k-icon k-font-icon k-i-cancel'></span> Cancel").Action("CancelEmail");
    }))

Before:

After:

Custom Command not working after setOptions

We have this Command:

columns.Command(c =>
{
    c.Custom("Delete").Text(" ").Click("onClick").IconClass("k-icon k-i-trash").HtmlAttributes(new { @title = Resource.DELETE });
})

And we have this function to set the grid state:

function loadOptions() {
    var options = sessionStorage["userTable-options"];
    
    if (options) {
        var grid = $('#userTable').data('kendoGrid');
        var toolBar = $("#userTable .k-grid-toolbar").html();  // https://stackoverflow.com/questions/27717575/kendo-mvc-persist-and-load-grid-buttons

        var optionsJSON = JSON.parse(options);

        // https://docs.telerik.com/kendo-ui/knowledge-base/grid-persist-customized-filter
        var StatusTranslated = optionsJSON.columns.filter(function (c) { return c.field === "StatusTranslated.Text"; })[0];

        StatusTranslated.filterable = {
            ui: $.proxy(filterDropDownField, { field: 'StatusTranslated' })
        };

        grid.setOptions(optionsJSON);
        $("#userTable .k-grid-toolbar").html(toolBar);
        $("#userTable .k-grid-toolbar").addClass("k-grid-top");
    }
}

Before setting the grid state the button executes successfully. After executing setOptions the button does not work anymore.

How do we combine the possibility to save/load the grid state, and the usage of custom buttons in the grid?

Kind regards.

set defaults for grid filters drop down

How can I influence the drop down filters so that both start with the operator 'Contains' and the logic between them as 'or'.

They should be able to change them after initial setting. i would like it to look like the enclosed image to start.

Kendo Grid columnMenuInit and Filter Operator Restore Not Firing After Sort

Hi,

I’m using the Kendo UI Grid with column menu filters. My requirement:

Let the user pick a filter operator (e.g., contains, equals).
Don’t apply a filter if the value is empty.
Keep the operator visible every time the 3-dot menu opens, even after sorting.

What I’ve tried:

columnMenuInit → Works first time, but doesn’t fire again for the same column.
Popup open inside columnMenuInit → Fires once, but after sorting the grid, it doesn’t trigger again.
Delegated jQuery click handler → Works reliably, but feels like a hack.

Minimal repro (MVC wrapper):


@(Html.Kendo().Grid<MyModel>()
    .Name("Invoices")
    .Columns(c => {
        c.Bound(x => x.InvoiceNumber);
        c.Bound(x => x.CustomerName);
    })
    .Sortable()
    .Filterable(f => f.Extra(false))
    .ColumnMenu(m => m.Filterable(true))
    .Events(e => e.ColumnMenuInit("onColumnMenuInit"))
)

<script>
function onColumnMenuInit(e) {
    var popup = e.container.data("kendoPopup");
    if (popup) {
        popup.bind("open", function () {
            var ddl = e.container.find("select[title='Operator']").data("kendoDropDownList");
            if (ddl) ddl.value("contains"); // operator only, no value
            e.container.find("input[type=text]").val("");
        });
    }
}
</script>

Issue:

The operator shows correctly the first time.
After sorting and reopening the menu, the operator reset logic does not run.

Questions:

Is there an official event I can use to run logic every time the column menu opens?
What’s the recommended way to restore operator state when no filter value is applied?

Thanks!

Kendo Grid Bool Filter UI Issue

How can I fix this, surely they are meant to be side by side, Ideally I would like to change the is true to labels also?

DropDownButton not available in older version of Kendo UI for ASP.NET MVC

Hello Telerik support team,

I have an ASP.NET MVC project made in .NET Framework 4.6.2

It is using a local directory with files of version 2022.2.510 of Kendo UI. These are the contents of /lib/KENDOUIMVC/2022.2.510.545 of my project:

Kendo.Mvc.dll*  cs-CZ/            el-GR/   fr-FR/  pl-PL/  ru-RU/        tr-TR/
Kendo.Mvc.xml   da-DK/            es-ES/   he-IL/  pt-BR/  sk-SK/        uk-UA/
ar-AE/          de-DE/            export/  it-IT/  pt-PT/  spreadsheet/  zh-CN/
bg-BG/          distribution.xml  fr-CA/   nl-NL/  ro-RO/  sv-SE/

I want to make use of the DropDownButton component in this project, and I tried the example code from this page:

https://demos.telerik.com/aspnet-mvc/dropdownbutton

I get this error however:

'WidgetFactory<InvoiceFilterViewModel>' does not contain a definition for 'DropDownButton' and no accessible extension method 'DropDownButton' accepting a first argument of type 'WidgetFactory<InvoiceFilterViewModel>' could be found (are you missing a using directive or an assembly reference?)

So I believe the DropDownButton is not available yet in the version of Kendo that I am using.

My questions;

1. Is it possible to upgrade my version of Kendo in the same way as have already? I tried looking in the downloads section, but I don't see the bundle of files I need. The source code bundles contain many different files. If this is not possible, can you then please tell me the alternatives?

2. Is it possible to see which versions a component is supported for on the Telerik documentation website?

I already applied an alternative using the DropDownList, but this does not really satisfy the requirements as a DropDownButton would. Note that upgrading the .NET version of this project is (sadly) not a possibility for me at the moment.

And a little side note, it seems this link is broken when clicking on the red "Documentation" button:

Page with the button: https://www.telerik.com/aspnet-mvc/dropdownbutton

Broken link: https://www.telerik.com/aspnet-mvc/documentation/getting-started

Kendo Grid PDF export duplicates current page instead of exporting all pages

Hi,

I'm using ASP.NET MVC with Kendo UI v. 2024.2.514 and I'm running into a weird issue when exporting a grid to PDF.

When I trigger the export, the PDF output shows only the current page of the grid duplicated X number of times.

For example, if I'm on page 2 of a 10-page grid, instead of exporting all ten pages, the PDF contains page 2 repeated 10 times.

I'm enabling the PDF export like this:

.ToolBar(tools => tools.Pdf())
.Pdf(pdf => pdf.AllPages())

Has anyone run into this issue or have any suggestions on what I'm missing here?

Thanks!

Client Template Handler not able to populate kendo dropdownlist.

Hi,

I am using Web app with mvc. We are using Deferred Script File to remediate CSP (content security policy).

For that reason instead of Client Template i am using Client Template Handler for one of the column which is a dropdownlist.

Whenever Grid is loaded with data, I can see the selected dropdown values in the grid but when i try to update the dropdown value

its opening as a text box and showing value as [object object].

columns.Bound(p => p.Studendetails).ClientTemplateHandler("getname")

function getname(data) {
return data.Studendetails ? data.Studendetails.Name : '';
}

Getting Uncaught TypeError: d.HierarchicalDragAndDrop is not a constructor when trying to use DragandDrop

Trying to use DragandDrop on 2 treeviews to drag from one tree to another. I believe I have all JS components loaded properly but still getting this error the tree data will load otherwise with DragandDrop set to false. Any help or direction would be appreciated. Full Error can be seen below

jquery.min.js:2 Uncaught TypeError: d.HierarchicalDragAndDrop is not a constructor
    at init._dragging (kendo.treeview.js:2490:2)
    at new init (kendo.treeview.js:2490:2)
    at HTMLDivElement.<anonymous> (kendoLayout.min.js:1:42737)
    at ce.each (jquery.min.js:2:3129)
    at ce.each (jquery.min.js:2:1594)
    at ce.kendoTreeView (kendoLayout.min.js:1:42713)
    at HTMLDocument.<anonymous> (RolesPermissions:933:116)
    at e (jquery.min.js:2:27028)

Kendo grid - Cancel request

Hello there,
i have a project with MVC Asp.Net, Kendo v. "2024.4.1112.462" and would like to
- load data into grid, the data is returned by MVC Controller
- the spinner with the "loading data in progress" should never appear
- so the user can "play" on the grid header filters while loading data is ongoing
- when the user clicks on "apply" on grid header filter, the previous request must be canceled to run the new request with latest filters applied, in this way the c# CancellationToken is Canceled on server side.

Can you tell me how to "cancel" the actual http request from the kendo grid (client) and execute the new one, as described in the last point?

thanks in advance

Hyperlink in child/detail grid column

Hi Team,

I am trying to make child/detail grid column as hyperlink but i am getting not defined error in console.
Can you please guide on this?
Below is my code & PFA the error screenshot.

Thanks
Chandan Gupta

columns.Bound(c => c.Inbound).ClientTemplate(
    "<a href='" +
    Url.Action("ReadFeedFile", "TreasuryFeeds") +
    "?fpath=\"#= Inbound #\"&archFileName=#=Archive#'" +
    ">#=Inbound#</a>"
).Title("File Name").Width(120).HtmlAttributes(new { style = "text-align:center;font-size: 10px;font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;" });

When Filtering the data into Kendo grid then if no data found then something coming into Chinese language.

This is my code.

@using apexanalytix.app
@using apexanalytix.app.HtmlHelperExtensions
@using FirstStrike.VendorPortal.SharedDataContracts.VendorProfile
@using Kendo.Mvc.UI
@using Portal.BusinessObjects.Common;
@inject VendorProfileHelper vendorProfileHelper
@inject SysSettingHelper sysSettingHelper

@{
var currentCulture = System.Globalization.CultureInfo.CurrentCulture.ToString();
}
<script>
$(function () {

kendo.culture("en-US");
});
</script>
<style>
.rowHighlighter {
background-color: #ff0000;
color: #fff !important;
}
.rowHighlighter:hover {
background-color: #e95652 !important;
color: #fff !important;
}
.rowHighlighter.k-state-selected {
background-color: #009ec9 !important;
}
.rowHighlighter.k-state-selected td{
background-color: #009ec9 !important;
}
.rowHighlighter td a {
color: #fff !important;
}
.k-filter-row label > input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 2px;
margin-left: 3px;
margin-right: 10px;
}

.k-dropdown-wrap {
max-height: 27px;
}

.k-grid td {
line-height: 1em;
}

.k-grid .k-grid-header .k-header .k-link {
height: auto;
}

.k-grid .k-grid-header .k-header {
white-space: normal;
}

.vendor-controls {
cursor: pointer;
margin: 0 auto;
width: 20px;
height: 1.2em;
max-height: 1.2em;
padding: 6px;
}
</style>
<div style="display:none">
<ul id="vendor-search-grid-context-menu">
<li id="copyText">@Html.Raw("Copy Text".Translate())</li>
</ul>
</div>
@{
var excludedFieldSet = ViewBag.ExcludedFields as HashSet<string> ?? Enumerable.Empty<string>();
var choosenColumns = ViewBag.ChoosenColumns as HashSet<string> ?? Enumerable.Empty<string>();
var availableStatus = (System.Collections.IEnumerable)ViewBag.AvailableStatus;
var moduleName = ViewBag.ModuleName;
var registrationType = (System.Collections.IEnumerable)ViewBag.RegistrationType;

int defaultGridSize = int.TryParse(ViewData["DefaultGridSize"]?.ToString(), out int gridSize) ? gridSize : 20;
var partialViewPath = "~/Areas/Registration/Views/PartialViews/VenderProfilesAction.cshtml";

var multipleEditWindowErrorMessage = "Cannot save vendor data with multiple windows open. Please edit one vendor at a time".Translate();
}
<div class="k-grouping-header" style="padding-top: 10px; border-color: var(--button-border-color); border-width: 1px; border-style: solid; border-radius: 3px;width: calc(100% - 50px)">
@await Html.PartialAsync(partialViewPath)
</div>
@(Html.DataGrid<VendorSearchResult>(false)
.Name("vendorProfileGrid")
.HtmlAttributes(new { @style = "height: 500px;width: calc(100% - 50px)" })
.Reorderable(r => r.Columns(true))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Row))
.Resizable(r => r.Columns(true))
.Pageable(p =>
{
p.Refresh(true);
p.PageSizes([25, 50, 75, 100, 1000, 5000, 10000]);
})
.Events(_ => { })
.Columns(columns =>
{
columns.Bound(v => v.VR_Id).Title("VR ID".Translate()).ClientTemplate("#= VR_Id === 0 ? '' : VR_Id #").Width(180).Lockable(false).Locked(true).Filterable(f => f.Cell(cell => cell.Template("VendorProfile.decimalToIntFilter"))).Visible(vendorProfileHelper.IsVrIdDisplayInGrid && choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.VR_Id), StringComparison.OrdinalIgnoreCase))).HeaderHtmlAttributes(new { @class = "NumericHeaderAlign" }).HtmlAttributes(new { @class = "NumericRowAlign" });
columns.Bound(v => v.VendorId).Title("Vendor Number".Translate()).ClientTemplate("#= VR_Id === 0 ? '' : (VendorId || '') #").Lockable(false).Locked(true).Width(150).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.VendorId), StringComparison.OrdinalIgnoreCase))).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.CompanyName).Title("Company Name".Translate()).Width(220).Lockable(false).Locked(true).ClientTemplate("#= VR_Id === 0 ? CompanyName : VendorProfile.buildCompanyNameLink(CompanyName, '" + @Url.Action("GetCompanyUrl") + "')#").Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.CompanyName), StringComparison.OrdinalIgnoreCase))).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.CompanyNameDBA).Title("Company Name DBA".Translate()).Width(220).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.CompanyNameDBA), StringComparison.OrdinalIgnoreCase))).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.VendorControls).Title("Vendor Controls".Translate()).Width(140)
.ClientTemplate("#= VendorControls ? '<div onclick=\"VendorProfile.openValidationResultDialogWindow(this)\"><span class=\"fal fa-check-circle validation-pass-icon-grid\"></span></div>':'<div onclick=\"VendorProfile.openValidationResultDialogWindow(this)\"><span class=\"fal fa-times-circle validation-fail-icon-grid\"></span></div>' #")
.Filterable(filterable => filterable.Messages(m => m.IsFalse("Fail".Translate()))
.Messages(m => m.IsTrue("Pass".Translate()))).Visible((ViewBag.IsDisplayVendorControlInGrid ?? true) && choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.VendorControls), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "IconHeaderAlign" })
.HtmlAttributes(new { @class = "IconRowAlign" });
columns.ForeignKey(v => v.Status, availableStatus, "Value", "Name")
.Title("Status".Translate())
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" })
.ClientTemplate("#= VR_Id === 0 ? 'DISCOVERY' : VendorProfile.getGridTextByValue(Status,'Status') #")
.Width(180)
.Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.Status), StringComparison.OrdinalIgnoreCase)))
.HtmlAttributes(new { @data_displayToolTip = "True", @data_column_name = nameof(VendorSearchResult.Status), @class = "StringRowAlign" });
columns.Bound(x => x.Status_Desc).Title("Status".Translate()).ClientTemplate("#= VR_Id === 0 ? 'DISCOVERY' : Status_Desc #").Hidden(true).IncludeInMenu(false).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(x => x.RegistrationType_Desc).ClientTemplate("#= RegistrationType_Desc == null ? '' : RegistrationType_Desc.toUpperCase() #").Title("Registration Type".Translate()).Hidden(true).IncludeInMenu(false);
columns.ForeignKey(v => v.SubStatus, availableStatus, "Value", "Name").ClientTemplate("#= SubStatus == null ? '' : VendorProfile.getGridTextByValue(SubStatus,'SubStatus') #").Title("Sub Status".Translate()).Width(140).Visible((ViewBag.IsDisplaySubStatusColumnInGrid ?? false) && choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SubStatus), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.ForeignKey(v => v.RegistrationType, registrationType, "Value", "Name").ClientTemplate("#= RegistrationType == null ? '' : VendorProfile.getGridTextByValue(RegistrationType,'RegistrationType').toLocaleUpperCase() #").Title("Registration Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.RegistrationType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.SupplierType).Title("Supplier Type".Translate()).Width(200).Visible( choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SupplierType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.SupplierSubType).Title("Vendor Category".Translate()).Width(140).Visible( choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SupplierSubType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.SupplierSubType).Title("Vendor Category".Translate()).Width(140).Visible( choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SupplierSubType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.BusinessUnit).Title("Business Unit".Translate()).Width(140).Visible( choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BusinessUnit), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.ProjectCode).Title("Project Code".Translate()).Width(140).Visible(sysSettingHelper.IsProjectCodeDrivenWorkflowEnabled && choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.ProjectCode), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.AddressTypeDescription).Title("Address Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.AddressTypeDescription), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.PayeeName).Title("Payee Name".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.PayeeName), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.PayeeDBA).Title("Payee DBA".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.PayeeDBA), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.InvitedBy).Title("Invited By".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.InvitedBy), StringComparison.OrdinalIgnoreCase)))
.HtmlAttributes(new { @data_displayToolTip = vendorProfileHelper.IsUpdatedByToolTipToShowName, @data_column_name = nameof(VendorSearchResult.InvitedBy), @class = "StringRowAlign invited-by-tooltip" }).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" });
columns.Bound(v => v.CreatedDate).Format("{0:G}").Title("Date Registered".Translate()).Width(180).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.CreatedDate), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "DateHeaderAlign" }).HtmlAttributes(new { @class = "DateRowAlign" });
columns.Bound(v => v.UpdatedBy).Title("Updated By".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.UpdatedBy), StringComparison.OrdinalIgnoreCase)))
.HtmlAttributes(new { @data_displayToolTip = vendorProfileHelper.IsUpdatedByToolTipToShowName, @data_column_name = nameof(VendorSearchResult.UpdatedBy), @class = "StringRowAlign" })
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" });
columns.Bound(v => v.UpdatedDate).Format("{0:G}").Title("Last Update".Translate()).Width(180).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.UpdatedDate), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "DateHeaderAlign" }).HtmlAttributes(new { @class = "DateRowAlign" });
columns.Bound(v => v.ProfileType).Title("Profile Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.ProfileType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.IndividualType).Title("Individual Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.IndividualType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.GlobalSmartVMNumber).Title("Global SmartVM Number".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.GlobalSmartVMNumber), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.ParentSmartVMNumber).Title("Parent SmartVM Number".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.ParentSmartVMNumber), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.SmartVMBusinessEntityType).Title("SmartVM Business Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SmartVMBusinessEntityType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.SmartVMBusinessEntitySubType).Title("SmartVM Business Subtype".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SmartVMBusinessEntitySubType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.BusinessEntityType).Title("Business Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BusinessEntityType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.TaxClassification).Title("Tax Classification".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.TaxClassification), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.IncomeType).Title("Income Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.IncomeType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.BusinessOwnershipType).Title("Business Ownership Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BusinessOwnershipType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.VendorRequestType).Title("Vendor Request Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.VendorRequestType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.LocalLanguageCompanyCountry).Title("Local Language Company Country".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.LocalLanguageCompanyCountry), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.LocalLanguageCompanyName).Title("Local Language Company Name".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.LocalLanguageCompanyName), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.LocalLanguageCompanyNameDBA).Title("Local Language Company NameDBA".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.LocalLanguageCompanyNameDBA), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.AddressInfo).Title("Address Info".Translate()).Width(240).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.AddressInfo), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.BankName).Title("Bank Name".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BankName), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.BankAddress).Title("Bank Address".Translate()).Width(240).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BankAddress), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.PersonName).Title("Person Name".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.PersonName), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.ContactType).Title("Contact Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.ContactType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.Email).Title("Email".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.Email), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.PhoneInfo).Title("Phone Info".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.PhoneInfo), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.TaxType).Title("Tax Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.TaxType), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Bound(v => v.TaxIdNumber).Title("Tax Id Number".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.TaxIdNumber), StringComparison.OrdinalIgnoreCase)))
.HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
columns.Command(command => { command.Custom("Delete").Visible("VendorProfile.deleteVendorProfileRowVisible").Text("Delete".Translate()).Click("VendorProfile.deleteVendorProfile"); }).Width(200).Visible((ViewBag.IsDisplayDeleteColumnInGrid ?? false) && !excludedFieldSet.Contains(nameof(VendorSearchResult.IsDeleteAllowed)))
.HeaderHtmlAttributes(new { @class = "IconHeaderAlign" }).HtmlAttributes(new { @class = "IconRowAlign" });
})
.Sortable()
.Events(e => { e.DataBound("VendorProfile.vendorProfileGridDataBound").Change("VendorProfile.onVendorProfileGridChange").ExcelExport("VendorProfile.vendorProfileGridDataExcelExport"); })
.AutoBind(true)
.Editable(e => { e.Enabled(false); })
.DataSource(datasource => datasource
.Custom()
.Type("aspnetmvc-ajax")
.PageSize(defaultGridSize)
.Transport(t => { t.Read(r => r.Url(Url.Action("ReadVendorProfiles", new { ModuleName = moduleName })).Data("VendorProfile.getVendorProfileAdditionalData")); }
)
.Schema(s => s
.Model(model => { model.Id(request => request.VendorSearchResultId); })
.Data("Data")
.Total("Total")
)
.ServerSorting(true) // as we are pulling 2000 records at a time from service, don't use server side sorting, paging, filtering
.ServerPaging(true) // Once moved to odata service, we can turn it on
.ServerFiltering(true)
.ServerGrouping(false)
.ServerAggregates(false)
.Events(events => events.Error("VendorProfile.onGridError")
.RequestEnd("VendorProfile.onGridRequestEnd")
.RequestStart("VendorProfile.onGridRequestStart")
.Change("VendorProfile.onVendorProfileGridChange"))
)
)

<script>
window.multipleEditWindowErrorMessage = '@multipleEditWindowErrorMessage';
</script>

this is my Layoutm Code

@using System.Threading
@using apexanalytix.app.HtmlHelperExtensions
@using apexanalytix.app.ViewComponents
@using apexportal.Services.Abstractions
@using Microsoft.AspNetCore.Mvc.Localization
@using Portal.BusinessObjects.Common
@model Portal.Models.MvcProfilePageModel
@inject SysSettings SysSettings
@inject IViewLocalizer Localizer

<!DOCTYPE html>
<html lang="@Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName">
<head id="Head1">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" charset="utf-8"/>
<style>
body {
min-width: 850px;
width: 100%;
}

.field-validation-valid {
padding: 0 !important;
margin: 0 !important;
display: none !important;
}

/* Int, Long, Percentage */
.NumericHeaderAlign {
text-align: center !important;
}

/* Int, Long, Percentage */
.NumericRowAlign {
text-align: right;
}

/* Date and Date + Time */
.DateHeaderAlign {
text-align: center !important;
}

/* Date and Date + Time */
.DateRowAlign {
text-align: center;
}

/* Alpha Numeric */
.StringHeaderAlign {
text-align: left !important;
}

/* Alpha Numeric */
.StringRowAlign {
text-align: left;
}

/* Images, Icons */
.IconHeaderAlign {
text-align: center !important;
text-overflow: clip !important;
}

/* Images, Icons */
.IconRowAlign {
text-align: center !important;
text-overflow: clip !important;
}
</style>

<link href="/Content/Themes/uilightness/jqueryui" rel="stylesheet" type="text/css"/>
<link href="/Content/VendorRegistrationMaster" rel="stylesheet" type="text/css"/>

<script src="/Styles/fa-pro-5_15_1/js/all.min.js"></script>
@{
var englishPageTitle = SysSettings.SiteContent[ValueName.PageTitleBase];
var pageTitle = Localizer[englishPageTitle.Value ?? string.Empty].Value + " - " + ViewBag.Title;
}

<title id="Title1">@pageTitle</title>
</head>

<body style="width: 100%">



<div class="modelbg" style="display: none;"></div>
<div id="cloneMenu" style="display: none;">
<div id="cloneContent"></div>
</div>
<div id="fadeSection">
<div id="coreDialog" style="display: none">
</div>
</div>
<input type="hidden" id="hdnThemeMode"/>
@{
var enableAutoComplete = SysSettings.Display[ValueName.EnableBrowserAuto_complete].GetValue<bool>();
var cultureCode = HtmlExtensions.GetFullCultureCode();
}
<form id="Form1" autocomplete="@(enableAutoComplete ? "on" : "off")">
<script src="/bundles/MsAjaxJs"></script>
<script src="/bundles/jquery"></script>
<script src="/bundles/jqueryui"></script>
<script src="/Scripts/kendo/2024.3.1015/kendo"></script>
<script src="/bundles/WebFormsJs"></script>

<script src="/bundles/PortalMaster"></script>
<script src="/bundles/jqueryval"></script>
<script src="/bundles/KendoWindowManager"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"
type="text/javascript"></script>
<script src="/Scripts/kendo/2024.3.1015/messages/kendo"></script>
<script src="/Scripts/kendo/2024.3.1015/cultures/kendo"></script>
<script src="~/Scripts/kendo/2024.3.1015/cultures/kendo.culture.@(cultureCode).min.js" type="text/javascript"></script>
<script src="~/Scripts/kendo/2024.3.1015/messages/kendo.messages.@(cultureCode).min.js" type="text/javascript"></script>
<script>
kendo.culture("@(cultureCode)");
</script>

<div id="body">

@{ await Html.RenderPartialAsync("~/Views/Shared/_Header.cshtml", ViewData); }
@{ await Html.RenderPartialAsync("~/Views/Shared/_ThemeMode.cshtml", ViewData); }
@{ await Html.RenderPartialAsync("~/Views/Shared/_GridRowDeleteDialog.cshtml", null); }
@{ await Html.RenderPartialAsync("~/Views/Shared/_popupDialog.cshtml", null); }

<div class="container-fluid landing-container">
<div class="sidebar border-right bg-body-tertiary">
<div class="sideMenubtm">
@{
await Html.RenderPartialAsync("~/Views/Shared/_MainMenu.cshtml", ViewData);
}
</div>

</div>
<div class="main-content-section">
<div id="bodytitle">
@{ await Html.RenderPartialAsync("~/Views/Shared/_Breadcrumb.cshtml", ViewData); }
</div>
<div id="bodynews">
@if (false)
{
await Component.RenderActionAsync("GetWelcomeBanner", "Dashboard");
}
</div>
<div style="padding: 0 24px; margin-bottom: 100px">
@RenderBody()
@await Component.ExtendKendoValidationsAsync()
<script type="text/javascript">
$(document).ajaxError(function (xhr, props) {
if (props.status === 401) {
location.reload();
}
});
</script>
</div>
@if (ViewBag.StartSessionExpire != false)
{
await Html.RenderPartialAsync("~/Views/Shared/_SessionExpireNotification.cshtml", ViewData);
}
</div>
</div>
@{
if (SysSettings.HomePage[ValueName.DisplayFooter].GetValue<bool>() && !(Model?.HideFooter ?? false))
{
<partial name="~/Views/Shared/_Footer.cshtml"/>
}
}
</div>

</form>

<script type="text/javascript">

var commonBaseUrl = '@Url.Content("~/")';

function Translate(error) {
try {

let url = '/Registration/Common/TranslateJSStrings';
$.ajax({
type: "POST",
async: false,
url: url,
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
Message: error
}),
success: function (result) {
error = result.d;
}
});

return error;

} catch (ex) {
}
}

</script>

@Html.RenderUnobtrusiveAjaxScript()

@await Component.GoogleAnalyticsAsync(SysSettings.SiteConfiguration[ValueName.AnalyticsId].GetValue<string>(), Context.User.Identity?.GetUserId())

</body>
</html>

this is my Error.

DataSourceRequest serialization and deserialization

Good morning,
i am using MVC.ASP net in my project and i'm trying to send the DataSourceRequest to a service , via rabbitmq.

the message should contains all the request filters set in the ui in order to create an excel report. i have tried to use the System.Text.Json serialization but it's not working properly. it serializes only the first level props.
i have found a ".ToJson" extension but it's returning a Dictionary<string, object>, not usefule here.

can you suggest how to serialize the DataSourceRequest in Json format? with all nested and recursive properties?

the filters can be about dates, strings, combobox, and so on

thanks in advance

Grid - Date picker filter - "Is after On" and "Is before" are inverted if null

good morning,
i am facing a strange behavour with the datetime filter in grid.
when i set a date on the second filter about the "Is before" and none in the "Is after on", launch the grid data and re-open the date filter, values are inverted, see attachments "before" and "after".
can you tell me how to block the filter positions? "is after on" set always as first and "Is before" alwasy set as second.

thanks in advance

Setting initial value of TimePicker

Hi Guys

This stupid little issue is taking up way way too much time for me to resolve..

I am setting a timepicker as follows:

@Code
With Html.Kendo().TimePicker()
.Name("1Open")
.Events(Function(events) events.Change("settime"))
.Value(New TimeSpan(0, Model.Hours(1).open, 0))
.Min(New TimeSpan(0, 0, 0))
.Max(New TimeSpan(0, 0, 0))
.Render()
End With
End Code
</td>

The result is as per the attached screen shot.

It 'looks like' the values are set right as the timepickers have the correct times , but when you drop down, it always starts at midnight and the current time is not highlighted. I assume the timepicker needs the value to be set with AM or PM .. but that can't be done from a TimeSpan or a datetime.. the am pm always has dots ( a.m. , p.m.)

If tried adding .Format("HH:mm:tt") and .ParseFormats(New String() {"HH:mm:tt"}) etc, but I just can't get it to work. ( I've tried allot more formats than just these, I've tried "HH:mm tt" ,"HH:mm t.t." ( cause it's the dots around the am pm which seems to be whats stopping.))

Feeling a bit stupid having to ask this as it seems to be a straightforward thing.

I'm sure I will have a Face palm moment when shown the error in my ways.. but I've got to the point of not caring! :)

Cheers

Rob

MultiColumnComboBoxFor - Showing DataValue instead of DataText with large dataset

We have use a MultiColumnComboBoxFor to select from a large dataset > 100.000 records.

At the time of selecting a record the DataText is correctly displayed.

But when we refresh the page the ComboBox behaves differently for records which appear early in the dataset, and records that come later.

The early records show the DataText correctly, records which come later in the dataset do not; they show their Id (DataValue).

If we implement virtualization, the Combobox displays the correct DataText in both cases, but seemingly with an extra server roundtrip?

Is this expected behaviour? Is there anything we could improve while using the MultiColumnComboBox with larger datasets?

Kind regards.

How to add a Menu to a TreeList?

Hi there,

In my grids, I have a column with a menu :

columns.Template(@<text></text>).Width(106).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
Html.Kendo().Menu().Direction(MenuDirection.Left)
.Name("menu_#=AccountId#")
.Items(its =>
{
its.Add().Text("Functions:").Items(nested =>
{
nested.Add().Text(importFilesText).Action(importFilesAction, "Accounts", new { id = "#=AccountId#", cid = Model.CompanyId, returnUrl = returnUrl});
});

})
.ToClientTemplate().ToHtmlString()
);
})

But in the TreeList there is no ClientTemplate

I tried using the TemplateId

And I can get the menu to display, but it is cut of inside the treelist.

In the old days with the grid we used to change the css of the parent with overflow-y:display !important; but that does not seem to work.

Any ways this can be accomplished in the treelist - next step is the items in the list are depending on the content of the row ...

Best regards,

- René

Datasource request fires twice on MultiSelect

I have a simple multiselect like so:

@(Html.Kendo().MultiSelectFor(x => x.CourseId)

.DataValueField("Id")

.DataTextField("Name")

.Placeholder("Select Course...")

.ClearButton(false)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetCourseCodeList", "Home");

})

.ServerFiltering(true);

})

.MaxSelectedItems(1)

.HtmlAttributes(new { @class = "" }))

When I enter text, the search is submitted once with the text entered, then a second time with the Placeholder text, or if no Placeholder, with empty string.

public JsonResult GetCourseCodeList(string text, int categoryId=0)

{

var items = _courseData.Where(x =>

x.Name.Contains(text) &&

(categoryId == 0 || x.CategoryId == categoryId)).OrderBy(x => x.Name).ToList();

var userinput = text;

var result = new JsonResult

{

JsonRequestBehavior = JsonRequestBehavior.AllowGet,

Data = items

};

return result;

}

A sample project replicating the issue is here : https://github.com/SteveWortho/TLCKendoTest

It must be something simple I am doing wrong - any advice appreciated.

Using;

VS2017 Pro Version 15.5.1

KendoUI MVC 2017.3.1026

Chrome Version 63.0.3239.132 or Microsoft Edge or FireFox. Issue is repeatable.

So I must be firing the onChange event a second time with some of this configuration maybe?

But it is such a simple example.

Thanks in advance,

Steve