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

add splitter in a tab content.

3 Answers 195 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Sourav
Top achievements
Rank 1
Sourav asked on 30 Sep 2011, 06:19 AM
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

3 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 05 Oct 2011, 10:52 PM
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!
0
Jark Monster
Top achievements
Rank 1
answered on 13 Sep 2012, 03:18 PM
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!
0
Luke jj
Top achievements
Rank 1
answered on 22 Oct 2012, 07:25 AM
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.
Tags
TabStrip
Asked by
Sourav
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Jark Monster
Top achievements
Rank 1
Luke jj
Top achievements
Rank 1
Share this question
or