UI for ASP.NET Core Forum RSS

Latest Online Resources about UI for ASP.NET Core

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

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/diagrams-and-maps/diagram/tooltips
Summary: Learn how to add and configure hover tooltips for the Telerik UI for ASP.NET Core Diagram HTML Helper to display context data for shapes and connections. You’ll initialize a Tooltip for the Diagram container, target shape/connection elements with filter selectors, and supply content via templates or a JavaScript function that can access the underlying data item, with guidance on positioning and show/hide behavior.

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/diagrams-and-maps/diagram/accessibility/overview
Summary: This article explains how to configure and use the Telerik UI for ASP.NET Core Diagram to meet accessibility requirements such as WCAG 2.2 AA and Section 508. It covers supported WAI-ARIA semantics, focus and keyboard behavior, screen-reader considerations, color-contrast/theming guidance, and known limitations so you can validate and ship an accessible Diagram.

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/diagrams-and-maps/diagram/accessibility/keyboard-navigation
Summary: Use this article to implement and test keyboard navigation for the Telerik UI for ASP.NET Core Diagram (HTML Helper). It defines the focus order and the exact key bindings for focusing the canvas and tools, selecting shapes and connectors, moving and resizing elements, editing text, panning/zooming, and deleting, and describes the component’s WAI-ARIA attributes to help you verify accessibility.

Blog: https://www.telerik.com/blogs/how-to-organize-minimal-apis
Summary: Organize ASP.NET Core Minimal APIs by moving endpoint mappings out of Program.cs into feature-based static classes via IEndpointRouteBuilder extension methods, and use MapGroup route groups to apply shared settings like route prefixes, authorization, versioning, rate limiting, and OpenAPI/Swagger tags. This article gives you practical patterns to keep the minimal host small and make endpoints easier to discover, test, and maintain.

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

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

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/grid/smart-grid
Summary: Learn how to enable and configure Smart Grid mode in the Telerik UI for ASP.NET Core Grid (HTML Helpers) to auto-generate columns, titles, formats, editors, and validation from your strongly typed model and data annotations. The article covers prerequisites, setup, and supported features (data binding, paging, sorting, filtering, editing), and shows how to override or extend the generated configuration with custom columns, templates, command buttons, and editor widgets when you need finer control.

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/conversational-ui/promptbox/modes
Summary: Learn which PromptBox modes are available in Telerik UI for ASP.NET Core Conversational UI and how each mode affects rendering and user interaction. You’ll see how to set the Mode option in the ASP.NET Core HTML Helper configuration and choose the right mode for your scenario, with code examples and notes on behavior differences.

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/conversational-ui/promptbox/tools
Summary: Learn how to configure the PromptBox tools in Telerik UI for ASP.NET Core (HTML Helper, Conversational UI): enable built-in tools (for example, Send/Submit and Clear) and add custom tools. You’ll see how to declare tools via the Tools configuration in Razor, set icons and placement, handle tool click events, and wire tool actions into prompt submission and your application logic.

Article: https://www.telerik.com/aspnet-core-ui/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 Core (HTML Helper) and shows how to wire JavaScript handlers via the .Events(...) configuration. It covers open/close lifecycle hooks, button click and value-change events, and the event arguments you can use to read the input value and selected action so you can implement validation, logging, and custom workflows.

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/smartpastebutton/events
Summary: This article describes the client-side events of the SmartPasteButton in Telerik UI for ASP.NET Core and how to subscribe to them via HTML Helpers or Tag Helpers with JavaScript handlers. You learn when paste-related events fire, what the event arguments contain, and how to cancel the default behavior or handle errors so you can intercept clipboard input, validate it, and integrate the paste flow into your app logic.

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/conversational-ui/promptbox/disabled
Summary: Learn how to disable the PromptBox in Telerik UI for ASP.NET Core Conversational UI to block user input and focus when required. Set the disabled state at initialization with the HTML Helper using .Enable(false) or with the Tag Helper using enabled="false", and toggle it at runtime via the client-side widget.enable(true|false) API. Use this to prevent input during async operations or when rendering a read-only state.

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/conversational-ui/promptbox/overview
Summary: Learn how to use the ASP.NET Core Conversational UI PromptBox to capture free‑form text input and control it via the server-side HTML Helper or Tag Helper. The article covers initialization, configuring options like placeholder, value, and size, and wiring up submit/change events and API methods to read the entered text and integrate it into your chat or form workflows.

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/smartpastebutton/overview
Summary: The SmartPasteButton in Telerik UI for ASP.NET Core is a split-button style component that exposes a primary Paste action with a dropdown of paste modes (for example, keep formatting or paste as plain text). Add it with the HTML or Tag Helper, configure items, icons, and appearance, and wire up client-side events to read from the Clipboard API and apply your paste logic to target elements. It follows the suite’s button behaviors, including keyboard navigation and accessibility.

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/conversational-ui/promptbox/adornments
Summary: Learn how to add input adornments (prefix and suffix) to the ASP.NET Core PromptBox so you can display icons or text inside the field. The article shows how to configure prefix/suffix options with the HtmlHelper and TagHelper APIs in Razor, including using built-in icons, plain text, and custom templates, and how to combine multiple adornments to fit your UI.

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/conversational-ui/promptbox/appearance
Summary: This article shows you how to customize the appearance of the Telerik UI for ASP.NET Core PromptBox (built on the Dialog), including controlling dimensions and layout (such as width, titlebar, and action buttons) and applying theming through the Kendo Sass-based themes. It details the rendered HTML/CSS structure (for example, k-dialog/k-prompt and titlebar/actions sections) so you can target selectors, and explains how to use ThemeBuilder or override theme variables and styles for maintainable, app-specific customization.

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

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

Article: https://www.telerik.com/aspnet-core-ui/documentation/ai/troubleshooting
Summary: Use this troubleshooting guide to diagnose and fix issues when integrating the Telerik UI for ASP.NET Core AI Prompt with OpenAI or Azure OpenAI. It walks you through verifying server-side configuration (API keys, endpoints, deployment/model names, api-version), setting up a backend proxy to avoid CORS, and resolving common HTTP errors (401/404/429), timeouts, and request/response size limits.

Blog: https://www.telerik.com/blogs/building-rag-aspnet-core
Summary: Learn how to implement Retrieval-Augmented Generation (RAG) in ASP.NET Core with C#: ingest and chunk documents, generate embeddings, store them in a vector database, and retrieve top‑k context for queries. You’ll wire the results into an LLM call (OpenAI/Azure OpenAI) and expose HTTP endpoints that return grounded answers, using configuration and dependency‑injection patterns you can reuse in your .NET apps.

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

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

Blog: https://www.telerik.com/blogs/building-rag-aspnet-core
Summary: Learn how to implement a Retrieval-Augmented Generation (RAG) pipeline in ASP.NET Core with C#: ingest and chunk documents, generate embeddings via OpenAI or Azure OpenAI, store them in a vector database, run similarity search, and feed retrieved context to an LLM to answer user prompts. The article provides end-to-end C# code for services and controllers, dependency injection and configuration of API keys, and a minimal chat interface so you can run a local RAG Web API and UI.

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

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

Article: https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base/grid-use-grid-as-client-template
Summary: Learn how to render a Kendo UI Grid inside a Telerik UI for ASP.NET Core Grid column using a ClientTemplate: output a per-row placeholder with a unique id (for example, via kendo.guid()) and initialize the child grid in the parent grid’s dataBound handler using the current row’s data. The article shows how to pass the row key to the child grid’s DataSource, prevent duplicate initialization, and dispose nested grids on rebind to avoid memory leaks.

Article: https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base/tooltip-refresh-with-dynamic-content
Summary: To keep a Kendo UI Tooltip for ASP.NET Core in sync with dynamic content and targets (after AJAX/partial updates or data-bound component renders), initialize it on a stable container and use the filter option with a content callback, or update the content via setOptions in the show event. The article shows how to attach the tooltip to newly added elements and render up-to-date content without re-initialization, plus when to destroy and re-initialize as a fallback in Grid/list or SPA scenarios.

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 row into view in the Kendo UI Grid and optionally select it, even when paging, sorting, filtering, or virtual scrolling is enabled. The article shows how to resolve a data item to its correct DOM row via the item’s uid (e.g., grid.tbody.find("tr[data-uid='...']")) and then scroll the grid’s content to that row (scrollTop or scrollIntoView), with guidance on triggering the logic at the right time using dataBound.

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

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

Blog: https://www.telerik.com/blogs/building-resilient-apis-retry-pattern
Summary: You’ll learn how to implement the retry pattern for API clients and services—when to retry transient failures and when to fail fast. The article provides .NET examples using HttpClientFactory and Polly to apply bounded retries with exponential backoff and jitter, target idempotent operations, and handle retryable HTTP status codes (408, 429, 500, 502, 503, 504), with practical guidance on timeouts, cancellation tokens, and telemetry.

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

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

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/diagrams-and-maps/map/azure-tiles
Summary: Learn how to render Azure Maps tiles in the Telerik UI for ASP.NET Core Map by adding a tile layer with the Azure Maps Tile API URL template. You configure the layer’s UrlTemplate with {zoom}/{x}/{y}, provide your Azure Maps subscription key and the tilesetId (for example microsoft.base.road or microsoft.imagery), and set the required attribution. The article uses the Map HTML Helper and TileSource options to control tile size, zoom levels, and other layer settings.

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

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

Blog: https://www.telerik.com/blogs/whats-new-apis-net-10-real-improvements
Summary: This article breaks down what's new in .NET 10 APIs, focusing on practical Base Class Library improvements you can apply immediately. It covers updates across collections, spans/UTF-8, I/O and networking, date/time, cryptography, diagnostics, and threading, with concise examples and notes on performance, memory, and reliability. Use it to plan adoption in existing projects by mapping old patterns to new overloads and helpers that reduce allocations and simplify async and data processing.

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

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

Blog: https://www.telerik.com/blogs/whats-new-net-10-aspnet-core
Summary: This article walks you through what’s new in ASP.NET Core for .NET 10 and how to adopt the changes, with focused code examples and notes on breaking changes to help you plan upgrades. It covers updates across hosting and Kestrel, routing and minimal APIs, Blazor, authentication/authorization and security, caching and performance, and provides practical migration guidance for moving to .NET 10.

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

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

Article: https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base/grid-ai-integration
Summary: Learn how to add AI integration to the Telerik UI for ASP.NET Core Grid by invoking OpenAI or Azure OpenAI to analyze grid data and display the response in a dialog. You will add a custom toolbar command, collect selected rows and column metadata on the client, call an ASP.NET Core controller that wraps the OpenAI REST API, and render the result in the UI. The article covers configuring OpenAI/Azure OpenAI, prompt construction, server-side API key handling, and basic error handling.

Article: https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base/chart-ai-integration
Summary: Implement AI-assisted analysis for the Telerik/Kendo UI for ASP.NET Core Chart by extracting series data, sending it to an AI provider (e.g., OpenAI or Azure OpenAI) from a secure server-side controller, and rendering the generated summary in a UI element (such as a Dialog). The article provides Razor and controller examples using HttpClient and environment-stored API keys, plus guidance on prompt design, minimizing shared data, and keeping keys off the client.

Article: https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base/editor-ai-integration
Summary: Learn how to integrate OpenAI or Azure OpenAI with the Telerik UI for ASP.NET Core Editor by adding a custom toolbar menu that posts the current content and selected action to a server-side ASP.NET Core endpoint, then inserts or replaces the text with the AI response. The article provides Editor configuration, JavaScript, and controller code that calls the Chat Completions API with prompt templates for rewrite, summarize, translate, and grammar fixes, keeping the API key on the server.

Article: https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base/scheduler-ai-integration
Summary: Learn how to integrate the Telerik UI for ASP.NET Core Scheduler with an LLM-backed AI workflow to create, edit, translate, or summarize events from natural language. You’ll add the Kendo AI Prompt to the Scheduler UI, handle its execute event on the client, and implement a C# endpoint that calls an LLM (e.g., OpenAI or Azure OpenAI) and maps the JSON response to Scheduler events. The article includes end-to-end wiring, request/response shaping, and safe parsing to update the Scheduler data source.

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/grid/smart-grid/smart-extensions
Summary: This article explains how to use Smart Extensions for the Telerik UI for ASP.NET Core Grid (Smart Grid) to apply preset configuration through extension methods on the Grid HtmlHelper. It covers setup (package and namespace), the available extensions and what they enable (such as filtering, sorting, paging, toolbars, commands, and column configuration), and how to customize or override defaults when composing Smart extensions with your own Grid settings.

Blog: https://www.telerik.com/blogs/managing-content-security-telerik-aspnet-core-applications
Summary: This article shows you how to add and enforce a Content Security Policy (CSP) in ASP.NET Core applications that use Telerik UI for ASP.NET Core, including setting security headers via middleware. It details the CSP directives and allowances required by the components—script-src, style-src, img-src, font-src, connect-src, worker-src, and support for blob: and data: URLs for features like file export—and how to use nonces/hashes and CSP‑compatible Telerik/Kendo assets to avoid 'unsafe-inline' and 'unsafe-eval'. You also get copy‑paste policy examples and troubleshooting guidance for scenarios such as CDN-hosted resources, PDF/Excel export, and WebSocket/SignalR connections.

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

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

Blog: https://www.telerik.com/blogs/securing-apps-telerik-ui-aspnet-core-otp-control
Summary: You’ll implement one-time passcode (OTP/TOTP) verification in an ASP.NET Core app using the Telerik UI for ASP.NET Core OTP control, from configuring the control in Razor views to wiring server-side validation with ASP.NET Core Identity or a TOTP library. The article covers UX and security details—auto-advancing digit inputs, paste and accessibility, handling expiration and retries, and enforcing server-only validation, rate limiting, and secure secret storage—to build a reliable multi-factor authentication flow.

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

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

Article: https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base/chat-ai-integration
Summary: Integrate the Telerik UI for ASP.NET Core Chat with OpenAI or Azure OpenAI by handling the Chat send event, forwarding user messages to a server-side controller that calls the Chat Completions API, and returning the assistant’s reply as a Chat message. The article walks you through the Razor setup, controller/action implementation, secure API key handling, request/response models, role mapping (user/assistant), and basic error handling.

Blog: https://www.telerik.com/blogs/real-time-data-updates-telerik-ui-net-maui-grid
Summary: Learn how to implement real-time data updates in the Telerik UI for .NET MAUI Grid by binding to an ObservableCollection and models that implement INotifyPropertyChanged, so item additions/removals and per-cell changes propagate instantly. The article shows a timer-driven update loop and how to marshal background changes onto the UI thread, with practical guidance to keep frequent updates responsive.

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

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

Article: https://www.telerik.com/aspnet-core-ui/documentation/ai-components-and-features
Summary: This article documents the AI Prompt and AI Chat components in Telerik UI for ASP.NET Core and shows you how to configure Tag/HTML Helpers and connect them to OpenAI or Azure OpenAI through ASP.NET Core endpoints. It covers setup, provider configuration, client/server APIs, streaming responses, attachments, context and message history, and content safety basics to help you implement AI features in your application.

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/diagrams-and-maps/diagram/binding
Summary: You will bind the Telerik ASP.NET Core Diagram HTML Helper to your data so shapes and connections are generated from your schema. Configure DataSource and ConnectionsDataSource with model field mappings (Id, Text, X/Y for shape position; From/To for connections) and transport actions for server-side CRUD. The examples show remote binding, positioning, and handling data-bound events.

Article: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/diagrams-and-maps/diagram/razor-pages
Summary: This article shows how to use the ASP.NET Core Diagram HtmlHelper in Razor Pages: configure separate DataSources for shapes and connections with AJAX transport to page handlers (via Url.Page), map model fields (Id, From, To), and include the required Kendo UI scripts and styles. It provides .cshtml and PageModel code for Read, Create, Update, and Destroy operations and demonstrates adding anti-forgery tokens to the requests.

Feel free to check them out and share your thoughts!

The Telerik Team

Telerik UI for ASP.NET Core versioning feedback

We need your feedback, because we are considering changes in the release approach for Telerik UI for ASP.NET Core. 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.

URGENT: ListView completely broken v2023.1.314

Hi!

The ListView is breaking my web application, and I cannot make head or tail of the reason:

An unhandled exception occurred while processing the request.

NotSupportedException: "ClientTemplateId or ClientTemplateHandler" cannot be null or empty.

Kendo.Mvc.UI.ListView<T>.VerifySettings()

Also, you demos for the ListView are broken and the browser tab crashed after a while.

I need an urgent fix, as this is affecting the live application.

Grid Column Menu Unstick Message is Null

In our UI for ASP.NET Core R3 2020 (2020.3.915) release, the Column menu message of unsticking a column is "null".

This bug will be resolved in our next official release.

In the meantime, as a workaround, manually set the Unstick Column menu message:

.ColumnMenu(c => c.Messages(m => m.Unstick("Unstick Column")))

UI for Asp.Net Core Responsive form not setting correct CSS classes

I am using Telerik.UI.for.AspNet.Core (2026.1.212) in a C# net9 application. I am running into issues attempting to create a responsive Form layout for my Form component in the UI for ASP.NET Core library.

My form is being built like:

Html.Kendo().Form<MyFormModel>()
    .Name("MyFormName")
    .FormData(Model.Model)
    .HtmlAttributes(new {@method = "POST" })
    .Layout("grid")        
    .Grid(g => 
        g.Cols(c =>
        {
            c.Add().MaxWidth(1680).Value(6);
            c.Add().MinWidth(1681).Value(12);
        }               
        )
    )
    .Validatable(v =>
    {
        v.ValidateOnBlur(true);
        v.ValidationSummary(true);
        v.ErrorTemplate("<span style='color:red;'>Fill in #=data.field#</span>");
    })
    .Items(i => 
    { 
        //=======================================//= REQUEST INFORMATION                 = //=======================================
        i.AddGroup().Label("Request Information").ColSpan(6).Layout("grid")
        .Grid(g =>        
            g.Cols(c =>
            {
                c.Add().MaxWidth(500).Value(1);
                c.Add().MinWidth(501).Value(12);

            })
        )
        .Items(gi =>
        {
            //Group Items
        });


        //=======================================//= Request/Date Information            =//=======================================
        i.AddGroup()
        .ColSpan(6)
        .Label("Request and Date Information")
        .Layout("grid")
        .Grid(g =>
        {
            g.Cols(c =>
            {
                c.Add().MaxWidth(500).Value(1);
                c.Add().MinWidth(501).Value(2);
            });
        })
        .Items(gi =>
        {
            //Group Items       
        });
})
)

The image attached shows that the responsive column rules are being converted into css classes like "k-gap-x-[object Object]" instead of "k-grid-cols-12" or "k-grid-cols-6". This behavior happens on the main form and each group within the form. I've also attempted to try setting a column gutter but that also does not convert to a css class properly. I have referenced the documentation and demo page https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/layout/form/responsive and https://demos.telerik.com/aspnet-core/form/responsive-form but the behavior on the demo side does not seem to align with the behavior in my application.

Any insight or thoughts are appreciated!

DropDownTree control auto filter not working

when am used DropDownTree control i am used below sample format

@(Html.Kendo().DropDownTree()
.Name("ID")
.Label(label =>
{
label.Content("Select an ID...");
})
.DataTextField("Name")
.DataValueField("id").Value(12)
.HtmlAttributes(new { style = "width: 100%" })
.Filter(FilterType.Contains)
//.LoadOnDemand(true)
.DataSource(dataSource => dataSource.ServerFiltering(true).Read(read => read.Action("GetLocationListForDDTree", "Home") ) )
)

when enable loadondemand it works filter but value not show selected . if am command the loadondemand its show the selected value but filter not working . i need both options kindly advice this

Multitouch support for Pdf Viewer / Image Editor

Hello,

is there a possibility to support multitouch input on Pdf Viewer and Image Editor?

Moving and tapping is supported. So I can scroll through the pages for example. But I need to use zoom and pinch gesture for zooming in or out to documents / images also.

As we need to zoom just areas (e.g. maps with geo information) and keep the menus on top, the pages are not user-scalable as a whole:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no,text/html,charset=utf-8">

Is there any workaround to catch the event and set the zoom factor?

And is there a possibility to couple the mouse wheel / double click event to the zoom factor?

Thanks,

Christine

Reference a CheckBox within a RadGrid inside a PlaceHolder

I am attempting to reference some CheckBoxes withing a RadGrid inside a PlaceHolder.

I have a field that I am retrieving called Block that contains a numerice value. Based on the value I am dynamically creating a number of CheckBoxes in a PlaceHolder equal to that value. I have a Button Click method that is trying to reference the CheckBoxes but it is not working correctly.

This line : Dim BlockCheckBox As CheckBox = DirectCast(phBlocksCheckBox.FindControl("BlockCheckBox_" & cbIndex), CheckBox) is not returning a value.

aspx
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="True" GridLines="None" AllowMultiRowSelection="True" AllowFilteringByColumn="True" EnableLinqExpressions="False">
<MasterTableView AutoGenerateColumns="False">
<PagerStyle AlwaysVisible="True"></PagerStyle>
<Columns>
<telerik:GridClientSelectColumn UniqueName="checkboxColumn1" HeaderTooltip="SELECT All" ShowSortIcon="False" ShowFilterIcon="False" Reorderable="False">
<HeaderStyle Width="30px" />
<telerik:GridBoundColumn DataField="NumberOfBlocks" HeaderText="Block Count" UniqueName="NumberOfBlocks" AllowFiltering="False" Display="False">
<HeaderStyle Width="20px" />
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn DataField="Block" HeaderText="Blocks" UniqueName="BlocksColumn" AllowFiltering="False">
<ItemTemplate>
<asp:PlaceHolder ID="phBlocksCheckBox" runat="server" />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" ReorderColumnsOnClient="True">
<Scrolling UseStaticHeaders="True" />
<Selecting AllowRowSelect="True" />
<ClientEvents OnRowSelected="RowSelected" OnRowDeselected="RowDeselected"></ClientEvents>
</ClientSettings>
</telerik:RadGrid>

vb
Protected Sub Button_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles GenerateCassetteLabelsButton.Click
Dim NumberOfBlocks As Integer = 0

For Each item As GridDataItem In RadGrid1.SelectedItems
NumberOfBlocks = CInt(item("NumberOfBlocks").Text)

Dim phBlocksCheckBox As PlaceHolder = DirectCast(item.FindControl("phBlocksCheckBox"), PlaceHolder)
If phBlocksCheckBox IsNot Nothing Then
HttpContext.Current.Response.Write("phBlocksCheckBox IsNot Nothing<br><br>")
For cbIndex As Integer = 1 To NumberOfBlocks
HttpContext.Current.Response.Write("-BlockCheckBoxID : " & "BlockCheckBox_" & cbIndex & "<br><br>")
Dim BlockCheckBox As CheckBox = DirectCast(phBlocksCheckBox.FindControl("BlockCheckBox_" & cbIndex), CheckBox)

If BlockCheckBox IsNot Nothing Then
HttpContext.Current.Response.Write("BlockCheckBox IsNot Nothing<br><br>")
'Do something with BlockCheckBox.Text
HttpContext.Current.Response.Write("-Block : " & BlockCheckBox.Text & "<br><br>")
End If
Next
End If
Next

RadGrid1.Rebind()
End Sub

Protected Sub RadGrid1_ItemDataBound(sender As Object, e As GridItemEventArgs) Handles RadGrid1.ItemDataBound
'Ensure we are dealing with a data item (not header, footer, etc.)
If TypeOf e.Item Is GridDataItem Then
Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)

'Find the placeholder control defined in the ItemTemplate
Dim phBlocksCheckBox As PlaceHolder = CType(item.FindControl("phBlocksCheckBox"), PlaceHolder)

If phBlocksCheckBox IsNot Nothing Then
Dim NumberOfBlocks As Integer = DataBinder.Eval(item.DataItem, "NumberOfBlocks")

'Dynamically create and add checkboxes
If NumberOfBlocks > 0 Then
For BlockIndex As Integer = 0 To NumberOfBlocks - 1
Dim BlockCheckBox As New CheckBox()
BlockCheckBox.ID = "BlockCheckBox_" & (BlockIndex + 1).ToString()
BlockCheckBox.Text = (BlockIndex + 1).ToString()
BlockCheckBox.Checked = True
phBlocksCheckBox.Controls.Add(BlockCheckBox)
phBlocksCheckBox.Controls.Add(New LiteralControl(" "))
Next
End If
End If
End If
End Sub

Get Chart series dynamic from JSON

I have a NET core app and calling an external API fropm another site which returns anJSON that looks like this

[
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 1",
    "color": "red",
    "dateInfo": "2026-01-01T00:00:00",
    "consumption": "44.35"
  },
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 1",
    "color": "red",
    "dateInfo": "2026-01-02T00:00:00",
    "consumption": "44.38"
  },
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 1",
    "color": "red",
    "dateInfo": "2026-01-03T00:00:00",
    "consumption": "44.38"
  },
   {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 2",
    "color": "blue",
    "dateInfo": "2026-01-01T00:00:00",
    "consumption": "291.59"
  },
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 2",
    "color": "blue",
    "dateInfo": "2026-01-02T00:00:00",
    "consumption": "293.00"
  },
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 2",
    "color": "blue",
    "dateInfo": "2026-01-03T00:00:00",
    "consumption": "289.21"
  },
 {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 3",
    "color": "yellow",
    "dateInfo": "2026-01-01T00:00:00",
    "consumption": "228.62"
  },
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 3",
    "color": "yellow",
    "dateInfo": "2026-01-02T00:00:00",
    "consumption": "577.15"
  },
  {
    "powerDeviceName": "Datarack",
    "powerDeviceUnitName": "Datarack Fas 3",
    "color": "yellow",
    "dateInfo": "2026-01-03T00:00:00",
    "consumption": "295.35"
  }
]

From this I want to create a chart with series that matches the "powerDeviceUnitName" values (with the color from JSON) and the axis will list all dates in dateInfo The "value" for the chart is "consumption"

I didn't thought this should be any hard issue, but I can't find any example on Teleriks demos that have external JSON?

Anyone that can help me in the right direction?

Regards Pelle

How to find my exact package ID

Greetings,

I signed-up with for the Progress® Telerik® UI for ASP.NET Core

I believe is the Trial that I signed up for however, it doesn't indicate 'trial' in my account.

I'm able to download and generate keys.

However, neither of these packageID's are present in my Telerik feed.

Telerik.UI.for.Maui.Trial
Telerik.UI.for.AspNet.Core

How can I confirm my package ID for the trial? Where can I find this?

Thank you

Where to find Package ID for my account?

Greetings,

I signed-up with for the Progress® Telerik® UI for ASP.NET Core

I believe is the Trial that I signed up for however, it doesn't indicate 'trial' in my account.

I'm able to download and generate keys.

However, neither of these packageID's are present in my Telerik feed.

Telerik.UI.for.Maui.Trial
Telerik.UI.for.AspNet.Core

How can I confirm my package ID for the trial? Where can I find this?

Thank you

PDV Viewer: mI is not a function

When adding a PDFViewer component, I get this error:

jQuery.Deferred exception: mI is not a function TypeError: mI is not a function
  at DV.loadDocument (http://localhost:56126/lib/kendo-ui/js/kendo.all.min.js:9:4666164)
    at DV.loadFile (http://localhost:56126/lib/kendo-ui/js/kendo.all.min.js:9:4666007)
    at new DV (http://localhost:56126/lib/kendo-ui/js/kendo.all.min.js:9:4660492)
    at init._loadPdfJSDocument (http://localhost:56126/lib/kendo-ui/js/kendo.all.min.js:9:4725966)
    at new init (http://localhost:56126/lib/kendo-ui/js/kendo.all.min.js:9:4710755)
    at HTMLDivElement.<anonymous> (http://localhost:56126/lib/kendo-ui/js/kendo.all.min.js:9:66968)
    at ce.each (http://localhost:56126/js/jquery-3.7.0.min.js:2:3129)
    at ce.fn.init.each (http://localhost:56126/js/jquery-3.7.0.min.js:2:1594)
    at e.fn.<computed> [as kendoPDFViewer] (http://localhost:56126/lib/kendo-ui/js/kendo.all.min.js:9:66944)
    at HTMLDocument.<anonymous> (http://localhost:56126/MyFolder/MyPage?ticketid=11:703:100) undefined

This occurs whether I use a valid PDF file on initial load, or if I use the menu to open and test an existing document.

Reference Error While rebuild Project

Unable to find package Telerik.UI.for.AspNet.Core with version (>= 2021.3.1109)
- Found 1 version(s) in nuget.org [ Nearest version: 2016.3.914 ]
- Found 0 version(s) in Microsoft Visual Studio Offline Packages

Duplicate 'Content' items were included. The .NET SDK includes 'Content' items from your project directory by default. You can either remove these items from your project file, or set the 'EnableDefaultContentItems' property to 'false' if you want to explicitly include them in your project file. For more information, see https://aka.ms/sdkimplicititems. The duplicate items were: 'nlog.config'

Programmatically hide custom column in scrollable grid

Good afternoon,

Using the demo https://demos.telerik.com/aspnet-core/grid/custom-command edited in REPL I have added some extra columns and grouping, plus a custom command whose visibility is conditional.

When I make the grid scrollable and contained in a div whose class is "container" the custom command column is hidden at runtime.

Index.html:

<div class="container">
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("Grid")
    .Columns(columns => {
        columns.Command(command => command.Custom("Close").Click("showDetails").Visible("colVisible"));
        columns.Bound(e => e.Title);
        columns.Group(group => group
            .Title("Name")
            .Columns(name => {
                name.Bound(e => e.FirstName).Width(80);
                name.Bound(e => e.LastName).Width(80);
            })
        );
        columns.Bound(e => e.FirstName).Width(80);
        columns.Bound(e => e.LastName).Width(80);
        columns.Bound(e => e.Title).Width(250);
        columns.Bound(e => e.FirstName).Width(80);
        columns.Bound(e => e.LastName).Width(80);
        columns.Bound(e => e.Title).Width(250);

    })
    .Size(ComponentSize.Small)
    .Scrollable()
    .Sortable()
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("CustomCommand_Read", "Grid"))
     )
)
</div>
@(Html.Kendo().Window().Name("Details")
    .Title("Customer Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)
)

 <script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <h2>#= FirstName # #= LastName #</h2>
        <em>#= Title #</em>
        <dl>
            <dt>City: #= City #</dt>
            <dt>Address: #= Address #</dt>
        </dl>
    </div>
</script>

Script.js:

   function showDetails(e) {
        e.preventDefault();

        var detailsTemplate = kendo.template($("#template").html());
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }

    function colVisible(dataItem) {
        var visible = dataItem.LastName == "Fuller";
        return !visible;
    }

Is there a way to make the custom command appear? I guess that the width of the grid is being set by "container", I've predefined column widths of some of the columns, and it works out which columns appear before the visibility of the custom command is decided, so that appears behind the first Title column?

Kind regards,

Richard

Grid Column Menu Grouping

I have a grid where I am using a custom grouping javascript event becuase one of the columns is using an editor template, when they group by that column, I want them to actually group by the hidden column containing the data for the column, not the ID.

When I drag the item to group it, the category name displays fine, having run through my javascript function.

But when I click the three dots and use the column menu, and select Group, it uses the ID instead, and you can see that is what it is grouped by in the header.

I suppose I could get around this by setting a custom group header for it? I'm just not sure why it's by passing my javascript.

Where is the code for the AI Grid

In this example

https://demos.telerik.com/aspnet-core/grid/ai-toolbar

It references

.Service("https://demos.telerik.com/service/v2/ai/grid/smart-state")

However no code example or details of how to implement this

Where do I find the code or documentation of how to implement

Display Annotation Custom Editor Grid Popup TagHelper Not Working

I feel like this should be simple but I can't figure this out. I use the [Display(Name = "Code")] annotation in my view model. I have a simple custom editor popup on my grid. I use taghelpers because I just do. I am trying to get my labels to show the display name in my popup. I have seen older posts where validation is also not working but I think this has been fixed. Either way I feel like this should work.

Model

public class ChargeViewModel

{
[ScaffoldColumn(false)]
public int ChargesID { get; set; }

[Required]
[UIHint("EditChargePopup")]
[Display(Name = "Code")]
public string ChargesCodeID { get; set; }

Custom Editor

Results

Telerik license issue - we have DevCraft UI Subscription, but getting: Telerik UI for ASP.NET Core is not listed in your current license file

We have configured the app with the possible combination published in ASP.NET MVC, Activating Your License, Setting Up Your License Key - Telerik UI for ASP.NET MVC, and FAQ | Your Account, and the other docs...
The problem started when we renewed our subscription. We didn't use the upgrade wizard, but manually copied the license.txt file to the required location. The build completes successfully. We've also included Telerik.License.cs; and telerik-license.js, but nothing seems to help - the grid shows up with a watermark.
What are we not doing right? I thought this stuff should be straightforward once you have a license, but it's proving to be quantum physics. Please help!

Grid column does not use DateTimePicker when in edit mode

I have created a fresh project with the following variables:

Visual Studio 22 Community (Version 17.14.21 )
Progress Telerik UI for ASP.NET Core Extension 2025.4.1110.199
.NET 9.0
Kendo UI v2025.4.1111

I am trying to create a simple grid as following that has an editable `DateTime?` column:

https://netcorerepl.telerik.com/GpFmvpEr29UDYPJN54

It works in the REPL link above, but if I press "Edit" on my local project, the DateTime column defaults to a text input without the datetimepicker buttons (see Attachment-1.png), I'm not sure what I am missing.

I've checked that `/Views/Shared/Editor/Templates/DateTime.cshtml` exists and the content is as follows:

@model DateTime?

@(Html.Kendo().DateTimePickerFor(m => m).HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")}))

I've placed either `[DataType("Date")]` or `[DataType("DateTime")]` annotation on the class property definition and neither worked.

I've used `.EditorTemplateName("DateTime")` and/or `[UIHint("DateTime")]` and it didn't work.

I've created a new Template type and it didn't work.

I'm not sure what else to try to make it work.

.NET Core TabStrip with DateTimePicker - What am I missing?

I seem to have hit a stumbling block which I cannot find a simple solution to. Can someone point a direction for me to persue?

I am designing a website which will present to the user a tabbed interface. Each tab will represent a collection of available options/items for the user to fill out when submitting changes to an edited object.

That sounds simple in concept. I have used several host objects. TabStrips, ExpansionPanels have been tried. Both seem to render the same results. Any "content" panels which are not rendered initially do not render properly when selected.

I.E., Tab #0 looks fine. Tab#1, which is obscured/hidden, contains controls that when viewed lack things such as labels, icons, most script driven features. The same logic fails when other non-tabstrip items used.

Here is a quicky sample showing the problem. In theory, expansion panels 1, 2, and 3 should all render content. Only panel #1 shows valid content, 2 and 3 are malformed at best.

My root problem seems to be my inability to dynamically show content not visible when the page is initially rendered. Can someone point me the correct direction? I have tried the "loadfrom" content options all having the same results.

            @(Html.Kendo().ExpansionPanel()
                        .Name("reoccurringItems")
                        .Title("Reoccurring")
                        .SubTitle("Items running more than one time")
                        .Expanded(false)
                        .Content("Test Text to test feature..")
                        )

            @(Html.Kendo().ExpansionPanel()
                        .Name("nonReoccurringItem")
                        .Title("Run Once")
                        .SubTitle("A item run one time only")
                        .Expanded(false)
                        .Content(@<text>
                <div>
                    @(Html.Kendo().DateTimePickerFor(m => m.OneTimeOccurrenceAtDateandTime)
                                  .Label(lbl => lbl.Content("Run Once At Date/Time").Floating(true))
                                  .Rounded(Rounded.Full).ToClientTemplate())
                </div>
            </text>)
                        )

            @(Html.Kendo().ExpansionPanel()
                        .Name("nonReoccurringTestItem")
                        .Title("Test Two")
                        .SubTitle("Test With Textbox")
                        .Expanded(false)
                        .Content(@<text>
                <div>
                    @(Html.Kendo().TextBoxFor(m => m.ScheduleDescription).Label(lbl => lbl.Content("Description").Floating(true)))
                </div>
            </text>)
                        )

Chart - Category Axis labels duplicated

It may be something I'm missing but I've built a multi-series chart with line and column data. Since it is possible for the values on the bar to be negative, the issue I'm seeing is the category label is repeated, one for each series. Since I am also using zoom, if I zoom in and then back out, the duplicated label is now gone. I should also note that if I remove the label position, currently set as start, it will render only one but then having negative values makes that look bad.

What am I missing to stop the axis duplication?

Attached is the initial render of the chart as coded below.

        <kendo-chart name="chart" >
            <chart-legend visible="true" position="Kendo.Mvc.UI.ChartLegendPosition.Bottom"></chart-legend>
            <series>
                <series-item type="Kendo.Mvc.UI.ChartSeriesType.Column" name="Amount" field="Amount" category-field="Period" color="#003399">
                    <labels visible="true" format="{0:c2}"></labels>
                    <tooltip visible="true" template="Date: #= dataItem.Period#<br />Amt: #= kendo.format('{0:c2}', dataItem.Amount) #"></tooltip>
                </series-item>
                <series-item type="Kendo.Mvc.UI.ChartSeriesType.Line" name="Total" field="RunningTotal" category-field="Period" color="#FF9900">
                    <labels visible="false" format="{0:c2}"></labels>
                    <tooltip visible="true" template="Date: #= dataItem.Period#<br />Total: #= kendo.format('{0:c2}', dataItem.RunningTotal) #"></tooltip>
                </series-item>
            </series>
            <datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax" server-operation="true" page-size="0">
                <transport>
                    <read url="" />
                </transport>
                <sorts>
                    <sort field="Period" />
                </sorts>
            </datasource>
            <category-axis>
                <category-axis-item>
                    <labels position="ChartAxisLabelsPosition.Start" step="2">
                        <chart-category-axis-labels-rotation align="Kendo.Mvc.UI.ChartAxisLabelRotationAlignment.End" angle="315" />
                    </labels>
                    <chart-category-axis-item-title text="Date"></chart-category-axis-item-title>
                </category-axis-item>
            </category-axis>
            <value-axis>
                <value-axis-item>
                    <labels format="c0"></labels>
                </value-axis-item>
            </value-axis>
            <zoomable>
                <mousewheel lock="ChartAxisLock.Y" />
            </zoomable>
        </kendo-chart>

Showing and Hiding Columns and data Conditionally

I am converting a MVC table grid to a Telerik Grid. While looking at it, there are conditional columns. For example:

@if (Model?.GroupDetail?.IsMec == false)
                                    {
                                        <th class="text-secondary" style="width: 140px;">Group Info</th>
                                    }

<th class="text-secondary">
                                        @if (Model?.GroupDetail?.IsMec == false)
                                        {
                                            <text>Office</text>
                                        }
                                        else
                                        {
                                            <text>Role</text>
                                        }
                                    </th>

How would I go about recreating something like this for the grid

ASP.NET Core Upload control works but returns error

I'm attempting to use the Kendo Upload control asynchronously to an MVC controller, which passes the file to a WebApi controller. The file is uploaded successfully, however when it returns to the MVC view, it reports that the file failed to upload with the error below. We are using Azure B2C for authentication:

"Access to XMLHttpRequest at 'https... b2clogin.com...' (redirected from 'https//localhost:7074/Files/UploadFile') from origin 'https://localhost:7074' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Server response:

"Failed to load resource: net::ERR_FAILED"

The control is located in a partial view as part of a tab control on a CSHTML view. Here is the code for the upload control:

<div class="row">
<div class="col-md-8">
@(Html.Kendo().Upload()
.Name("uploadedFile")
.Multiple(false)
.Validation(v =>
{
v.AllowedExtensions(new string[] { ".csv" });
v.MaxFileSize(3145728);
})
.Async(a => a
.AutoUpload(false)
.Save("UploadFile", "Files")
)
.Events(e =>
{
e.Upload("onFileUpload");
})

)
</div>
<div class="col-md-4">
</div>

</div>

Here is the C# code for the MVC controller:

[HttpPost]
public async Task<ActionResult> UploadFile(IFormFile uploadedFile, string month, string year)
{
if (uploadedFile == null || uploadedFile.Length == 0)
return BadRequest("No file uploaded.");

var reportingPeriod = month + year;

using (var content = new MultipartFormDataContent())
{
if (uploadedFile.Length > 0)
{
var streamContent = new StreamContent(uploadedFile.OpenReadStream());
streamContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue(uploadedFile.ContentType);
content.Add(streamContent, "file", uploadedFile.FileName);
}

using (var response = await _client.HttpClient.PostAsync("/api/Files/loadbackdatedmonthlytrueupfile/" + reportingPeriod, content))
{
if (response.IsSuccessStatusCode)
{
// Kendo expects an empty string for success
return Content("");
}
else
{
return StatusCode((int)response.StatusCode, await response.Content.ReadAsStringAsync());
}

}

}
}

Here is the code for the WebApi controller:

[HttpPost("loadbackdatedmonthlytrueupfile/{reportingPeriod}")]
public async Task<IActionResult> LoadBackdatedMonthlyTrueUpFile([FromForm] IFormFile file, string reportingPeriod)

{

//other logic here

return Ok(new { file.FileName, file.Length });

}

This is the info I received from Copilot:

This error is caused by trying to call the Azure AD B2C /authorize endpoint using an XMLHttpRequest (AJAX/fetch) from your frontend (https://localhost:7074). Azure AD B2C does not support CORS for this endpoint, so the browser blocks the request.
Root cause:
• The /authorize endpoint is designed for browser redirects, not AJAX/fetch/XHR.
• No CORS headers will ever be present on this endpoint, so preflight requests will always fail.
How to fix:
• Never use AJAX/fetch/XHR to call the /authorize endpoint.
• Always use a full-page redirect for authentication.
For example, set window.location.href to the login URL, or let the [Authorize] attribute and OIDC middleware handle it for you.

How can I configure this upload control to return to the view without the error (attaching screenshot)?

Showing actual image as Thumbnail in the content pane of file manager.

Can we show actual image as a thumbnail in the content pane of the filemanager ?
I have read the documentation but didn't find any suitable reference.

thats what i meant

Kendo Menu as a custom client template on a toolbar for a grid

I am trying to put an "action" menu on the toolbar of my grid. I have used a dropdownlist as is shown on your examples. The issue that I have with this is that action menus have a placeholder because all of the menu items have equal importance so no one menu item is the default. So I have rigged up menu like events with my javascript but it is still not ideal since the "placeholder" is a selectable list item. So then I had the brilliant idea of using telerik's menu within my custom client template. Easy peasy. Right? No, the dropdown or the .k-animation-container .k-animation-container-shown's z-order is 10002 and no matter how hard I try I can't get it to change and the dropdown is hidden by the grid header.

I was left to wonder if it is because it is limited to the confines of the toolbar. I am open to suggestions. I would hate to have to go back to the clunky dropdownlist option. Here's my code:

DatePickerFor not working with newer versions

DatePickerFor does not work with any versions newer than 2025-2-702. As a result, we cannot upgrade our telerik version to newer versions. Non model bound DatePicker works. When using DatePickerFor, it completely stops rendering the date picker and subsequent html.

Signature

<div class="signature-container">
<p>Add a Signature to your existing PDF files.</p>


<div class="mb-2">
<label>
<input type="radio" name="signatureOption" value="draw" checked /> Draw Signature
</label>
<label class="ml-3">
<input type="radio" name="signatureOption" value="upload" /> Upload Image
</label>
</div>


<div id="drawSignatureWrapper">
<div class="signature-wrapper">
@(Html.Kendo().Signature()
.Name("signature")
.Maximizable(false)
.Color("#4040b7")
.Smooth(true)
.HideLine(true)
)
</div>
<div class="notes">
Add your Signature and Export the PDF File
</div>
</div>


<div id="uploadWrapper" style="display:none;">
@(Html.Kendo().Upload()
.Name("signatureUpload")
.Async(a => a
.Save("Async_Save", "SigningPdf")
.Remove("Async_Remove", "SigningPdf")
.AutoUpload(false)
)
.Multiple(false)
.HtmlAttributes(new { accept = ".jpg,.jpeg,.png" })
.Validation(val => val.AllowedExtensions(new string[] { ".jpg", ".jpeg", ".png" }))
)

</div>

<div id="bottomtoolbar"></div>
</div>

///

$("#bottomtoolbar").kendoToolBar({
items: [
{
type: "button",
text: "Place Your Signature",
primary: true,
icon: "save",
click: exportToPdf
}
]
});

////

///

public string PreparePdf(string pdfData)
{
byte[] resultingBytes = null;
byte[] finalBytes = null;

PdfFormatProvider provider = new PdfFormatProvider();
byte[] renderedBytes = Convert.FromBase64String(pdfData);

RadFixedDocument document1 = null;
RadFixedDocument document2 = provider.Import(renderedBytes, new TimeSpan(0, 1, 0)); //signature selected

string[] pathPartsArr = new string[] { "wwwroot", "Uploads", "TemporaryFiles", "F7.pdf" };
string filePath = Path.Combine(pathPartsArr);

using (FileStream input = new FileStream(filePath, FileMode.Open, FileAccess.Read))
{
document1 = provider.Import(input, new TimeSpan(0, 1, 0));
}

using (MemoryStream ms = new MemoryStream())
{
provider.Export(document1, ms, new TimeSpan(0, 1, 0));
resultingBytes = ms.ToArray();
}

finalBytes = AppendContent(resultingBytes, document2);
string result = Convert.ToBase64String(finalBytes);

return result;
}

private byte[] AppendContent(byte[] resultingBytes, RadFixedDocument document2)
{
RadFixedPage foregroundContentOwner = document2.Pages[0];

MemoryStream ms = new MemoryStream();
byte[] renderedBytes = null;
using (MemoryStream stream = new MemoryStream(resultingBytes))
{
using (PdfFileSource fileSource = new PdfFileSource(stream))
{
using (PdfStreamWriter fileWriter = new PdfStreamWriter(ms, true))
{
foreach (PdfPageSource pageSource in fileSource.Pages)
{
using (PdfPageStreamWriter pageWriter = fileWriter.BeginPage(pageSource.Size, pageSource.Rotation))
{
pageWriter.WriteContent(pageSource);

using (pageWriter.SaveContentPosition())
{
double xCenteringTranslation = (pageSource.Size.Width - foregroundContentOwner.Size.Width) - 320;
double yCenteringTranslation = (pageSource.Size.Height - foregroundContentOwner.Size.Height) - 110;
pageWriter.ContentPosition.Translate(xCenteringTranslation, yCenteringTranslation);
pageWriter.WriteContent(foregroundContentOwner);
}
}
}
}
}
}
renderedBytes = ms.ToArray();
return renderedBytes;
}

Question & help needed :

I have implemented signature model using existing signature modal its working fine.

When i try upload upload a file and then try to patch that sign in pdf its not working. I am not uploading file fully just selecting file and after click on <Place Your Signature> calling exportpdf.

Core Grid: No Edit Button but having the ability to add a record inline with a Save Button

I have a grid that only has a Delete button defined. The user can add a new record inline. How can I show the Save and Cancel buttons instead of the Delete button. They should not have an Edit button option.

Here is my code snippet:

@(
Html.Kendo().Grid<CommunityAssociationMasterModel>()
.Name("CommunityAssociationMasterList")
.Columns(columns =>
{
columns.Bound(p => p.DistrictCode).Title("District").Width(70);
columns.Bound(p => p.IndexNumber).Title("Index").Width(100);
columns.Bound(p => p.CreditName).Title("Credit");
columns.Command(command => { command.Destroy(); }).Width(210);
})
.ToolBar(toolbar => { toolbar.Create().Text("Add Credit Account"); toolbar.Excel(); })
.Sortable()
.Scrollable()
.Pageable()
.HtmlAttributes(new { style = "height:650px;" })
.Events(events => events.Change("onChange"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Events(events => events.Error("error_handler"))
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.MasterCreditId);
model.Field(p => p.DistrictCode);
model.Field(p => p.IndexNumber);
model.Field(p => p.CreditName).DefaultValue("Community Assoc Credit").Editable(false);
})
.Read(read => read.Action("CommunityAssociation_Read", "CommunityAssociation"))
.Create(create => create.Action("CommunityAssociation_Create", "CommunityAssociation"))
.Destroy(read => read.Action("CommunityAssociation_Delete", "CommunityAssociation"))
)

I'm sure this is easy but I'm just not finding it.

Parent child Kendo Grid

Hi,

I need sample code for Asp.net core MVC Kendo Grid where Parent grid will be there & on any row click of parent grid, child grid will be load on same page.

Parent grid will be hide on that point when child grid will be displayed.

I also want to load a 'Subchild' grid on child grid row click in a popup.

I also want to save/load all grid's state data like column selected, filter, sorting & searching etc as well.

I can't find similar solution on forum. Please share if anyone have similar code example.

Thanks in advance.

QR Code Quiet Zone

I'm looking to use to the QR Code so it can be used on product packaging etc and one of them requirements is for the QR Code to have a set quiet zone around it. I can't find anything specific that allows a value to be set for this so I was wondering whether anyone else had hit the same issue or if they knew what the solution was for this.

Thanks

Kendo Wizard Trouble with including a dropdown right next to a kendo textbox

Hello, I am running into issues with my kendo wizard and within one step of the kendo wizard I want to add in a dropdown right next to my kendo textbox so it looks like this where the dropdown is right next to the textbox I added above the combo box. I tried using the

s.Add<ReferralModelLite>()
    .Title("Clinic Selection")
    .Form(f => f
        .Validatable(v => v.ValidateOnBlur(true))
        .Layout("grid")
        .Grid(g => g.Cols(3).Gutter(12))
        .FormData(Model)
        .Items(items =>
        {
            // Add Kendo TextBox above the ComboBox
            items.Add().Field("ClinicSearchText")
                .Label(l => l.Text("Search for Nearby Facilities by Address:"))
                .ColSpan(2)
                .Editor(e => e.TextBox()
                    .Placeholder("Type to search clinics by address...")
                    .HtmlAttributes(new { @class = "input-wide", @style = "width: 100%;" })
                );

            items.Add().Field(m => m.ClinicReferralId)
                .Label(l => l.Text("Select Clinic:"))
                .ColSpan(2) // Not full width, adjust as needed
                .Editor(e => e.ComboBox()
                    .Placeholder("Select or type a clinic...")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .Filter("contains")
                    .Suggest(true)
                    .DataSource(ds => ds.Read("GetClinicsSelectItems", "Clinic"))
                    .HtmlAttributes(new { @style = "width: 100%;" })
                );

here are the implementations I tried that gave me errors or undesirable effects.

@(Html.Kendo().Wizard()
    .Name("intake-referral-wizard")
    .Steps(steps =>
    {
        steps.Add().Title("Clinic Selection").Content(@<text>
            <div style="display: flex; align-items: center; gap: 8px;">
                @(Html.Kendo().TextBox()
                    .Name("ClinicSearchText")
                    .Placeholder("Type to search clinics by address...")
                    .HtmlAttributes(new { @class = "input-wide", style = "width: 250px;" })
                )
                @(Html.Kendo().DropDownList()
                    .Name("ClinicSearchCount")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new[] {
                        new { Text = "5", Value = "5" },
                        new { Text = "10", Value = "10" },
                        new { Text = "20", Value = "20" },
                        new { Text = "50", Value = "50" },
                        new { Text = "100", Value = "100" }
                    })
                    .Value("10")
                    .HtmlAttributes(new { style = "width: 80px;" })
                )
            </div>
            <!-- Add any other controls or markup for this step below -->
        </text>);
        // Add more steps as needed...
    })
)

(this led to syntax errors)

items.Add().Field("ClinicSearchText")
    .Label(l => l.Text("Search for Nearby Facilities by Address:"))
    .ColSpan(2)
    .EditorTemplate("ClinicSearchWithCount");

this editor template implementation while not yielding errors just displayed the word ClinicSearchWithCount where the template should have gone.

Help with this would be greatly appreciated.

Kendo Captcha Component with Kendo Wizard

Hello, I am attempting to use your kendo captcha component for my web project when I ran into some technical difficulties related to using the kendo captcha in conjunction to a kendo wizard. I'm trying to run this captcha component as part of a step in a kendo wizard. After adding in my component with the necessary endpoints and functions into my kendo wizard, I get a blank screen with no errors or any endpoints being hit. I know the endpoints work for the captcha component because I'm using the baseline example on the kendo documentation for the Captcha overview into the very first step of my kendo wizard, and my kendo wizard loaded up just fine before adding in the captcha component. I assured the captcha component works just fine on a blank index page, so I'm suspecting the kendo wizard might be at fault but I would like some assistance in confirming that theory.

Can someone me an example of the kendo captcha being utilized in a kendo wizard for ASP.NET Core?

Kendo Captcha Component API Methods not Working as Expected

Hello, I am attempting to use your kendo captcha component for my web project when I ran into some technical difficulties invoking your API handler methods for the captcha component. I followed the instructions on the basic level from this url to help me use this component and even after copying exactly what's given here as a proof of concept I'm still getting errors related to my project not recognizing the Captcha api methods. I keep getting errors tat GetCaptcha() or GetCaptchaText() doesn't exist in the current context.

Originally I was attempting to use a captcha component as part of my Kendo Wizard before the user goes onto the next steps of the wizard, but ran into issues having it work with the wizard(which works fine so I know I'm successfully pulling from Kendo.UI's nuget package from what I'm seeing. Can you give me any insights as to what could be wrong or even better a fresh example case using Kendo ASP.NET core's captcha component embedded with a kendo wizard stepper.

Error with Variable Interpolation in Toolbar Template When Using Tag Helpers in Kendo

Hi, I'm migrating a view that was originally written using HTML Helpers in ASP.NET MVC, and I have now ported it to ASP.NET Core using Tag Helpers.

There is a grid with another grid as its detail. The inner grid makes extensive use of variable interpolation—for example, in the grid name, the ID of the container row is used. This works correctly with the HTML Helper approach:

// the template reference
.ClientDetailTemplateId("template-controls")

//the child grid definition, variable interpolation in the grid name and the toolbar, both work
<script id="template-controls" type="text/x-kendo-template">
    @(Html.Kendo().Grid<ChildItem>()
        .Name("GroupGrid_#=GroupID#")
        .ToolBar(toolbar =>
        {
            toolbar.Template(
                "<div class='edit-toolbar'>" 
                    +"<button onclick='editChild(" + Model.ID + ",0,#=GroupID#, this)'>Edit</button>" 
                + "</div>"
            );
        })
    )
</script>

But when this code is migrated to ASP.NET Core using Tag Helpers, the variable interpolation in the toolbar does not occur. I would like to know whether this is an error in my code or a feature that is no longer supported.

Here is the Tag Helper code:

//the template reference
<grid-detail-template>
    <kendo-grid name="GroupGrid_${data.GroupID}">
        <toolbar client-template-id="GroupGrid_Toolbar"></toolbar>
    </kendo-grid>
</grid-detail-template>


//the child grid definition, variable interpolation works in the grid name , but the interpolation in toolbar do not
<script id="GroupGrid_Toolbar" type="text/html">
    <div class='edit-toolbar'>
        <button onclick=' editChild(@Model.ID,0,#=GroupID#, this)'>Edit</button>
    </div>
</script>

The browser shows the following error:
Uncaught ReferenceError: GroupID is not defined

The offending line is:

with (data) {
        $kendoOutput = '\n\n        <div class=\'edit-toolbar\'>\n            <button onclick=\'editChild(11941,0,' + (GroupID) + ', this)\' \n                    >\n                ' + ($kendoHtmlEncode(data.GroupID)) + ' : ' + (GroupID) + ' Edit #\n            </button>\n </div>\n ';
    }

BTW similar result if instead of the client-template-id attribute of the toolbar, it is declared as:

<toolbar>
                                    <toolbar-button>
                                        <toolbar-command-template>
// the variable interpolation placed here
                                        </toolbar-command-template>
                                    </toolbar-button>
                                </toolbar>

Muli-Select in Grid InLine Edit Mode

I have a .net core 8 web application, that has a grid that loads data via Ajax. When I edit a row, I'd like the `Contract` column to be a multi-select dropdown. When I edit a row, the control is rendered, but there is no data in it. I have set static data and the data does show up.

Here's my grid:

@(
Html.Kendo().Grid<ContractBenefitViewModel>()
    .Name("ContractBenefitGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Id).Hidden(true);
        columns.Bound(c => c.Contracts)
            .ClientTemplate("#= displayContracts(data) #")
            .EditorTemplateName("Contracts")
            .Width(400)
            .Filterable(false)
            .Sortable(false);
        columns.ForeignKey(c => c.BenefitId, (IEnumerable)ViewBag.Benefits, "Id", "DisplayName");
        columns.Bound(c => c.Gl)
            .Width(150);
        columns.Bound(c => c.Comments);
        columns.Bound(c => c.Active).Hidden(true);
        columns.Bound(c => c.Deleted).Hidden(true);
        columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            })
            .HtmlAttributes(new { style = "text-align: center;" })
            .Width(200);
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .ToolBar(toolbar =>
    {
        toolbar.Create();
    })
    .Pageable(pager =>
    {
        pager.Refresh(true);
        pager.PageSizes([10, 20, 50]);
    })
    .Sortable()
    .Filterable()
    .NoRecords()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(10)
        .ServerOperation(true)
        .Events(events => events.Error("error_handler").RequestEnd("onRequestEnd('staticNotifications')"))
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Contracts).DefaultValue(ViewBag.ContractId as List<ContractModel> ?? new List<ContractModel>());
            model.Field(p => p.BenefitValue).DefaultValue(ViewBag.BenefitId);
            model.Field(p => p.Comments);
            model.Field(p => p.LastUpdatedBy).DefaultValue(ViewData[Literals.EmailKey]);
            model.Field(p => p.Active).Editable(false).DefaultValue(Literals.Yes);
            model.Field(p => p.Deleted).Editable(false).DefaultValue(Literals.No);
        })
        .Filter(f =>
        {
            f.Add(x => x.Active).IsEqualTo(Literals.Yes);
            f.Add(x => x.Deleted).IsEqualTo(Literals.No);
        })
        .Read(read => read.Action("GetContractBenefits", "ContractBenefit").Data("forgeryToken"))
        .Create(create => create.Action("CreateContractBenefits", "ContractBenefit").Data("forgeryToken"))
        .Update(update => update.Action("UpdateContractBenefits", "ContractBenefit").Data("forgeryToken"))
        .Destroy(destroy => destroy.Action("DeleteContractBenefits", "ContractBenefit").Data("forgeryToken"))
        .Sort(sort =>
        {
            sort.Add(x => x.BenefitValue);
        })
    )
)

Here's the JavaScript

<script type="text/javascript">
    function displayContracts(data) {
        window.console.log('displayContracts()');
        return $.map(data.Contracts, function (e) { return e.DisplayName; }).join(", ");
    }
</script>

Here's my model

public class ContractBenefitViewModel
{
    public long Id { get; set; }

    public long BenefitId { get; set; }

    [Display(Name = "Benefit")]
    public string BenefitValue
    {
        get
        {
            var sb = new StringBuilder();
            if (Benefit is not null)
            {
                sb.Append(Benefit.Value);
                if (!string.IsNullOrWhiteSpace(Benefit.Gl))
                {
                    sb.Append(" (");
                    sb.Append(Benefit.Gl);
                    sb.Append(")");
                }
            }

            return sb.ToString();
        }
    }

    [Display(Name = "GL Code")]
    public string Gl => Benefit?.Gl ?? string.Empty;

    [Display(Name = "Comments")]
    [StringLength(ModelLiterals.CommentsLength)]
    [MaxLength(ModelLiterals.CommentsLength)]
    public string? Comments { get; set; }

    public string Active { get; set; } = ModelLiterals.Yes;
    public string Deleted { get; set; } = ModelLiterals.No;
    public string LastUpdatedBy { get; set; } = string.Empty;

    public BenefitModel? Benefit { get; set; } = null!;

    [UIHint("Contracts")]
    public IList<ContractModel> Contracts { get; set; } = new List<ContractModel>();
}

Here's my Editor Template (named Contracts.cshtml, in the EditorTemplates folder)

@model Lookups.ContractModel

<div style="width: 99%">
    @(Html.Kendo().MultiSelectFor(m => m)
    .DataValueField("Id")
    .DataTextField("DisplayName")
    .DownArrow()
    .AutoClose(false)
    .BindTo((IEnumerable<Lookups.ContractModel>)ViewData["contracts"])
        )
</div>

Here's the Index and Get data methods in my controller

[HttpGet]
public async Task<IActionResult> IndexAsync()
{
    Logger.LogDebug("{NameOf}()", nameof(IndexAsync));

    var contracts = await Client.GetContractsAsync();  //Client is my API client library - it fetches data from my API
    var benefits = await Client.GetBenefitsAsync();

    ViewBag.Contracts = contracts;
    ViewData["contracts"] = contracts;
    ViewBag.Benefits = benefitFinancialSupports;
    ViewBag.DefaultContractId = contracts?.FirstOrDefault()?.Id ?? -1;
    ViewBag.DefaultBenefitId = benefits?.FirstOrDefault()?.Id ?? -1;

    return View();
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<JsonResult> GetContractBenefitsAsync([DataSourceRequest] DataSourceRequest request)
{
    Logger.LogDebug("{NameOf}()", nameof(GetContractBenefitsAsync));
    var stopwatch = Stopwatch.StartNew();
    try
    {
        if (!ModelState.IsValid) return Json(InvalidModelStateMessage);
        var models = await Client.GetContractBenefitsAsync();
        var viewModels = models
            .Where(x => x is { Benefit: not null, Contract: not null })
            .GroupBy(x => x.BenefitId)
            .Select(g => new ContractBenefitViewModel
            {
                BenefitId = g.Key,
                Benefit = g.First().Benefit,
                Contracts = g.Select(x => x.Contract!).Distinct().ToList(),
                Id = g.First().Id,
                Comments = g.First().Comments,
                Active = g.First().Active,
                Deleted = g.First().Deleted,
                LastUpdatedBy = g.First().LastUpdatedBy
            })
            .ToList();

        return Json(await viewModels.ToDataSourceResultAsync(request));
    }
    catch (Exception ex)
    {
        Logger.LogError(ex, "{NameOf}()", nameof(GetContractBenefitsAsync));
        return Json(new { success = false, message = ex.Message });
    }
    finally
    {
        stopwatch.Stop();
        Logger.LogInformation("**** {NameOf} took [{Elapsed}]", nameof(GetContractBenefitsAsync),
            stopwatch.Elapsed);
    }
}

I should mention that I store the data one ContractId with one BenefitId (in a Mapping table), so when I return data via the `Client.GetContractBenefitsAsync()` call, it returns a List of 1-to-1 records, and I group them so I get a single Benefit with all Contracts that are associated with it (hence the Linq GroupBy call to build my ViewModel). This is how I want to present it to my users, so they can select as many Contracts as they want in the UI, and behind the scenes I'll turn into a 1:1 association. I'm just having trouble getting my data (the Contracts Multi Select) to display data. Am I missing something or is there another way to do this?

FileManager - capture server command response

Good afternoon,

I have a FileManager that I want to perform server-side checks when directories or files are renamed or deleted. For instance, the directory has files that must be kept.

I was hoping to use the command event:

command - API Reference - Kendo UI FileManager - Kendo UI for jQuery

Which mentions:

Fired when server command is executed (copy, move, delete or rename).
The event is useful to get feedback when server commands has failed or succeeded and take additional actions based on the status.

How, in my delete or update server methods, do I force an e.status of fail, and e.response text explaining why the delete or update was rejected, so I can handle that in the client Command event?

I can see that I could throw an error and then capture that in the Error event, but is it possible to do similar with the Command event? The scenario I'm describing isn't really an error, just some validation that failed.

Kind regards,

Richard

getting an error when deploying the code through azure pipelines

I am getting an error in telerik.ui.for.aspnet.core when I tried to built the code through Azure pipelines. This is the error:

D:\AgentAzServices\_work\9\s\NewHirePackage.csproj : error NU1301: The local source 'C:\Users\e245737\AppData\Roaming\Telerik\Updates\telerik.ui.for.aspnet.core.hotfix.2023.3.1114.commercial\wrappers\aspnetcore\Binaries\AspNet.Core' doesn't exist.

this is the second error, I am getting:

Error NU1301: The local source 'C:\Users\e245737\AppData\Roaming\Telerik\Updates\telerik.ui.for.aspnet.core.hotfix.2023.3.1114.commercial\' doesn't exist.

do I need to upgrade the "Telerik.UI.for.AspNet.Core" to higher version? Please see the attached picture, I dont see any higher version.

Thank you.

RadFixedDocument

Is there an example of reading a barcode from a PDF?

UI issue for Column Menu Filters in Treelist

Kendo Treelist with Column Menu filter, Dropdowns and DatePicker is not showing fully. Its hiding and while scrolling also not working properly

https://netcorerepl.telerik.com/wzOWuMaW50DO1PTf30

can we use 2020.1.114.440 kendo MVC dll in .net core application I am using same in .net framework 4.7.2

Hi Team,

Can we use 2020.1.114.440 kendo MVC dll in .net core application I am using same in .net framework 4.7.2.

Thanks & Regards

Amar Deep

Why is tag shown in viewHtml dialog editor?

It was my understanding that the Kendo editor is only designed to work with the content between the <body></body> tags and strip off <html>, <head>, and the <body> tags themselves but while I do see that those tags are indeed left out in the dialog editor a <meta> tag that I have in my <head></head> section is still being rendered (ref attached screenshot) which is not desired to the extent that I wish to re-apply the standard "format" to the saved body content changes that re-applies the standard prefix/suffix tags we use to define HTML formatted email templates (Ref below) where the {0} placeholder would represent the true editor content changes for the email template being posted back from client to be saved. However while this works I'm getting the original <meta> tag as part of the "content" when my expectation is, that because it is embedded in the <head> tag that it would get stripped out when the <body></body> internal content is rendered on the client. I am currently using the 2025.1.227 build of Telerik UI for ASP.NET Core.

private const string EmailTemplateFormat = "<html><head><meta content=\"text/html; charset=windows-1252\" /></head><body style=\"padding: 0; margin: 0;\">{0}</body></html>";

Detail Grid in Javascript not hitting Read function

The code below does not hit the read function so the details shows every detail row for each of the outer rows.(There should only be one detail row per outer row) I am following this example here: ASP.NET MVC Grid Detail Template Demo | Telerik UI for ASP.NET MVC which I use basically the same syntax for it and for an unknown reason theirs works and mine doesnt. My Javascript console gives me a 500 error which doesnt provide me with any way to resolve. Ive commented out stuff in the outer grid as I populate in the get method anyway. Can someone please look into this?

Outer grid:

<div id="RelatedAppearances-scheduling" style="margin-right:8px;border:none;padding:0;color:black; padding-bottom: 20px;">
	<div id="RelatedAppearancesTopRowInfo" >
		<div id="RelatedAppearances-Grid" style="width:99%;">
		@Html.Kendo().Grid(Model.RelatedAppearanceList).Name("RelatedAppearancesGrid").Size(ComponentSize.Small).Editable(GridEditMode.PopUp).Resizable(r => r.Columns(true)).ToolBar(r =>
		{
			r.Create().Text("Add Appearance");
		}

		).Columns(col =>	{
						   col.Bound(c => c.FileNumber).Title("File Number").Width(175);
						   col.Bound(c => c.CourtDate).Title("Court Date").Width(150);
						   col.Bound(c => c.CourtTime).Title("Court Time").Width(150);
						   col.Bound(c => c.Purpose).Width(100);
						}).Sortable().DataSource(dataSource => dataSource
						.Ajax()
			                        // .Read(r => r.Url("/Appearances/SchedulingInformation?handler=ReadEntity").Data("forgeryToken"))
					        // .Update(r => r.Url("/Appearances/SchedulingInformation?handler=UpdateEntity").Data("forgeryToken"))
						// .Destroy(r => r.Url("/Appearances/SchedulingInformation?handler=DestroyEntity").Data("forgeryToken"))
						// .Model(model =>
						// {
						// 	model.Id(p => p.AppearanceID);
						// })
						).ClientDetailTemplateId("RelatedAppearancesDetail");
							</div>
						</div>
					</div>

Javascript detail grid:

<script id="RelatedAppearancesDetail" type="text/kendo-tmpl">
		 	@(Html.Kendo().Grid(Model.RelatedAppearanceList).Name("innergrid_#=AppearanceID#")
			      .Columns(columns =>
		        	{
				columns.Bound(o => o.AppearanceDetails.AppearanceJudge).Title("Judge").Width(80);
				columns.Bound(o => o.AppearanceDetails.AppearanceType).Title("Appearance Type").Width(80);
				columns.Bound(o => o.AppearanceDetails.Outcome).Title("Outcome").Width(80);
				columns.Bound(o => o.AppearanceDetails.ToTH).Title("To T & H").Width(80);
				})
				.DataSource(dataSource => dataSource
				.Ajax()
				.Read(read => read.Action("ReadRelatedAppearanceDetail", "Grid", new { AppearanceID = "#=AppearanceID#" })))
				.Sortable()
				.ToClientTemplate())
</script>

Razor method:

        public JsonResult ReadRelatedAppearanceDetail(int AppearanceID, [DataSourceRequest] DataSourceRequest request)
        {
            var curAppearance = RelatedAppearanceList.Where(a => a.AppearanceID == AppearanceID).FirstOrDefault();
            return new JsonResult(new[] { curAppearance }.ToDataSourceResult(request, ModelState));

        }

Related Appearance Model:

 public class RelatedAppearanceDTO
 {
     public int AppearanceID {  get; set; }

     public string FileNumber {  get; set; }

     public string CourtDate { get; set; }

     public string CourtTime { get; set; }

     public string Purpose {  get; set; }

     public string AppearanceType {  get; set; }

     public string CalendarRemarks {  get; set; }

     public string Outcome {  get; set; }

     public string OutcomeComments {  get; set; }

     public string ToTAndH {  get; set; }

     public RelatedAppearancesDetailModel AppearanceDetails { get; set; }

 }

Related Appearance Detail Model:

  public class RelatedAppearancesDetailModel
  {
      public int AppearanceID { get; set; }
      public string AppearanceJudge { get; set; }

      public string AppearanceType { get; set;}

      public string CalendarRemarks { get; set; }

      public string Outcome { get; set; }

      public string OutcomeComment { get; set; }

      public string ToTH { get; set; }

      public string Minutes { get; set; }

      public string Disposition { get; set; }


  }

Telerik ASP.Net Core Upload Asynchronous Mode Fallback

Hi, I'm referring to the article below:

https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/upload/modes-of-operation#asynchronous-mode-fallback

In the article Asynchronous Mode Fallback is When Upload which is placed inside a form and configured for asynchronous operation.

I have done this, however after uploading some file (and failed since I didn't implement the controller) the form post still doesn't contain any Files.

Is there a specific to implement a fallback mechanism? a sample will be very helpful.

How to set the DatePicker default text

I have a nullable DateTime property in my view model, and I'm binding it to a DatePicker, with a custom date format like so:

@Html.Kendo().DatePickerFor(model => model.MyNullableDateTimeField).HtmlAttributes(new { @class = "form-control" }).Format("MM/dd/yyyy").ParseFormats("MM/dd/yyyy", "yyyy-MM-dd").DateInput(true)

However, it displays like this:

And when I try to submit the form, I get a model validation error: "The value 'month/day/year' is not valid for <my property name>", and it is not possible for me to clear the text from the control at all.

If I input a valid date, it does submit correctly, but I need to be able to have a null value here. I tried
$("#MyNullableDateTimeField").data("kendoDatePicker").value(null) but that did not work. (also tried .val instead of .value)

Also, if there is anyway to have the DatePicker control submit the value in the more standard yyyy-MM-dd format, and just display it in the custom format, I would very much like to know that as well, as it would save me a lot of trouble. I don't understand why it submits a raw string in the "MM/dd/yyyy" format when a standard <input type="date"> will submit in a yyyy-MM-dd format and just display the value in the regular format.

Thanks!

combobox initial value and remote datasource

hi, I'm using a combobox like the one below, when the model already has a country assigned, the combobox shows the Id instead of the Name.
At page load I can see that the URL Countries is requested, however this doesn't make a difference.

so the question is, how can I to set the initial value?. I've read examples but they all use a local datasource with bind-to, not a remote datasource. is this possible?

regards

                <kendo-combobox for="CountryId" suggest="true"
                                datatextfield="Name"
                                datavaluefield="Id" filter="FilterType.Contains">
                    <datasource server-filtering="true">
                        <transport>
                            <read url="@Url.Action("Countries", "Common")"/>
                        </transport>
                    </datasource>
                </kendo-combobox>

Bind two grids from one read action

Good afternoon,

Is there a way to populate a second grid based on the outcome of the read action for the first grid?

For example, the read action for grid1 pulls a list of files from the file system in and runs checks against each file. The list generated is returned to load grid1. During the processing a number of errors are generated, creating a second list. Ultimately I'd like grid2 to display that list.

It seems unnecessary to have a separate action for grid2 that is essentially running the same processing, just returning a different list.

With the two grids having AutoBind set to false I assume I can control the order the girds are populated. Could grid2 be populated from a list stored in ViewData?

This article explains how two models can be returned to a single View, but ToDataSourceResult in the Controller can only return one model:

https://www.c-sharpcorner.com/UploadFile/ff2f08/multiple-models-in-single-view-in-mvc/

Kind regards,

Richard

Telerik Package restore for ASP.Net Core in a stand alone server not happening

Hi Team,

In our ASP.Net Core MVC project we are using the Telerik Feed for automatic package restoration which work fine by setting up the Username and Password in the nuget.config file inside the %AppData% Folder(C:\Users\-----\AppData\Roaming\NuGet present inside windows), but when we try to deploy build into the server Nuget package restore is failing. May I expect any assistance on this or any steps are we missing which we need to follow to get restoration happen properly on the server.

ListBox wil not stay within defined column

Using Bootstrap grid row/columns, the listbox will not stay within the bounds of the column it is contained in. Further, I have tried to limit it's width in CSS and it refuses. What needs to be set to get this to conform to standard layout rules? We are using HTMLHelper code to generate the listboxes.

numerictextbox spin doesn't trigger a change event

please disregard this post

License errors when displaying a Chart and a PDF Viewer on the same page

I have a simple test page that has a Chart and a PDF Viewer. I can not get both to work at the same time without getting a license error.

Below is how I have tried loading the Kendo library at the top of the page. For the chart, I need to load it as a script for it to work. For the PDF Viewer I need to load it as a module. But loading both always breaks the license. I have tried version combinations (see below)

How do I get a chart on the same page as the PDF Viewer and have the license work?

Scenario 1:

<script src="~/Portal/kendo/kendo.all.min.js" ></script>
<script src="~/Portal/kendo/kendo.aspnetmvc.min.js" ></script>

Chart loads correctly
PDF Viewer fails to load
The license loads correctly

Scenario 2:

<script src="~/Portal/kendo/kendo.all.min.js" type="module" ></script>
<script src="~/Portal/kendo/kendo.aspnetmvc.min.js" type="module" ></script>

Chart fails to load
PDF Viewer loads correctly
The license loads correctly

Scenario 3:

<script src="~/Portal/kendo/kendo.all.min.js" ></script>
<script src="~/Portal/kendo/kendo.aspnetmvc.min.js" ></script>

<script src="~/Portal/kendo/kendo.all.min.js" type="module" ></script>
<script src="~/Portal/kendo/kendo.aspnetmvc.min.js" type="module" ></script>

Chart loads correctly
PDF Viewer loads correctly
The license fails to load

Thanks,

Richard