Questions on UI for ASP.NET Core Forum

1 answer

39 views

Telerik Grid Popup Custom Template Not working

I have a grid in where I added edit button that is connected to a custom template. When I click the button to edit fields for this row. It does not pop up my custom template but the default one with all the data. this is what I have:

@(
                    Html.Kendo().Grid(Model.GroupMemberships)
                    .Name("MemberGroupsGrid")

                    .Columns(columns =>
                    {
                        
                        columns.Template(
                        "# if (CanEdit) { #" +
                        "<a href='javascript:void(0)' name='expireDeleteLink' class='full-link w-100 h-100 d-flex align-items-center justify-content-center' " +
                        "title='Expire or Delete Member' " +
                        "onclick='openExpireDeleteModal(\"#= Id #\", \"#=GroupName#\", \"#=Name#\", \"#=IsExpired#\", \"" + Model.UserCanDeleteString + "\")'> " +
                        "<i class='fa-regular fa-trash-can text-danger' aria-hidden='true'></i>" +
                        "</a>" +
                        "# } #"
                        )
                        .Width(100)
                        .HtmlAttributes(new { @class = "text-center p-0 align-middle" })
                        .Media("(min-width: 850px)");
                        
                        columns.Command(command => command.Edit().Text(" ").IconClass(" fa-solid fa-user-pen text-secondary").HtmlAttributes(new { title = "Edit Member" }).Visible("CanEdit"));
                        columns.Bound(m => m.GroupId).Title("Group ID").Hidden(true).Exportable(false);
                        columns.Template("#=resColTemplate(data)#").Media("(max-width: 849px)");
                })
                .Pageable()
                .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("GroupMemberDetailTemplate").Window(w => w.Title("Member Group Details").Width(400).Height(300)))
                .Sortable()
                .Excel(excel => excel
                    .FileName("GroupMemberships.xlsx")
                    .Filterable(true)
                    .AllPages(true))
                .AutoBind(true)
                @* .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("MemberGroup")) *@
                .Events(ev => ev.Change("onChange").DataBound("onDataBound"))
                .HtmlAttributes(new { @class = "table table-hover align-middle" })
                .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
                .Read(read => read.Action("GetGroupMemberships", "Members").Data("additionalData"))
                .PageSize(10)
                )
                )

this is the template

@model AMPS.Web.Models.MemberGroupsManagementPageModel.GroupMemberships
@{
}

<div class="row">
    <div class="col-md-6">
     @(Html.DisplayFor(model => model.MemberName)))
    </div>
 </div>

It is located in the ~Views/Shared/EditiorTemplates

General Discussions

Grid

answered on 22 May 2026

2 answers

65 views

Grid Validation Tooltip Styling

I have several grids with inline dropdown editors. The system users are complaining that the validation tooltips block the top options for the dropdown. Is there a way to specify that their position be placed at the top of the field rather than the bottom.

Grid

ToolTip

answered on 22 May 2026

2 answers

122 views

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

Upload

updated answer on 20 May 2026

1 answer

47 views

Make the Telerik Grid Client DetailTemplate Editable

I currently have a Grid that I want the ClientDetailTemplateId to be the editable area for fields that are currently not displayed on the grid. Then have an update button that uses the Datasource function of Update to update that row's values.

@( Html.Kendo().Grid(Model.Members)
                .Name("membersGrid")
                .Columns(columns =>
                {
                              
                        
                    })
                    .AutoBind(true)
                    .HtmlAttributes(new { @class = "table table-hover align-middle faux-k-table" , style =" width: 100%"})
                    .Pageable()
                    .Sortable(false)
                       .ClientDetailTemplateId("DetailGridTemplate")          
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(50)
                                .Events(e =>  e.RequestStart("onRequestStart")
                                             .RequestEnd("onRequestEnd")
                                              )
                        .Read(read => read.Action("GetGroupMembers", "Members").Data("additionalData"))
                    ).NoRecords(n => n.Template(@"<div class=""alert alert-warning"">
                        No data found with selected filter values or there are no eligible members from your MEC to view.
                    </div>"))
                        )


script id="DetailGridTemplate" type="text/kendo-tmpl">

                     
</script>

General Discussions

Grid

answered on 15 May 2026

1 answer

35 views

[Solved] AppBar Tag Helper - how to apply primary theme color

Hi,

I'm using Telerik UI for ASP.NET Core with a custom theme exported from Theme Builder (Default base). The theme is loaded as a local CSS.

Theme
Custom Theme Builder export with a teal primary color.

Layout (`_Layout.cshtml`)

<head>
    <link rel="stylesheet" href="~/css/my-theme.v0.1.0.css" asp-append-version="true" />
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.kendostatic.com/2026.1.415/js/kendo.all.min.js"></script>
    <script src="https://cdn.kendostatic.com/2026.1.415/js/kendo.aspnetmvc.min.js"></script>
</head>
<body class="k-body k-bg-surface">
    <header>
        <kendo-appbar name="appBar">
            <items>
                <appbar-item type="AppBarItemType.ContentItem"
                    template="<a class='k-button k-button-flat' href='/Index'>Index</a>">
                </appbar-item>
            </items>
        </kendo-appbar>
    </header>
</body>

What works

The AppBar correctly changes background when switching between `AppBarThemeColor.Dark`, `AppBarThemeColor.Light`, and `AppBarThemeColor.Inherit`. The theme is loading and the component is initializing correctly.

Questions

1. Is there a way to apply `primary` as the AppBar theme color using the Tag Helper?

Thanks

AppBar

answered on 13 May 2026

2 answers

30 views

Keyboard trap

Keyboard trap. According the Telerik documentation a user should be able to use the keyboard to navigate out of the spreadsheet (https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/spreadsheet/accessibility/keyboard-navigation), but I don’t see it working in their demo. Does anyone have any solutions for this bug?

Accessibility

answered on 11 May 2026

1 answer

22 views

Links in Grid Hierarchy

When a table element contains a link, mouse actions differ from keyboard navigation. Anyone have a work-around for this so that there is a keyboard equivalent to a mouse click action?

Accessibility

answered on 08 May 2026

1 answer

32 views

Keyboard accesibility

Does anyone know if there are any plans for custom cell editing (e.g., https://demos.telerik.com/aspnet-core/spreadsheet/custom-editors) and filtering (e.g., https://demos.telerik.com/aspnet-core/grid/filter-row) to be keyboard accessible?

Accessibility

answered on 08 May 2026

1 answer

20 views

Table headings and table cells/rows coded as separate tables instead of single table

Telerik renders tabular data in separate tables instead of as one table. Does anyone have a solution so that the table can meet WCAG 1.3.1 level A http://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic

Accessibility

answered on 08 May 2026

2 answers

81 views

[Solved] Upload component's auto-upload and drag-and-drop functionality not working

I am working through Telerik's UI for ASP.NET Core tutorial on YouTube ... RPSTrackerASPCore ... and I am at the point where the instructor is walking us through adding an Upload component to the project. I am using a much more recent version of Kendo UI so I have to tweak some things to get them to work properly. So far that hasn't been a problem. But the Upload component has me stumped.

The VS projects are .Net 9.0.

I am using Telerik.UI.for.AspNet.Core (2026.1.325) and I am loading the JavaScript assets as ECMAScript modules. So here is the list of modules I am currently loading:

<script src="~/lib/kendo-ui/mjs/kendo.core.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.button.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.textbox.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.textarea.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.slider.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.tabstrip.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.dataviz.chart.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.grid.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.tilelayout.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.upload.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.draganddrop.js" type="module"></script>
<script src="~/lib/kendo-ui/mjs/kendo.aspnetmvc.js" type="module"></script>

And here is my component definition:

            @(Html.Kendo().Upload()
                .Name("files")
                .Multiple(true)
                .Async(a => a
                    .Save("SaveAttachmentsAsync", "Upload")
                    .AutoUpload(true)
                )
                .Validation(v => v.AllowedExtensions(new string[] { ".jpg", ".png", ".jpeg" }).MaxFileSize(10485760))
            )

And here is the inline JavaScript generated by the component:

<script type="module">kendo.syncReady(function(){jQuery("#files").kendoUpload({"async":{"autoUpload":true,"saveUrl":null},"multiple":true,"validation":{"allowedExtensions":[".jpg",".png",".jpeg"],"maxFileSize":10485760}});});</script>

I include this because I think it is odd that the async.saveUrl parameter is set to null.

I can use the "Select Files" button to select a file, and they do get added to the file list, but the autoupload functionality is not triggered. And there are no errors in the console. And the drag-and-drop functionality is not active. If I drag an acceptable file over the component the file (an image) just gets opened in a new browser tab.

I have breakpoints in my UploadController.SaveAttachmentsAsync method but they are never hit.

If I submit the form and break on the method that handles the page's form post request I DO see the file included in the request, so at least that part does actually work.

But none of the additional Kendo functionality seems to work. I thought perhaps I am missing an ECMAScript module that needs to be loaded but the documentation doesn't mention any. There are no errors in the browser console so there doesn't seem to be a JavaScript problem happening.

I did replace the modules with the standard vanilla kendo.all.min.js and kendo.aspnetmvc.min.js scripts but I get the exact same behavior.

So what am I missing?

Upload

answered on 20 Apr 2026