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