Hello,

We are having scrolling issues with the fairly large menu and sub menu items. Instead of scrolling child menu items on selection, it scrolls the main menu options.

Please advise.

 function onChangesideMenuSwitch(e) {
     var menuContainer = $("#menuContainer");
     var mainSection = $("#mainSection");
     if (!e.checked) {
             menuContainer.hide();
             menuContainer.css("width", "0");
             menuContainer.css("z-index", "-1");
             mainSection.css("padding-left", "0");
         }
 else {
             menuContainer.show();
             menuContainer.css("width", "250px");
             menuContainer.css("z-index", "3");
             mainSection.css("padding-left", "250px");
         }
         }

@model Models.Menu.TopMenuModel
@{
    string pathBase = (string)ViewBag.PathBase;
}
    <style>
        #menuContainer {
            width: 250px;
            overflow: visible;
            display: block;
            z-index: 3;
            height: calc(100% - 100px);
            background-color: white;
            float: left;
            flex: none;
            position: fixed;
            top: 100px;
            margin-bottom: 10px;
        }

        .menuSeperator {
            padding: 2px;
            background-color: var(--cwru-blue);
            border-style: solid;
            border-width: 1px;
        }


        .menuSeperator > .k-menu-link-text {
            font-style: italic;
            color: whitesmoke;
            white-space: normal;
        }

        .menuItem {
            font-style: italic;
            color: whitesmoke;
            background-color: var(--cwru-blue);
        }

        .menuExpandable {
            color: var(--cwru-blue);
            white-space: normal;
            min-width: 200px;
        }

        .k-menu, .k-menu-link-text {
            font-size: 16px;
            color: black;
            padding: 2px;
        }
    </style>


<script type="text/javascript">
    $(document).ready(function () {
        $("#leftMenu").height(window.innerHeight - 120)
        $(window).resize(function () {
            $("#leftMenu").height(window.innerHeight - 120)
        });
    });
</script>

<div id="menuContainer">
    @(Html.Kendo().Menu()
                .Name("leftMenu")
                .HoverDelay(200)
                .Orientation(MenuOrientation.Vertical)
                .Direction(MenuDirection.Right)
                .Scrollable(true)
                .Items(items =>
                {
                    foreach (var menuEntryGroup in Model.AllowedPages.Where(ap => ap.parent_id == null).GroupBy(ap => ap.menucategory_id))
                    {
                        //menu category
                        items.Add().Text(menuEntryGroup.First().menucategory.name)
                            .LinkHtmlAttributes(new { @class = "menuSeperator" }).HtmlAttributes(new { @class = "menuItem" });

                        foreach (var menuEntry in menuEntryGroup)
                        {
                            //top level items.
                            items.Add().Text(menuEntry.name).Url((pathBase == "/" ? "" : pathBase) + "/" + menuEntry.controller + "/" + menuEntry.Viewer)
                                .Items(subitem =>
                                {
                                    foreach (var subentry in Model.AllowedPages.Where(ap => ap.parent_id == menuEntry.id))
                                    {
                                        //second level items
                                        subitem.Add().Text(subentry.name).Url((pathBase == "/" ? "" : pathBase) + "/" + subentry.controller + "/" + subentry.Viewer).LinkHtmlAttributes(new { @class = "menuExpandable" })
                                            .Items(subsubitem =>
                                            {
                                                foreach (var subsubentry in Model.AllowedPages.Where(ap => ap.parent_id == subentry.id))
                                                {
                                                    //third level items
                                                    subsubitem.Add().Text(subsubentry.name).Url((pathBase == "/" ? "" : pathBase) + "/" + subsubentry.controller + "/" + subsubentry.Viewer);
                                                }
                                            });
                                    }
                                });
                        }

                    }
                })
        )
</div>

We are looking to display total number in donut chart.

Is it possible?

Number display in the center should display total when we do not mouse hover over any section of donut.

But if hover over any section, it should show that particular number in center. Look at image below.

Hi,

I am quite new in working with Telerik and the current project that I am working is an MVC project that uses Telerik UI components for the frontend.

What I am aiming for is having several Views with each of them implementing a grid component. In the grid I have imported a list of items that can each be edited and deleted. The editing functionality uses the pop up component. However, the client is requesting that when the edit pop up opens the process of editing would be divided into two different windows/tabs meaning that in the pop up the user could navigate back and forth. That is because the entities that are being editing are large so for a more user friendly solution the client wants to divide the editing process.

So far I have not yet come across a straight forward solution to implement something like this. When in comes to implementation for a simple one tab Pop up it seems simple however if I want to introduce several tab solution, it seems to be easier to just go pure javaScript way as I am struggling mixing Telerik and my own scripts. 

I hope I making my issue clear! I would like apologize if this seems like non-problem for the pros, cause unfortunately I am not one...

Regards

Juste

Hi,

Were looking into using the PDF viewer and wonder whether it's possible to render a PDF server-side? I understand that using pdf.js is obviously rendering client-side, but can you tell me if I use the document processing library whether it does indeed render server side?

If it does can you tell me if this scenario is supported in .Net 8.0?

I'm a bit confused because in the PDF viewer documentation here: https://docs.telerik.com/aspnet-core/html-helpers/pdf/pdfviewer/dpl-processing it says "To use DPL Processing in a project, it must target 4.6.2 .NET Framework", but in the DPL documentation here: https://docs.telerik.com/devtools/document-processing/introduction it says "The Telerik Document Processing libraries are available in .NET Framework and .NET Standard (.NET Core) compatible versions"

So is the .Net 4.6.2 limitation just for PDF viewer or is the documentation just out of date?

Thanks!

I had recently had an issue with Kendo Grid's export to excel feature not working and it was correctly resolved in this forum post:
https://www.telerik.com/forums/kendo-grid-excel-export-crashing-widget

I am now experiencing an issue that appears to be distinct and unrelated to the above problem on a different view within my project.

I have a Grid where I want to export the entire contents of the grid (both hidden and unhidden columns) to an excel spreadsheet.  When I click my "Export to Excel" button the following happens:

• The "Exporting" animation shows up and hangs

• I receive a console error indicating that the export request returned a status 405, I can also see this in the network tab
  

• The breakpoint I set in my ExcelExportSave() method in my HomeController is not being hit.

What could be causing this? 

I have already implemented the fix suggested in the above linked post to import that I add JSZip directly to my layout:

<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

Additional Context

The Export to Excel will fail even if I attempt to export the contents of the grid before any lines are added.

This is a read-only grid that populates 1 to N lines based on an Ajax call.  Due to the way I need this to function for my users I did not use the dataSource CRUD operations.  Rather, I use external JavaScript to directly edit the table contents.  This could be a possible source of the problem, but I do not know how I would fix.

There are two ways to add lines to the table, the first is to paste in rows and wait for the Ajax call.  The second is to add them using an input field above the grid. 

The Code

Here's the table and the relevant JavaScript that populates it:

Html.Kendo().Grid<UPH.ADCommander.Models.ExtendedUserDisplayObject>()
.Name("Grid")
.Columns(columns =>
{
    columns.Bound(c => c.SamAccountName).Title("SamAccount").Width(110).HeaderHtmlAttributes(new { style = "font-weight: bold" }).EditorTemplateName("SamAccountNameEditor");
    columns.Bound(c => c.GivenName).Title("First Name").HeaderHtmlAttributes(new { style = "font-weight: bold" });
    columns.Bound(c => c.MiddleInitial).Title("MI").Width(50).HeaderHtmlAttributes(new { style = "font-weight: bold" }).Hidden(true);
    columns.Bound(c => c.Surname).Title("Last Name").HeaderHtmlAttributes(new { style = "font-weight: bold" });
    columns.Bound(c => c.Title).Title("Title").HeaderHtmlAttributes(new { style = "font-weight: bold" });
    columns.Bound(c => c.Manager).Title("Manager").HeaderHtmlAttributes(new { style = "font-weight: bold" });
    columns.Bound(c => c.ExtendedAttribute2).Title("Ex. Attr 2").HeaderHtmlAttributes(new { style = "font-weight: bold" });
    columns.Bound(c => c.ExtendedAttribute3).Title("Ex. Attr 3").HeaderHtmlAttributes(new { style = "font-weight: bold" }).Hidden(true);
    columns.Bound(c => c.ExtendedAttribute4).Title("Ex. Attr 4").HeaderHtmlAttributes(new { style = "font-weight: bold" }).Hidden(true);
    columns.Bound(c => c.ExtendedAttribute5).Title("Ex. Attr 5").HeaderHtmlAttributes(new { style = "font-weight: bold" }).Hidden(true);
    columns.Bound(c => c.ExtendedAttribute6).Title("Ex. Attr 6").HeaderHtmlAttributes(new { style = "font-weight: bold" }).Hidden(true);
    columns.Bound(c => c.ExtendedAttribute7).Title("Ex. Attr 7").HeaderHtmlAttributes(new { style = "font-weight: bold" }).Hidden(true);
    columns.Bound(c => c.ExtendedAttribute9).Title("Ex. Attr 9").HeaderHtmlAttributes(new { style = "font-weight: bold" }).Hidden(true);
    columns.Bound(c => c.ExtendedAttribute12).Title("Ex. Attr 11").HeaderHtmlAttributes(new { style = "font-weight: bold" }).Hidden(true);
    columns.Bound(c => c.ExtendedAttribute13).Title("Ex. Attr 12").HeaderHtmlAttributes(new { style = "font-weight: bold" }).Hidden(true);
    // test columns, add more once PoC is getting the necessary data
})
.Sortable()
.Selectable(selectable => selectable
    .Mode(GridSelectionMode.Multiple)
    .Type(GridSelectionType.Cell)
)
.Navigatable()
.Scrollable()
.AllowCopy(true)
.ToolBar(tools =>
{
    tools.Custom().Text("Copy to Clipboard").HtmlAttributes(new { id = "copyButton" });
    tools.Excel();
    tools.Custom().Text("Clear").HtmlAttributes(new { id = "clearButton" });
    tools.Search();
})
.AutoBind(false)
.DataSource(dataSource => dataSource
    .Ajax() // no actual Ajax call is made with this, this is solely to define a primary key for the table so we can use the dataSource API
    .Update("GetUserDetail", "UserLookup")
    .Model(model =>
    {
        model.Id(p => p.SamAccountName); // Set SamAccountName as the ID field
    })
)
.Excel(excel => excel
    .FileName("UserDetails_" + DateTime.Now.Date.ToShortDateString() + ".xlsx")
    .Filterable(true)
    .ProxyURL(Url.Action("ExcelExportSave", "Home"))
)

    function initializeGridPasteHandler(gridSelector) {
        $(gridSelector).on('contextmenu', function (e) {
            if ($(e.target).is(".k-link, .k-grid-toolbar, .k-grid-pager")) {
                return;
            }

            var offset = $(this).find("table").offset();
            var textarea = $("<textarea>");
            textarea.css({
                position: 'absolute',
                opacity: 0,
                top: offset.top,
                left: offset.left,
                border: 'none',
                width: $(this).find("table").width(),
                height: $(this).find(".k-grid-content").height()
            })
                .appendTo('body')
                .on("click", function (e) {
                    textarea.remove();
                    $(document.elementFromPoint(e.clientX, e.clientY)).click();
                })
                .on('paste', function () {
                    setTimeout(function () {
                        var value = $.trim(textarea.val());
                        var grid = $(gridSelector).data("kendoGrid");
                        var rows = value.split('\n');

                        var newRows = addRowsToGrid(rows);

                        sendUserDetailsToController(newRows);

                        textarea.remove();
                    });
                }).focus();

            return false;
        });
    }

function addRowsToGrid(rows) {
    console.log("addRowsToGrid fired");
    var grid = $("#Grid").data("kendoGrid");
    var existingData = grid.dataSource.data().toJSON();

    var newData = rows.map(function (row) {
        return { SamAccountName: row.trim() };
    });

    // Append new data to the existing data
    var combinedData = existingData.concat(newData);

    // Update the grid with the combined data
    grid.dataSource.data(combinedData);

    return newData;
}

// send the controller a list of samAccount names to get the user detail information
function sendUserDetailsToController(newRows) {
    console.log("sendUserDetailsToController fired");

    // Show the loading indicator
    $("#gridLoader").show();

    var samAccountNames = newRows.map(function (row) {
        return row.SamAccountName;
    });

    // Make the AJAX call with the new samAccountNames only
    $.ajax({
        type: "POST",
        url: "/UserLookup/GetUserDetails",
        contentType: "application/json",
        data: JSON.stringify(samAccountNames),
        success: function (response) {
            console.log("Data sent to the controller successfully.");
            updateGridWithUserDetails(response); // Update the grid with the response data
        },
        error: function (xhr, status, error) {
            console.log("An error occurred while sending data to the controller.");
        },
        complete: function () {
            $("#gridLoader").hide();; // close loading animation
        }
    });
}

function updateGridWithUserDetails(userDetails) {
    console.log("updateGridWithUserDetails fired");
    var grid = $("#Grid").data("kendoGrid");
    var dataSource = grid.dataSource;
    var data = dataSource.data();

    userDetails.forEach(function (userDetail) {
        var matchedRow = data.find(function (row) {
            console.log("user: " + userDetail.samAccountName);
            return row.SamAccountName.toLowerCase() === userDetail.samAccountName.toLowerCase();
        });

        console.log("matched row:" +matchedRow.SamAccountName)
        // Necessary in case of a case mismatch, e.g. SSS401 will match sss401 on the backed if you don't do this you'll get a fun bonus row added.
        matchedRow.SamAccountName = userDetail.samAccountName;

        if (matchedRow) {
            console.log("matched row:" + matchedRow.SamAccountName);

            // Update the SamAccountName to the correctly cased value
            matchedRow.set("SamAccountName", userDetail.samAccountName);

            // Update the rest of the row with the user details
            matchedRow.set("GivenName", userDetail.givenName);
            matchedRow.set("MiddleInitial", userDetail.middleInitial);
            matchedRow.set("Surname", userDetail.surname);
            matchedRow.set("Title", userDetail.title);
            matchedRow.set("Manager", userDetail.manager);
            matchedRow.set("ExtendedAttribute2", userDetail.extendedAttribute2);
            matchedRow.set("ExtendedAttribute3", userDetail.extendedAttribute3);
            matchedRow.set("ExtendedAttribute4", userDetail.extendedAttribute4);
            matchedRow.set("ExtendedAttribute5", userDetail.extendedAttribute5);
            matchedRow.set("ExtendedAttribute6", userDetail.extendedAttribute6);
            matchedRow.set("ExtendedAttribute7", userDetail.extendedAttribute7);
            matchedRow.set("ExtendedAttribute9", userDetail.extendedAttribute9);
            matchedRow.set("ExtendedAttribute12", userDetail.extendedAttribute12);
            matchedRow.set("ExtendedAttribute13", userDetail.extendedAttribute13);
        } 
    });

    // Refresh the grid to display the updated data
    grid.refresh();
}

Note that # gridLoader is just my poor attempt at making a waiting animation.  It references this .css class.  This should be irrelevant to the problem, but for ease of running this content locally:

Finally, here is my HomeController action:

My Environment and Project

This is an ASP.NET Core 8 MVC project being run in Visual Studio 2022 on a Windows laptop.  The project does use Microsoft Identity authentication and I am developing by running it on Localhost.  Notably, my HomeController currently has no authentication or authorization applied as I'm still just doing early stage development on localhost.  

Any assistance that could be provided or suggestions as to why this is failing would be appreciated.

This was a wonderful solution to add checkboxes to a grid w/o needing to double click to enter the editor.

https://www.telerik.com/forums/how-can-i-have-a-checkbox-column-in-a-grid-without-having-to-click-on-the-checkbox-twice-to-edit#1557957

Is there a way to add a filter to the checkbox columns as well?

Given the following form:

        <kendo-form orientation="vertical" layout="grid" name="formEntity" size="medium">
            <form-items>
                <form-item hidden-editor="true" field="Id"></form-item>
                <form-item hidden-editor="true" field="ParentId"></form-item>
                <form-item hidden-editor="true" field="ClientId"></form-item>
                <form-item field="EntityName" editor-handler="setRequiredTextboxEditor">
                    <item-label text="Name" optional="false"/>
                </form-item>
                <form-item field="EntityEmail" editor-handler="setRequiredTextboxEditor">
                    <item-label text="Email" optional="false"/>
                </form-item>
                <form-item field="EntityPhone" editor-handler="setRequiredTextboxEditor">
                    <item-label text="Phone" optional="false"/>
                </form-item>
            </form-items>
            <validatable validate-on-blur="true" error-template="<span class='k-form-error'>#:message#</span>" validation-summary="false"></validatable>
        </kendo-form>

I am trying to create a custom template to house the buttons displayed on the form. All I really wish to do is show/hide the Clear button under certain circumstances and I figured doing so in a template might be my best option.

However, I cannot get a custom template to appear for the form and there are no examples of how to do this in the documentation that I could find.

I assumed it would be something like this:

            <buttons-template>
                <kendo-template>
                    <div class="k-form-buttons">
                        <button id="btnSave" class="k-form-submit k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-focus" data-role="button" type="submit" role="button" aria-disabled="false" tabindex="0"><span class="k-button-text">Submit</span></button>
                        <button id="btnClear" class="k-form-clear k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" data-role="button" type="button" role="button" aria-disabled="false" tabindex="0"><span class="k-button-text">Clear</span></button>
                    </div>
                </kendo-template>
            </buttons-template>

But this just hides the buttons entirely. I know I am missing something, I just don't know what it is.

Thanks.

Hello, I hope you are well.

I hope you can help me with this problem I have.

I am using the Kendo UI for JQuery Upload.

What I require is to upload an entire folder of TXT files, but I have a routine that validates that the name and content meet certain rules.

I apply these rules within the foreach loop (var file in files), because what is required is that if the file is valid it shows a text that it is valid, otherwise it shows a text that is not valid and for both options to continue processing the next file.

But by marking that file as erroneous, the controller is exited and the view is returned, thus leaving the processing of the rest of the files incomplete.

I share the code of the view and the controller, hoping you can give me some light.

View Code:

<div class="centered">
    @using Kendo.Mvc.UI
    <div>
        <div class="demo-section">
            @(Html.Kendo().Upload()
                .Name("files")
                .Async(a => a
                    .Save("ChunkSave", "Upload")
                    .Remove("Chunk_Upload_Remove", "Upload")
                    .AutoUpload(true)
                    .ChunkSize(11000)

                )
                .Multiple(true) // Enable multiple file selection
                    .Directory(true)
                    .DirectoryDrop(true)
                .Validation(validation =>
                {
                    //validation.MaxFileSize(20000000);
                })
                .Events(events =>
                {
                    events.Upload("onUpload");
                    events.Success("onUploadSuccess");
                    events.Error("onUploadError");
                    events.Select("onSelect");
                })
                .Messages(messages =>
                {
                    messages
                        .Select("Seleccionar archivos")
                        .DropFilesHere("Suelta archivos aquí para cargarlos")
                        .Remove("Eliminar")
                        .Retry("Reintentar")
                        .StatusFailed("Error")
                        .StatusUploaded("Terminado")
                        .StatusUploading("Cargando")
                        .UploadSelectedFiles("Cargar archivos")
                        .UploadFail("Error al procesar el archivo.")
                        .HeaderStatusUploaded("Terminado");
                })

            )
        </div>
    </div>
</div>

Controller Code:

public async Task<ActionResult> ChunkSave(IEnumerable<IFormFile> files, string metaData, string cve)
{

    int status = 0;
    DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(ChunkMetaData));


    MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(metaData));
    ChunkMetaData? somemetaData = serializer.ReadObject(ms) as ChunkMetaData;
    string path = String.Empty;

    if (files != null)
    {
        foreach (var file in files)
        {
            cap_dbt controller = new cap_dbt(_context);
            controller.ProcessFile(file, somemetaData.FileName, cve);
            status = controller.ProcessFile(file, somemetaData.FileName, cve);
            if (status == 1)
            {
                Upload(files, somemetaData.FileName);
            }
        }
    }


    if (somemetaData is null)
    {
        throw new Exception("No Metadata!");
    }

    Util.FileResult fileBlob = new Util.FileResult();
    fileBlob.uploaded = somemetaData.TotalChunks - 1 <= somemetaData.ChunkIndex;
    fileBlob.fileUid = somemetaData.UploadUid;
    fileBlob.warnings = Mensajes.msgLoadCsvWarning;
    fileBlob.message = "[" + somemetaData.FileName + "]\t";

    try
    {
        if (!fileBlob.uploaded)
        {
            fileBlob.message += "[ERROR]" + Mensajes.msgLoadCsvError;

            return StatusCode(500, fileBlob);
        }
        else if (status == -1)
        {
            fileBlob.uploaded = false;
            fileBlob.message += "[ERROR] " + Mensajes.msgLoadCsvError;
            throw new Exception(fileBlob.message); // <------- If I remove this line, it continues processing, but it no longer changes the file, it stays with the same name or empty.

        }

        if (fileBlob.warnings.Equals(""))
        {
            fileBlob.message += Mensajes.msgLoadCsvOk;
        }
    }

    catch (Exception ex)
    {
        Console.WriteLine(ex.ToString());
        return StatusCode(500, fileBlob);
    }
    finally
    {
        Mensajes.resetMsg();
    }

    return Json(fileBlob);
}