Fully Responsive Kendo Grid/Scheduler inside Tabstrip inside Splitter

4 posts, 0 answers
  1. ALGOTEC
    ALGOTEC avatar
    6 posts
    Member since:
    Aug 2013

    Posted 02 Aug 2015 Link to this post

    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.

     

  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 05 Aug 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. ALGOTEC
    ALGOTEC avatar
    6 posts
    Member since:
    Aug 2013

    Posted 10 Sep 2015 in reply to Dimo Link to this post

    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?

     

  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Sep 2015 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready