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

 

Description:

We have encountered an issue with the Kendo UI FileManager component, specifically related to its TreeView functionality. The problem occurs when switching from Grid View to List View within the FileManager interface.

Issue Details:

When a user is working with the Kendo UI FileManager and changes the view from Grid View to List View, the TreeView on the right side of the FileManager continues to expand unexpectedly. This behavior results in an accumulation of TreeView nodes, which are not cleared or updated correctly.

Steps to Reproduce:

1. Open the Kendo UI FileManager with the TreeView and Grid View.
2. Switch from Grid View to List View.
3. Observe the TreeView on the left side.

Expected Behavior:

The TreeView should update appropriately and not exhibit additional, unexpected expansion when changing views.

Attached Video:

A video demonstrating the issue has been attached for reference. It illustrates how the TreeView continues to grow when switching views.

Impact:

This issue affects the user experience by causing confusion and making the FileManager interface less intuitive. It is crucial for the TreeView to function correctly and reflect the current view state accurately.

Reference:
https://demos.telerik.com/kendo-ui/filemanager/index

Hello.

I'm new to Telerik and am evaluating Kendo for jQuery.

In the index.html page under apptemplates/dashboard, is the following code:

I cannot find "callback_ets" anywhere. Where is this function defined?

Thanks in advance,

Mike

Hi,

I have one question regarding kendo-ui-license.js. We added it to the project and we are using it in our solution. But it's safe to use it if someone can see some id in KendoLicensing.setScriptKey. Please confirm if we can use it.

We have similar question here: https://www.telerik.com/forums/kendolicensing-setscriptkey-security-breach