Unplanned
Last Updated: 23 Sep 2020 09:27 by ADMIN
Ron
Created on: 19 May 2020 09:09
Category: TileLayout
Type: Feature Request
20
Add / remove support for the TileLayout component
I would like to see the ability to dynamically add and remove items for the TileLayout component, ideally using drag & drop. My use case would be to have a TileLayout dashboard area to which I would like to drag & drop new items from a side toolbar. Additionally items should be removable from the dashboard area.
4 comments
ADMIN
Alex Hajigeorgieva
Posted on: 23 Sep 2020 09:27

Hi,

Currently, to add/remove a tile dynamically, you can use the setOptions() method. In one case, you push the new tile in the containers array and in the other, splice the array

https://dojo.telerik.com/@bubblemaster/UgapUXoQ/4

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

duy
Posted on: 21 Aug 2020 03:16
remove function ??
Greg
Posted on: 28 May 2020 14:03

Hi Ron, I too put in a ticket for this.  I have code that adds an item. I took it from kendo.all.js  _initContainers function.  I am currently working on removing it and will post something once I work it out,  This is not production code so excuse the mess!

 

 var t2 = $("#tilelayout").data("kendoTileLayout")
        var containerSettings = {
           
            bodyTemplate: $("#first").html(),
            header: { text: 'Some Header' },
            order :2,
            colSpan: 1,
            rowSpan: 1,
           

        }
        var id = kendo.guid();
        var container = $('<div></div>').addClass("k-tilelayout-item k-card").attr('id', id);
        var headerSettings = containerSettings.header;

         if (headerSettings && (headerSettings.template || headerSettings.text)) {
            header = $('<div></div>').addClass("k-tilelayout-item-header k-card-header ");
            if (t2.options.reorderable) { //that.options.reorderable
                header.addClass("k-cursor-grab");
            }
            if (headerSettings.text) {
                headerContent = '<h5 class=\'' + "k-card-title" + '\'>' + headerSettings.text + '</h5> <span class="removeItem glyphicon glyphicon-remove-circle"></span>';
            }
            header.append(headerContent || kendo.template(headerSettings.template)({}));
            header.appendTo(container);
        }
        body = $('<div></div>').addClass("k-tilelayout-item-body k-card-body");
        body.append(kendo.template(containerSettings.bodyTemplate)({}));
        body.appendTo(container);
        container.appendTo(t2.element); //that.element
        t2._addContainer(container, containerSettings, 2, id); //that._addContainer(container, containerSettings, i, id);
ADMIN
Preslav
Posted on: 25 May 2020 12:03

Hello Ron,

Thank you for submitting this feature request. If it gets enough votes from our community, we will consider implementing it.

 

Regards,
Preslav
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.