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>

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

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 

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:

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

    <!-- Toggle buttons -->
    <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>

    <!-- Kendo Signature -->
    <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>

    <!-- File upload -->
    <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
         }
     ]
 });

////

function exportToPdf(e) {
    toggleKendoLoader("show");

    const option = $("input[name='signatureOption']:checked").val();

    if (option === "draw") {
        const signature = $("#signature").getKendoSignature();
        kendo.drawing.drawDOM(".k-signature-canvas > canvas")
            .then(group => kendo.drawing.exportPDF(group))
            .done(refreshPdfViewer);
    }
    else if (option === "upload") {
        // ✅ Access file directly from upload input
        const fileInput = $("#signatureUpload").closest(".k-upload").find("input[type=file]")[0];
        if (!fileInput || !fileInput.files.length) {
            toggleKendoLoader("hide");
            alert("Please select an image first.");
            return;
        }

        const file = fileInput.files[0];
        //console.log("Selected file:", file);

        const reader = new FileReader();

        reader.onload = function (evt) {
            //console.log("Reader loaded:", evt);
            const img = new Image();
            img.src = evt.target.result;

            img.onload = function () {
                //console.log("Image loaded:", img);
                const canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;
                const ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);

                kendo.drawing.drawDOM(canvas)
                    .then(group => kendo.drawing.exportPDF(group))
                    .done(refreshPdfViewer);
            };
        };

        reader.onerror = err => {
            toggleKendoLoader("hide");
            console.error("FileReader error:", err);
        };

        reader.readAsDataURL(file);
    }
}

///

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.

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.

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.

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