Questions on Kendo UI for jQuery Forum

2 questions

0 answers

94 views

Delete tile article does not work. How do you properly delete a tile?

I tried following the article here to delete a tile: https://docs.telerik.com/kendo-ui/controls/layout/tilelayout/add-remove

Unfortunately when I do this, the contents of the tiles is deleted. This would be ok if the contents was something hard coded but it is dynamic and changes as the user interacts with the page. I tried writing my own script to delete this which almost works, however when I hover over a tile I get a console error saying:

Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at init._createResizeHandle (kendo.all.js:177288:26)
    at HTMLDivElement.<anonymous> (kendo.all.js:177517:72)
    at HTMLDivElement.dispatch (jquery.min.js?v=82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us:2:43090)
    at v.handle (jquery.min.js?v=82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us:2:41074)
_createResizeHandle @ kendo.all.js:177288
(anonymous) @ kendo.all.js:177517
dispatch @ jquery.min.js?v=82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us:2
v.handle @ jquery.min.js?v=82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us:2
Show 2 more frames
kendo.all.js:177288 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at init._createResizeHandle (kendo.all.js:177288:26)
    at HTMLDivElement.<anonymous> (kendo.all.js:177517:34)
    at HTMLDivElement.dispatch (jquery.min.js?v=82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us:2:43090)
    at v.handle (jquery.min.js?v=82hEkGrSMJh3quMSG4f7FbngmAPLTDM63H4eNayS4Us:2:41074)

Here is my code:

//Note: findObjectIndexByProperty is a custom function that I wrote which is not included in this snippet. It returns the index 
//of the object in an array of objects.    
$("#myTileLayout").on("click", ".js-remove-tile-button", function (e) {
        var domElement = $(e.currentTarget).closest(".k-tilelayout-item");
        var itemId = $(domElement).attr("id");
        let layout = $("#myTileLayout").data("kendoTileLayout");
        let itemsIndex = findObjectIndexByProperty(layout.items, "id", itemId);
        let containersIndex = findObjectIndexByProperty(layout.options.containers, "id", itemId);

        layout.items.splice(itemsIndex, 1);
        delete layout.itemsMap[itemId];
        layout.options.containers.splice(containersIndex, 1);
        $(domElement).remove();

    });

TileLayout

updated question on 03 Jun 2022

0 answers

51 views

use angularjs directive as tile template

Hi,

I am trying to build a dashboard with the tile layout and beside standard kendo ui charts and grids, I would like to have a couple of tiles with pre-built angularjs directive components.

How can I inject the angularjs component and make it bound to data in tilelayout controller?

Html renders from the template, but it is not reachable from the controller, as (I presume it is not bound directly).

Any help would be appreciated.

Thanks,

Vedad

TileLayout