Toolbar of a kendo-window as kendo-tile toolbar

[Himura]

Hi -

I've been trialing kendo UI for angular and it is pretty powerful

I would like to use the kendo-window toolbar as my kendo-tile "toolbar"

The main feature I want to leverage from the kendo-window doing so is the "Maximize" and "Close" features ("Minimize" should be disabled or better yet not visible)

I do want to use kendo-tile to leverage dragging and autoflow repositioning

Is there any way to do this?

Would greatly appreciate your help

Thanks

 

 

[Himura]

Hi - any help on this would be greatly appreciated

[Yanmario]

Hi Himura,

From what I understand, you would like to use our TileLayout component with its dragging and autoflow functionality with the addition of making the tile itself have the option to maximize or close. Do correct me if I am wrong.

Both features are not available built-in, but in general, they can be implemented in a way with some custom logic. An example of that would be to add a button with an icon "x" for closing and remove the specific tab from the collection of tabs:

https://stackblitz.com/edit/angular-hac4fn?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts

The same logic can be applied to increase the size of the specific tile by going to the specific TileItem and increasing its colSpan and rowSpan.

I hope this helps.

Regards,
Yanmario
Progress Telerik

[Himura]

Thanks Yanmario - this is exactly what i was looking for

[Himura]

Hi Yanmario - 

using rowSpan and colSpan doesn't seem to work as expected

The new maximized tile pushes all other tiles

Similarly if the tile is not in position (1, 1), it expands from its own positions which doesn't have the "maximize" effect

https://stackblitz.com/edit/angular-hac4fn-kdz7wh?file=src%2Fapp%2Fapp.component.ts

 

[Yanmario]

Hi Himura,

Some other properties like row, col, and order might need to be explored to adjust the behavior and positioning of the specific tile, but that will really depend on the desired end result.

Can you provide more context on a specific action, detailing the current result and the desired end result? More clarity on the 'maximize' effect would also be helpful for me to better understand the requirement and attempt to adjust the example.

I'd like to mention that this is a custom implementation, and it might have some limitations since the component doesn't have a built-in functionality for this.

Regards,
Yanmario
Progress Telerik