add splitter in a tab content.

4 posts, 0 answers
  1. Sourav
    Sourav avatar
    28 posts
    Member since:
    Sep 2011

    Posted 30 Sep 2011 Link to this post

    Hi

    I have added splitter in a tab but it is not resize with tab content.Also I have resize the tabstrip size with the window size with follwing parameter

    <div id="tabstrip" style="height: 100%; border: 0;">

    The tab has resize but the content is not resized.

    code :
    001.<div id="tabstrip" style="height: 100%; border: 1;">
    002.           <ul>
    003.               <li>First tab</li>
    004.               <li>Second tab</li>
    005.           </ul>
    006.           <div>
    007.                     
    008.           </div>
    009.           <div>
    010.               <div id="vertical" >
    011.                   <div>
    012.                       <div id="horizontal1" >
    013.                           <div><div id="grid"></div></div>
    014.                           <div><div id="grid1"></div></div>
    015.                       </div>
    016.                   </div>
    017.                   <div>
    018.                       <div id="horizontal2" >
    019.                           <div></div>
    020.                           <div></div>
    021.                       </div>
    022.                   </div>
    023.                   <div>
    024.                       <div id="horizontal3" >
    025.                           <div></div>
    026.                           <div></div>
    027.                       </div>
    028.                   </div>
    029.               </div>
    030.           </div>
    031.       <script type="text/javascript">
    032.               $(document).ready(function() { 
    033.                  $("#tabstrip").kendoTabStrip();
    034.                   
    035.                  $("#grid").kendoGrid({ 
    036.                      dataSource: { 
    037.                          data: createRandomData(50),
    038.                           pageSize: 10 
    039.                      },
    040.                       height: 250, 
    041.                       groupable: true, 
    042.                       scrollable: true,
    043.                       sortable: true,
    044.                       pageable: true,
    045.                       columns: [ 
    046.                          
    047.                              field: "FirstName",
    048.                               title: "First Name"
    049.                           },
    050.                           
    051.                             field: "LastName",
    052.                             title: "Last Name"
    053.                           }, 
    054.                          
    055.                             field: "City"
    056.                           }, 
    057.                          {
    058.                             field: "Title" 
    059.                          }, 
    060.                          {  
    061.                             field: "BirthDate", 
    062.                             title: "Birth Date",
    063.                             template: '<#= kendo.toString(BirthDate,"dd MMMM yyyy") #>'
    064.                           },
    065.                           {
    066.                               field: "Age"
    067.                           }
    068.                       
    069.                  });
    070.                   $("#grid1").kendoGrid({
    071.                      height: 250,
    072.                       groupable: true,
    073.                       scrollable: true,
    074.                       sortable: true,
    075.                       pageable: true,
    076.                       columns: [
    077.                          {
    078.                              field: "FirstName",
    079.                               title: "First Name"
    080.                           },
    081.                           {
    082.                              field: "LastName",
    083.                               title: "Last Name"
    084.                           },
    085.                            
    086.                       ]
    087.                  });
    088.                   $("#vertical").kendoSplitter({
    089.                       orientation: "vertical",
    090.                       panes: [
    091.                           { collapsible: true, size: "100%" },
    092.                           { collapsible: false },
    093.                           { collapsible: true, size: "100%" }
    094.                       ]
    095.                   });
    096.                   $("#horizontal1").kendoSplitter({
    097.                      orientation: "horizontal",
    098.                      panes: [
    099.                           { collapsible: true, size: "100px" },
    100.                           { collapsible: false },
    101.                           { collapsible: true, size: "100%" },
    102.               { resizable: true }
    103.                       ]
    104.                   });
    105.                   $("#horizontal2").kendoSplitter({
    106.                       orientation: "horizontal",
    107.                      panes: [
    108.                           { collapsible: true, size: "100px" },
    109.                           { collapsible: false },
    110.                           { collapsible: true, size: "100%" },
    111.               { resizable: true }
    112.                       ]
    113.                   });
    114.                   $("#horizontal3").kendoSplitter({
    115.                       orientation: "horizontal",
    116.                      panes: [
    117.                           { collapsible: true, size: "100px" },
    118.                           { collapsible: false },
    119.                           { collapsible: true, size: "100%" },
    120.               { resizable: true }
    121.                       ]
    122.                   });
    123.                                        
    124.              });
    125.                
    126.       
    127.           </script>
    128.     </div>

    Please help me.

    Thanks & Regards,
    Sourav
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 05 Oct 2011 Link to this post

    Hello Sourav,

    The Splitter expects the container to be visible when it initializes in order to get its sizes properly. You can attach a select event to the TabStrip and re-size all the splitters. Please not that your splitters are also not defined properly -  100% will size the pane to 100% of its container and the other children won't have enough space. Check this jsFiddle how you should init them:
    http://jsfiddle.net/5apHc/40/
    There is also a sample select event there.

    Kind regards,
    Kamen Bundev
    the Telerik team
    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. Jark Monster
    Jark Monster avatar
    46 posts
    Member since:
    Jan 2012

    Posted 13 Sep 2012 Link to this post

    How about when the content of the tabstrip that contains the splitter is using "LoadContentFrom".

    This fix worked for me for a while, but when I changed my implementation to use LoadContentFrom, I found that the time it takes to go to and from the server can vary drastically.

    On one side, I obviously don't want the user to have a non-initialized splitter, but I also don't want to have a 3-4 second wait time that may or may not be necessary.

    Is there any other way to handle this?

    Thanks!
  5. Luke jj
    Luke jj avatar
    7 posts
    Member since:
    Apr 2010

    Posted 22 Oct 2012 Link to this post

    Hi Kamen,
    Your jsfiddle example works only when splitter panes have  default width. If I will set different sizes then it doesn't show panes. It's a bug or there is another way of making this?

    EDIT: I checked once more and it started to work as expected..... :) So no issue.
Back to Top
Kendo UI is VS 2017 Ready