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:

{

     //other logic here

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

}

This is the info I received from Copilot:

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

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>

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?

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?

Will the Telerik Agentic UI Generator be provided for ASP.NET Core?

Thanks

Hi All,

I am finding telerik videos and guides (documentation)  to be NOT very useful for learning how to use telerik. I have tried watching the videos and finding them to be outdated but still lacking guidance on how to do a thing telerik. Are the guides and video vague because this is a paid product and the goal is to not give a user true guidance on how to use the product? Or is it assumed that if you purchased telerik you should know how to use it regardless if you have had any exposure to it or not?

I feel like I have missed some prerequisite or I skip some step where you can learn how to apply these controls to you razor pages? I have even looked at and downloaded the the RPS example and attempted to follow the video and it shows you knowing on how to wire up any of the controls.

I can share what I am looking for it it helps.I have a basic index page that was built when I create my controller with views. I just want to apply telerik / kendo ui to that index page.So razor builds a view with a basic list index. I would like an example that shows me how to convert that index to use a telerik control. Do example such as that exist??

Attached are images of a test mvc .net core  that I built using the telerik project template. So if I wanted to change my index page that used data from my database to a gride view using telerik / kendo Ui is there an example any where that can show me how to do such a task>?

Thanks!!!

Thank you!

Can some one point me to a set of good instructions that a beginner with telerik can follow?

Currently I am feeling we made a mistake purchasing a license for this product as we can't make use of it..

Tried Looking here

https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/grid