This is a migrated thread and some comments may be shown as answers.

Fully Responsive Kendo Grid/Scheduler inside Tabstrip inside Splitter

3 Answers 226 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
ALGOTEC
Top achievements
Rank 1
ALGOTEC asked on 02 Aug 2015, 02:03 PM

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.

 

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 05 Aug 2015, 06:36 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
ALGOTEC
Top achievements
Rank 1
answered on 10 Sep 2015, 09:46 AM

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?

 

0
Dimo
Telerik team
answered on 14 Sep 2015, 08:23 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TabStrip
Asked by
ALGOTEC
Top achievements
Rank 1
Answers by
Dimo
Telerik team
ALGOTEC
Top achievements
Rank 1
Share this question
or