Hi,

I am currently attempting to upgrade the Kendo UI from 2022.2.510 to 2023.2.829 and need some assistance figuring out which .css files and .js files are the closest match to what I have for 2022.2.510. Wow it's different....seems like most of the css and javascript libraries have been reorganized.

    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.bootstrap.mobile.min.css" />
    <link rel="stylesheet" href="FontAwesome/font-awesome-4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="styles/jquery_1.12.0-rc2/jquery-ui.min.css" />

    <!-- JAVASCRIPT -->
    <script type="text/javascript" src="Kendo/2023.2.829/js/jquery.min.js"></script>
    <script type="text/javascript" src="Kendo/2023.2.829/js/jszip.min.js"></script>
    <script type="text/javascript" src="Kendo/2023.2.829/js/kendo.all.min.js"></script>
    <script type="text/javascript" src="Kendo/2023.2.829/js/kendo.timezones.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui.min.js"></script>
    <script type="text/javascript" src="scripts/populateTable.js"></script>
    <script type="text/javascript" src="scripts/interimDataRecs.js"></script>
    <script type="text/javascript" src="scripts/payrollDataRecs.js"></script>

I am fairly new at working with the Kendo UI -- I may just need to be pointed to documentation or a README that maps the old files to the new(?). I am not using anything fancy...these are pretty much the default controls.

So far I have not attempted to swap out ANYTHING.... I don't even know where to begin.. I am however, starting to do this shortly.  Yikes! 

FYI: I am using the following controls:

• kendoDropDownList
• kendoButton
• kendoGrid (detailInit -- using the hiarchical stuff).
• kendoSwitch
• kendoNotification
• kendoToolTip

Be curious if you all have a recommend approach or stratedgy to upgrading Kendo UI for jQuery libraries?

I'd also like to know the best approach to minifying the Kendo folders?

The Kendo stuff is stashed in the wwwroot (I did not design this structurer ... but I am stuck with it.):

Thanks for your help and patience  ^__^

George

Hello, 

I got a custom button on my toolbar , which opens a modal, but , when i tried to open in mobile mode , it stops working

see the code below

    $('#pdfViewer').css('width', '100%');
    var request = new XMLHttpRequest();
    request.responseType = 'blob';
    request.onload = function () {
        var reader = new FileReader();
        reader.readAsDataURL(request.response);
        reader.onload = function (e) {
            $("#pdfViewer").kendoPDFViewer({
                pdfjsProcessing: {
                    file: {
                        data: e.target.result.split(",")[1]
                    }
                },
                toolbar: {
                    items: [ 
                        "zoomInOut",
                        {
                            type: "button",
                            name: 'Description',
                            template: '<button type="button" onclick="openModal()" title="Description" class="k-button k-button-md k-button-flat" id="btn-Description"><span class="k-icon k-i-toc-section-level"></span></button>',
                        }
                    ]
                },
                width: "100%",
                height: 760
            }).getKendoPDFViewer();
        };
    };

on browser desktop modal it works normally

I have a Kendo Grid where one of the columns contains an array of strings.   I would like to use filtering on this column, but it would need to pull the distinct values of the array for each row.

I'm looking for the best approach to achieve my desired result.

i have created the following example where i would want to be able to filter on the classes column

https://dojo.telerik.com/@slberry75/utiXaXaW/10

Is there a spreadsheet for Angular, if not, what to use with Angular?

I had feedbacks that Spreadsheet for JQuery in Angular does not behave wery well, poor performances. Is there a way to use the Spreadsheet properly with Angular?

i have  enabled the Content Security Policy (CSP) in my mvc project i have view where i have mvc grid hierarchy 

https://demos.telerik.com/aspnet-mvc/grid/hierarchy exmple i have used 

when i add Deferred to the grid the inner grid wont work 

i get an error

jquery-3.6.3.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #Grid_#=EmployeeID#
    at se.error (jquery-3.6.3.min.js:2:13911)
    at se.tokenize (jquery-3.6.3.min.js:2:21922)
    at se.select (jquery-3.6.3.min.js:2:22749)
    at Function.se (jquery-3.6.3.min.js:2:7196)
    at a.find (jquery-migrate.min.js:2:1675)
    at E.fn.init.find (jquery-3.6.3.min.js:2:25319)
    at E.fn.init (jquery-3.6.3.min.js:2:25808)
    at new a.fn.init (jquery-migrate.min.js:2:1276)
    at E (jquery-3.6.3.min.js:2:1051)
    at HTMLDocument.<anonymous> (Index:505:1618)

code cshtml 

@using PM.Common;
@using PM.Common.Helper;
@using PM.PartnerManagement.Models;
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@(Html.Kendo().Grid<PM.PartnerManagement.Common.Employeeviewmodel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(e => e.FirstName).Width(130);
                columns.Bound(e => e.LastName).Width(130);
                columns.Bound(e => e.Country).Width(130);
                columns.Bound(e => e.City).Width(110);
                columns.Bound(e => e.Title);
            })
            .Sortable()
            .Pageable()
            .Scrollable()
            .ClientDetailTemplateId("template")
            .HtmlAttributes(new { style = "height:600px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(6)
                .Read(read => read.Action("HierarchyBinding_Employees", "Test"))
            )
          .Events(events => events.DataBound("dataBound")).Deferred()
  )
<script id="template" type="text/kendo-tmpl" >
    @(Html.Kendo().Grid<PM.PartnerManagement.Common.orderViewmodel>()
                    .Name("Grid_#=EmployeeID#") // template expression, to be evaluated in the master context
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.OrderID).Width(110);
                        columns.Bound(o => o.ShipCountry).Width(150);
                        columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
                        columns.Bound(o => o.ShipName).Width(300);
                    })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(10)
                        .Read(read => read.Action("HierarchyBinding_Orders", "Test", new { employeeID = "#=EmployeeID#" }))
                    )
                    .Pageable()
                    .Sortable().Deferred()
                .ToClientTemplate()
    )


</script>

<script nonce="@PM.Common.Constant.Nonce">
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

<script nonce="@Constant.Nonce">
    @Html.Kendo().DeferredScripts(false);
</script>

CS

I have a bunch of Kendo grids within divs. I am letting the user sort those divs on the screen. After sorting, my Kendo grid no longer functions correctly, for example, clicking on a column header no longer sorts. I'm sure it has to do with me removing and replacing the element elsewhere on the screen. How do I rebind the grid after the element has been removed from the DOM and replaced. This is the relevant line of JQuery where the kendo grids are, among other html, contained within sortedRows. 

    let sortedRows = [...rows];
    if (direction !== "original") {
        sortedRows.sort(function (a, b) {
            let rowA = a.getElementsByClassName("responsive-table__cell")[columnIndex];
            rowA = $(rowA).find(".js-sort-value").text().toLowerCase();
            let rowB = b.getElementsByClassName("responsive-table__cell")[columnIndex];
            rowB = $(rowB).find(".js-sort-value").text().toLowerCase();
            if (sortType === "number") {
                rowA = parseFloat(rowA);
                rowB = parseFloat(rowB);
            }
            if (direction === "asc") {
                return rowA > rowB ? 1 : -1;
            } else {
                return rowA > rowB ? -1 : 1;
            }
        });
    }
$(`#myCodeBlock`).find(".responsive-table__body").empty().append(sortedRows);

In Export as Excel limited data is only Shown, If we add more data in the Kendo Table Grid, Additionally,  When we click on Export as Excel, only the same set of data is shown, without any new data being added to the  Excel Sheet.

See here Data is upto 45 in Kendo Table but when we export as Excel then only upto 32 data is loading, no new data is being loaded on Excel Sheet.

https://demos.telerik.com/kendo-ui/editor/pdf-export

The button works but it's blank.  How would one put a PDF icon or say PDF in text for the button?