I have a Kendo window:

I also have a template:

I have an empty div to load the template:

I tried using a dialog (hence the naming) but I couldn't get it to work.  Now I'm using a window, and I'm getting the following TS error:

kendo.all.js:96132  Uncaught TypeError: e.toLowerCase is not a function
    at kendo.all.js:96132:1
    at Function.map (jquery-3.7.0.min.js:2:3967)
    at init._actions (kendo.all.js:96130:1)
    at init.title (kendo.all.js:96540:1)
    at new init (kendo.all.js:95806:1)
    at HTMLDivElement.<anonymous> (kendo.all.js:3741:1)
    at Function.each (jquery-3.7.0.min.js:2:3129)
    at ce.fn.init.each (jquery-3.7.0.min.js:2:1594)
    at e.fn.<computed> [as kendoWindow] (kendo.all.js:3740:1)
    at init.editOnShow (index.ts:287:29)

The error line points to the kendoWindow initialization.  Thoughts?

Hi. I have a spreadsheet control that can have ~7000 rows per sheet with formatting used. I need to know where to start the  kendo.ui.progress component and where to end it. I tried to put the start in the selectSheet sheet Event handler:

...but I couldn't figure out where to put the matching "hide" or:

In addition, it seems like the progress component won't actually start until render event. (which is after everything has rendered).. and by then the sheet seems to be populated already.

I also tried creating an onClick event handler to start the progress component. No luck.

Thanks again for your help and patience ^__^

George

Hello,

I am using KENDOUI jQuery PDFViewer. PDFViewer essentially uses Mozilla's pdf.js library, and I was using version 2.5.207 of pdf.js. However, there are security vulnerabilities in this version (https://github.com/mozilla/pdf.js/security/advisories/GHSA-wgrm-67xf-hhpq). Mozilla has started using pdf.mjs and pdf.worker.mjs with version 4.x. How can I use these versions with PDFViewer?

How can I set the window.pdfjsLib.GlobalWorkerOptions.workerSrc assignment?

Hi,

As the title suggests is it possible to create a Tile Layout where each row has a different height property?

Hi,

 

how to set focus to kendo TextBox widget when a kendo window opens?

I tried the following but no luck. The widget is selected and focused for a fraction of second and then selection and focus is magically removed.

I have an HTML table that I can successfully convert to a Kendo Grid report.
But I don't seem able to add aggregates at the bottom of the report.
If I display the totals or counts as rows in the report, they get sorted when the report is sorted by Kendo.
Is there a way to do this natively in Kendo?

All of the examples I can find online are not for HTML tables.

I'm trying to add a class to the kendo treelist arrow based on the data in the grid, however when I expand a row now, the class disappears for this and all other rows. How can I retain that class? Here is a dojo with an example. In the dojo, you will notice that if the person's name is not "Guy Wooten", they get a class of "maroon". That is then used to turn the drop arrow red. As soon as you click the person, the arrow turns black. I need it to stay red. You'll also notice that none of the subsequent ones have the red anymore either. How do I fix that? 

https://dojo.telerik.com/@dojolee/IyOGeduk

Note: Neither versions 2022 or 2024 work correctly, but in 2022, the subsequent rows keep their class.

Issue 1:

In below code, i dynamically loading telerik charts, and the resize of the Charts is not working for the first time. from second time its resizing as expected. For second time also i added some custom logic to fetch the width. I tried multiple ways, like debounce, observer the tilelayout. 

<div id="reports-container"></div>
<script>
    $(document).ready(function () {
        fetchReports();

        function fetchReports() {
            var loginId = @Model.CurrentUserId;
            $.ajax({
                url: '/api/Dashboard/ListDashboardItemByProfile',
                type: 'POST',
                data: { LoginId: loginId },
                success: function (data) {
                    displayReports(data);
                },
                error: function (e) {
                    error_handler(e);
                }
            });
        }

        function displayReports(reports) {
            var container = $('#reports-container');
            container.empty(); // Clear any existing reports

            var tileLayout = $('<div></div>')
                .attr('id', 'tilelayout')
                .attr('name', 'tilelayout')
                .addClass('k-widget k-tilelayout')
                .css({
                    'display': 'grid',
                    'grid-template-columns': 'repeat(6, 1fr)', // Ensure each column takes equal space
                    'grid-auto-rows': 'minmax(0, 185px)', // Ensure each row has a minimum height
                    'gap': '16px',
                    'padding': '16px'
                });

            container.append(tileLayout);

            reports.forEach(function (report) {
                var tileContainer = $('<div></div>')
                    .addClass('k-tilelayout-item k-card')
                    .attr('id', 'tile-container-' + report.ReportId)
                    .attr('data-profiledetailid', report.ProfileDetailId)
                    .css({
                        'grid-column-end': 'span ' + report.ColumnSpan,
                        'grid-row-end': 'span ' + report.RowSpan,
                        'order': report.ReportSequence,
                        'display': 'inline-flex',
                        'width': '100%', // Ensure tiles take full width within the grid column
                        'height': '100%' // Ensure tiles take full height within the grid row
                    });

                var tileHeader = $('<div></div>')
                    .addClass('k-tilelayout-item-header k-card-header k-cursor-grab')
                    .text(report.AltReportName);

                tileContainer.append(tileHeader);

                var tileBody = $('<div></div>')
                    .addClass('k-tilelayout-item-body k-card-body');

                tileContainer.append(tileBody);
                tileLayout.append(tileContainer);

                loadChart(report, tileBody); // Pass tileBody to loadChart function
            });

            initializeTileLayout();
        }

        function initializeTileLayout() {
            var computedWidthList = [];
            var resizeObserver;

            function handleResize(container, computedWidth, computedHeight) {
                var parentWidth = container.parent().width();
                var columnWidth = parentWidth / 6;
                var rowHeight = 225; // Adjust rowHeight if needed

                computedWidthList.push(computedWidth);
                console.log(computedWidthList);

                if (computedWidthList.length > 3) {
                    var lastcomputedWidth = computedWidthList[computedWidthList.length - 1];
                    var beforeLastcomputedWidth = computedWidthList[computedWidthList.length - 2];
                    var beforeBeforeLastcomputedWidth = computedWidthList[computedWidthList.length - 3];

                    if (beforeLastcomputedWidth == 0) {
                        var lastcomputedWidth = computedWidthList[computedWidthList.length - 1];
                        var beforeLastcomputedWidth = computedWidthList[computedWidthList.length - 3];
                        var beforeBeforeLastcomputedWidth = computedWidthList[computedWidthList.length - 4];
                    }

                    if (beforeBeforeLastcomputedWidth < beforeLastcomputedWidth && lastcomputedWidth < beforeLastcomputedWidth) {
                        computedWidth = beforeLastcomputedWidth;
                    } else if (beforeBeforeLastcomputedWidth > beforeLastcomputedWidth && lastcomputedWidth < beforeLastcomputedWidth) {
                        computedWidth = beforeLastcomputedWidth;
                    }
                }

                // Calculate the new column and row spans
                var newColumnSpan = Math.max(1, Math.round(computedWidth / columnWidth));
                var newRowSpan = Math.max(1, Math.round(computedHeight / rowHeight));

                // Update grid-column-end and grid-row-end styles
                container.css('grid-column-end', 'span ' + newColumnSpan);
                container.css('grid-row-end', 'span ' + newRowSpan);

                // Update data attributes for future calculations
                container.attr('data-colspan', newColumnSpan);
                container.attr('data-rowspan', newRowSpan);

                // Trigger chart resize if chart exists
                var chartContainer = container.find(".k-chart");
                if (chartContainer.length) {
                    chartContainer.data("kendoChart").resize();
                }
            }

            // Initialize the Kendo TileLayout
            $("#tilelayout").kendoTileLayout({
                columns: 6,
                gap: {
                    columns: 16,
                    rows: 16
                },
                containers: $(".k-tilelayout-item"),
                draggable: true,
                resizable: true,
                reorderable: true,
                resize: function (e) {
                    var resizedElement = e.container;
                    var resizedWidth = resizedElement.width();
                    var container = e.container;
                    console.log(resizedWidth);
                    if (!container || container.length === 0) {
                        console.error("Container not found");
                        return;
                    }

                    var containerElement = container[0];

                    // Disconnect previous observer if exists
                    if (resizeObserver) {
                        resizeObserver.disconnect();
                    }

                    // Create a new ResizeObserver to observe size changes during resize
                    resizeObserver = new ResizeObserver(entries => {
                        for (let entry of entries) {
                            const computedWidth = entry.contentRect.width;
                            const computedHeight = entry.contentRect.height;
                            handleResize(container, computedWidth, computedHeight);
                        }
                    });

                    // Observe the container element during resize
                    resizeObserver.observe(containerElement);
                },
                reorder: function (e) {
                    var container = $(e.container[0]);
                    if (container) {
                        var tileId = container.attr('id').replace('tile-container-', '');
                        var newIndex = e.newIndex;

                        // Update the order property based on the new index
                        container.css('order', newIndex); // Adjust for 1-based indexing
                        // Optionally, you may update this order value in your data model as well
                    }
                }
            });

        }




        function loadChart(report, containerElement) {
            var reportContainer = $('<div></div>')
                .attr('id', 'report-container-' + report.ReportId)
                .css({
                    'border': '1px solid #ddd',
                    'padding': '10px',
                    'margin': '5px',
                    'width': '100%',
                    'height': '100%'
                });

            containerElement.append(reportContainer);

            // Check if the report needs a chart or a gauge
            if (report.Type === "Bar" && report.ReportName == "Summary By Task") {
                loadSummaryByTask(report, reportContainer);
            } else if (report.Type === "Bar" && report.ReportName == "Summary By Employee") {
                loadSummaryByEmployee(report, reportContainer);
            } else if (report.Type === "Bar" && report.ReportName == "Summary By Site") {
                loadSummaryBySite(report, reportContainer);
            } else if (report.Type === "ArcGauge" && report.ReportName == "Long Duration Assignments") {
                loadLongDuration(report, reportContainer);
            } else if (report.Type === "Line" && report.ReportName == "Utilization By Site") {
                loadUtilizationBySite(report, reportContainer);
            } else if (report.Type === "Line" && report.ReportName == "Lines Per Hour by Site") {
                loadLinesPerHourbySite(report, reportContainer);
            } else if (report.Type === "Line" && report.ReportName == "Productivity By Site") {
                loadProductivityBySite(report, reportContainer);
            } else if (report.Type === "ArcGauge" && report.ReportName == "Error Audit Summary Report") {
                loadErrorAudit(report, reportContainer);
            }
        }

        function loadSummaryBySite(report, containerElement) {
            if (report.Duration == null) {
                report.Duration = 0;
            }
            $.post('/api/Dashboard/GetLabelsForReport', { reportName: report.ReportName })
                .done(function (labelsResponse) {
                    var labels = labelsResponse;

                    $.post('/api/Dashboard/GetDataForReport', { reportName: report.ReportName, siteId: report.SiteId, startDateId: report.StartDateId, endDateId: report.EndDateId, loginId: @Model.CurrentUserId, activityId: report.ActivityId, duration: report.Duration, frequencyId: report.FrequencyId, errorTypeId: report.ErrorTypeId })
                        .done(function (dataResponse) {
                            var data = dataResponse;

                            var chartElement = $('<div></div>')
                                .attr('id', 'chart-container-' + report.ReportId)
                                .css({
                                    'width': 'auto',
                                    'height': '400px'
                                });

                            containerElement.append(chartElement);

                            chartElement.kendoChart({
                                title: {
                                    text: ""
                                },
                                legend: {
                                    position: "top"
                                },
                                series: [{
                                    name: "Performance",
                                    data: data.map(d => d.Performance),
                                    type: "column",
                                    axis: "performance"
                                }],
                                categoryAxis: {
                                    categories: data.map(d => d.SiteName),
                                    labels: {
                                        rotation: -45,
                                        template: "#: value #"
                                    },
                                    title: {
                                        text: "SiteName"
                                    }
                                },
                                valueAxes: [{
                                    name: "performance",
                                    title: {
                                        text: "Performance"
                                    }
                                }],
                                tooltip: {
                                    visible: true,
                                    format: "{0}"
                                }
                            });

                            // Save the chart instance for resizing
                            chartElement.data("kendoChart").resize();
                        })
                        .fail(function () {
                            alert("Error loading chart data.");
                        });
                })
                .fail(function () {
                    alert("Error loading chart labels.");
                });
        }
</script>

i have a grid with one checkbox column bound to a dataitem. what i just want to do is when you click the checkbox to check/uncheck, it will update the data item.

i've tried copying the sample provided here: https://dojo.telerik.com/ozoHUwUP/5 but the onchange event is not triggered

                                        columns.Bound(p => p.IsApproved).ClientTemplate("<input type='checkbox' class='chkbx k-checkbox' onclick='check()' #= IsApproved ? checked='checked' :'' # #=dirtyField(data,'IsApproved')#/>")

                                    .Title("Approved?").Width(150);