Fully Responsive Kendo Grid/Scheduler inside Tabstrip inside Splitter

[ALGOTEC]

I am trying to set a responsive screen layout composed of ​vertical splitter (3 areas) which has inside an horizontal splitter (3 areas).

In the middle main area (middle area of horizontal) I would like to have tabstrip that will show grid and scheduler in different tabs.

I managed to create this layout without tabstrip and it work well in all resolutions, screen resizing, splitter resizing, keeping the grid or scheduler in the full pane areas and resizing it accordingly.

The problem is that when using tabstrip, the tab content is not automatically full size and does not work properly when adjusting screen or splitter size. Even if I manage to make the tabstrip full size (using CSS defintions) the grid or scheduler inside do not resize properly.

I looked in may threads around similar issues but they all seem old (2012/13) and not covering the full scenario.

Is there an up-to-date methodology how to achieve this complete responsive layout? A working example can be very helpful.

 

[Dimo]

Hello,

Here is a documentation article, which shows how to implement a 100% high resizable TabStrip.

http://docs.telerik.com/kendo-ui/web/tabstrip/how-to/expand-height

There are similar articles about the Grid and the Splitter, but my understanding is that you already have the required code to achieve the desired vertical expandability for these two widgets.

http://docs.telerik.com/kendo-ui/web/splitter/how-to/expand-splitter-to-100-height

http://docs.telerik.com/kendo-ui/web/grid/how-to/Layout/resize-grid-when-the-window-is-resized

The rule of thumb is always to make sure an element's parent is expanded, otherwise the element itself will not expand.

Regards,
Dimo
Telerik

 

 

[ALGOTEC]

All the examples resolve only part of the solution I cannot make the combination work properly. When I say working properly I mean a full responsive solution. It works well without tabs but (splitter + grid or splitter + scheduler) when I add the tabs it start getting messy.

Can you share an example that has a complete solution of spliiter that has tabs inside that each tab can have full content of either grid or scheduler and be properly responsive?

 

[Dimo]

Hello,

The provided information indicates that the problem may be one of the following:

- the TabStrip tab containers (div.k-content) do not have an explicit pixel height. The following example shows how to assign heights to these elements:
http://docs.telerik.com/kendo-ui/web/tabstrip/how-to/expand-height

- the resize() method of the Grid and Scheduler should be called after the TabStrip containers have been assigned a height
http://docs.telerik.com/kendo-ui/using-kendo-in-responsive-web-pages#individual-widget-resizing

In other words, you can use the resize event of the Splitter to set heights to the TabStrip containers, and then call the resize() method of any widgets inside the active TabStrip tab that need their layout readjusted.
http://docs.telerik.com/kendo-ui/api/javascript/ui/splitter#events-resize

In case you need further assistance, please send a runnable example, which demonstrates your current implementation, and I will check what needs to be changed.

Regards,
Dimo
Telerik