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

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

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>

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.