Hi,

I am trying to use the Kendo TileLayout in JQuery, and I need to add some custom class to the tile body and tile header for some specific Tiles.

I can see that with the TileLayout in React, we can do this just by setting the className. But I can't find a similar thing in the document for the JQuery.

https://demos.telerik.com/kendo-ui/tilelayout/index?_gl=1*1c0f67v*_gcl_au*MTIwODkwNzMwOS4xNzMzOTk0MTQx*_ga*MjA2MTg3MTQxMy4xNzMzOTk0MTQx*_ga_9JSNBCSF54*MTc0MTU3MzgxMC4xNC4xLjE3NDE1NzQzMDUuMzcuMC4w

Could you please help me with this?

Thanks.

I have a TileLayout component and nor button nor span would show inside header

Hi,

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

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>

Hello,

How do change the header color, for each cards like the picture,

 

Thanks

Christophe

Hi,

On the roadmap page there is a "Dock Manager Component" listed, but I don't see any information on this anywhere.

Anyone have more information or an ETA on this?

Thanks

Christopher

 

Hello all,

 

I have the problem that my custom theme is not transferred to my application.

 

As code I copied the code from the tile layout example (https://demos.telerik.com/kendo-ui/tilelayout/index?_ga=2.175878118.554134959.1665135807-2026844688.1664867263&_gl=1*1inatwj*_ga*MjAyNjg0NDY4OC4xNjY0ODY3MjYz*_ga_9JSNBCSF54*MTY2NTE0Mjk5MS4yLjEuMTY2NTE0NDE5MS4wLjAuMA..) and adapted the linked script-sources to my paths.

After the script-sources i linked the css of my theme: (image0)

 

my theme has the following color scheme: (image1)

 

But now when I launch my application, the TileLayout looks like this: (image2)

 

 

 

When I use F12 to display the properties, for example of the donut chart, I see the following: (image3)

 

i do not understand, where the fill="#ff6800" comes from, since it is not even displayed in the style window of the F12 menu.

I can't get the problem solved, can anyone help me?

 

Hello,

I am doing a Django project and am creating a base.html that will be used in different pages using {% extend 'base.html'%}.

The base.html includes a Drawer and a TileLayout with only one tile (filter tile: this tile contains search filter components like datepicker, groupbutton, checkbox etc).

Then I have a file named main.html where I need to add several tiles underneath the filter tile from base.html

I was able to add several tiles to main.html but the problem is, it is not included in the Drawer component of base.html.  The tiles I've added on main.html appears below the height scope of base.html

I need to include the tiles from main.html into the same Drawer of base.html

I have been trying to figure this out for several days now but is unfortunately have not found a solution. If anyone could assist, it would be really helpful.

Thank you.

 

 

 

Hello

I'm looking at the kendo demo on Adding and Removing Tiles.

I would like some confirmation...

When I remove an item (splice it) from main items, I have to reorder the containers from 0 to remaining items.

That seems to work fine....HOWEVER

It appears the demo wants me to recreate every widget in the tile....really?

I have toolbars and grids and charts in my tiles.  It appears by using the setOptions on the containers...I am losing all this previously configured information and I now have to make countless calls out to the server again. 

Why would a setoption clear all the toolbars, grids, and charts?

It seems something is restricting the vertical resizing of bottom containers. Horizontal resizing works, but vertical resizing is prevented from increasing size. Is there a fix or workaround for this? 

This is evident on the demo in case samples are requested.