This is a migrated thread and some comments may be shown as answers.
How add/remove item dynamic in Tilelayout ~
7 Answers 110 Views
This is a migrated thread and some comments may be shown as answers.
duy
Top achievements
Rank 1
duy asked on 20 Aug 2020, 09:34 AM

Hi !

 

I'm using Kendo TileLayout in Jquery. When I create Tilelayout.

 

I want add or remove item dynamic at runtime, but I don't find way to do it.

 

Please help me do it

 

Many thanks !

7 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 24 Aug 2020, 07:50 AM

Hi Duy,

Thank you for sharing the use-case you are having.

At this point, dynamically adding/removing containers in the TileLayout is not supported. However, it has been requested and I encourage you to cast your vote for the feature request in our feedback portal below:

We monitor the requests regularly and prioritize those with a high number of votes and the potential impact the respective feature will bring.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Hung
Top achievements
Rank 1
answered on 31 Aug 2020, 05:04 PM
If we can not add/remove, is there a why we can hide/show a container?
0
Nikolay
Telerik team
answered on 02 Sep 2020, 10:58 AM

Hello Duy,

I could suggest finding the desired element with jQuery and setting its display CSS property to "none", for example:

$("#tilelayout").find(".k-tilelayout-item:first-child").css("display", "none");

You can check the following Dojo I have prepared demonstrating the above:

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
duy
Top achievements
Rank 1
answered on 03 Sep 2020, 02:28 AM
you know "dynamic" ?????

i don't like create 100 items if i need 50 items or 20 items or 10 items.

How many items to enough at runtime ????
0
Hung
Top achievements
Rank 1
answered on 04 Sep 2020, 04:02 AM

Nikolay, 

you can find first and last child and turn display on/off, how do I find a child using index like child 3 or child 4?

thanks.

 

$("#tilelayout").find(".k-tilelayout-item:first-child").css("display", "none");

 $("#tilelayout").find(".k-tilelayout-item:last-child").css("display", "none");

 

0
Nikolay
Telerik team
answered on 04 Sep 2020, 12:33 PM

Hi Duy,

The items can be located via id and respectively set hidden with jQuery:

var item = $("#tilelayout").find("#" +$("#tilelayout").getKendoTileLayout().items[1].id) //1 is the id of the container
$(item).css("display", "none");

Please check the following Dojo out:

Let me know if you have any questions.

Regards,
Nikolay
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).

0
Timothy
Top achievements
Rank 1
Iron
answered on 07 May 2021, 06:19 PM | edited on 07 May 2021, 06:20 PM
    

Hi,

I've been able to achieve a solution that removes and adds an item in the layout. This, however, is not perfect. When you do this, the HTML inside each container will be re-rendered, which is not always ideal. Depending on your situation, this may suffice. Adding a container works in a similar. When adding a new tile container, you need to do is append another Tile Container definition to the "items" array, and then call setOptions.

removeContainer(itemId) {
        var items = this.layout.items;
        var itemToRemove = this.layout.itemsMap[itemId];

        items.splice(items.indexOf(itemToRemove), 1);
        this.layout.setOptions({ containers: items });
    }

addContainer(widthInColumns, heightInRows, headerText, bodyHtml) {
        var items = this.layout.items;

        items.push({
            colSpan: widthInColumns,
            rowSpan: heightInRows,
            header: {
                text: headerText
            },
            bodyTemplate: bodyHtml
        });
        this.layout.setOptions({ containers: items });
    }

Hi Timothy,

Indeed, adding and removing tiles depends on the setOptions() method which re-renders the whole TileLayout. For the time being this is how the widget works.

Regards,

Nikolay

- by
Nikolay
Telerik team
on 11 May 2021, 08:18 AM
Asked by
duy
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Hung
Top achievements
Rank 1
duy
Top achievements
Rank 1
Timothy
Top achievements
Rank 1
Iron
Share this question
or