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

facing problem with 2 grid under tabstrip

1 Answer 190 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, 01:57 PM

I have two tabs inside the Kendo Tab strip.

Both of the tabs have its own grids as well, but when ever i do the column drop on the grid of the 1st tab, the column
drop gets visible on the grid of the second tab.

now if i change the code to create the grid on the first tab to be second, then it gets vice versa.
basically which ever the last grid created in the code, becomes active for the column drop.

though the column filter functionlity is working on the desired grid, on the column header drop area the column is not visible.

<html>
    <head>
        <title>Basic usage</title>
        <link href="./addi/styles/examples.css" rel="stylesheet"/>
        <link href="./addi/styles/kendo.common.css" rel="stylesheet"/>
        <link href="./addi/styles/kendo.kendo.css" rel="stylesheet"/>
        <script src="./addi/js/jquery.js"></script>
        <script src="./addi/js/kendo.core.js"></script>
        <script src="./addi/js/kendo.fx.js"></script>
        <script src="./addi/js/kendo.draganddrop.js"></script>
        <script src="./addi/js/kendo.resizable.js"></script>
        <script src="./addi/js/kendo.window.js"></script>
    <script src="./addi/js/kendo.tabstrip.js"></script>
  
        <script src="./addi/js/kendo.data.js"></script>
        <script src="./addi/js/kendo.pageable.js"></script>
        <script src="./addi/js/kendo.sortable.js"></script>
        <script src="./addi/js/kendo.groupable.js"></script>
        <script src="./addi/js/kendo.grid.js"></script>
        <script src="./addi/js/people.js"></script>
  
    <script src="./addi/js/kendo.splitter.js"></script>
  
<style>
html,body { height:100%;margin:0;padding:0;}
</style>
  </head>
  
    <body>
        <div id="tabstrip" style="height: 100%; border: 1;">
            <ul>
                <li>First tab</li>
                <li>Second tab</li>
            </ul>
              
            <div>
                <div id="vertical" >
                    <div>
                        <div id="horizontal1" >
                            <div></div>
                            <div><div id="grid3"></div></div>
                        </div>
                    </div>
                    <div>
                        <div id="horizontal2" >
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div>
                        <div id="horizontal3" >
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div id="grid"></div>
            </div>
        <script type="text/javascript">
                $(document).ready(function() { 
                  $("#tabstrip").kendoTabStrip();
                    
                   $("#grid").kendoGrid({
                       dataSource: { 
                           data: createRandomData(50),
                            pageSize: 10 
                       },
                        height: window.height,
                        groupable: true, 
                        scrollable: true,
                        sortable: true,
                        pageable: true,
                        columns: [ 
                           
                               field: "FirstName",
                                title: "First Name"
                            },
                            
                              field: "LastName",
                              title: "Last Name"
                            }, 
                           
                              field: "City"
                            }, 
                           {
                              field: "Title" 
                           }, 
                           {  
                              field: "BirthDate", 
                              title: "Birth Date",
                              template: '<#= kendo.toString(BirthDate,"dd MMMM yyyy") #>'
                            },
                            {
                                field: "Age"
                            }
                        
                   });
  
                      
                       $("#grid3").kendoGrid({
                       height: window.height,
                        groupable: true,
                        scrollable: true,
                        sortable: true,
                        pageable: true,
                        columns: [
                           {
                               field: "FirstName",
                                title: "First Name"
                            },
                            {
                               field: "LastName",
                                title: "Last Name"
                            },
  
                        ]
                   });
  
                    $("#vertical").kendoSplitter({
                        orientation: "vertical",
                        panes: [
                            { collapsible: true, size: "100%" },
                            { collapsible: false },
                            { collapsible: true, size: "100%" }
                        ]
                    });
                    $("#horizontal1").kendoSplitter({
                       orientation: "horizontal",
                       panes: [
                            { collapsible: true, size: "300px" },
                            { collapsible: false },
                            { collapsible: true, size: "100%" },
                { resizable: true }
                        ]
                    });
                    $("#horizontal2").kendoSplitter({
                        orientation: "horizontal",
                       panes: [
                            { collapsible: true, size: "300px" },
                            { collapsible: false },
                            { collapsible: true, size: "100%" },
                { resizable: true }
                        ]
                    });
                    $("#horizontal3").kendoSplitter({
                        orientation: "horizontal",
                       panes: [
                            { collapsible: true, size: "300px" },
                            { collapsible: false },
                            { collapsible: true, size: "100%" },
                { resizable: true }
                        ]
                    });
                    $(document).ready(function(){
                        var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
                        tabstrip.select(tabstrip.tabGroup.children("li:first"));
                    });
                      
               });
                 
  
        
            </script>
      </div>
    </body>
</html>

Please help

1 Answer, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 30 Sep 2011, 02:24 PM
Hello Sourav,

We are aware of this behavior and it has been already addressed. In next release those fixes will be available.

All the best,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TabStrip
Asked by
Sourav
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Share this question
or