add splitter in a tab content.

[Sourav]

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

[Kamen Bundev]

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

[Jark Monster]

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!

[Luke jj]

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.