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

Why I am unable to use all web elements such as tabstrip and panel split and so on.?

0 Answers 43 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
sairam
Top achievements
Rank 1
sairam asked on 13 Aug 2012, 08:04 AM
As per your tutorials u have used kendo.all.js
but i had downloaded kendo web components and i used following JS files

 <script src="jquery-1.7.1.js" type="text/javascript" ></script>
    
    <script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.web.min.js" type="text/javascript" ></script>
    
 <script type="text/javascript"  src="/kendoui.web.2012.2.710.open-source/source/js/kendo.core.js"></script>
   
   <script type="text/javascript"  src="/kendoui.web.2012.2.710.open-source/source/js/kendo.fx.js"></script>
   
    <script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.draganddrop.js" type="text/javascript"></script>

    <script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.resizable.js" type="text/javascript" ></script>

    <script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.splitter.js" type="text/javascript" ></script>

   

 <link href="/kendoui.web.2012.2.710.open-source/source/styles/kendo.common.css" rel="stylesheet" type="text/css"/>
    <link href="/kendoui.web.2012.2.710.open-source/source/styles/kendo.default.css" rel="stylesheet"  type="text/css"/>




but i did not got the result ?
May I know the reason and what is alternate solution for this please respond soon.
Thanks in advance
this is my jsp code


<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>


<html>
<head>
    <title></title>
    <script src="jquery-1.7.1.js" type="text/javascript" ></script>
    
    <script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.web.min.js" type="text/javascript" ></script>
    
 <script type="text/javascript"  src="/kendoui.web.2012.2.710.open-source/source/js/kendo.core.js"></script>
   
   <script type="text/javascript"  src="/kendoui.web.2012.2.710.open-source/source/js/kendo.fx.js"></script>
   
    <script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.draganddrop.js" type="text/javascript"></script>

    <script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.resizable.js" type="text/javascript" ></script>

    <script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.splitter.js" type="text/javascript" ></script>

    <script src=""></script>


 <link href="/kendoui.web.2012.2.710.open-source/source/styles/kendo.common.css" rel="stylesheet" type="text/css"/>
    <link href="/kendoui.web.2012.2.710.open-source/source/styles/kendo.default.css" rel="stylesheet"  type="text/css"/>
</head>
<body>
    
        <div id="example" class="k-content">
            <div id="vertical">
                <div id="top-pane">
                    <div id="horizontal" style="height: 100%; width: 100%;">
                        <div id="left-pane">
                            <div class="pane-content">
                                <h3>Inner splitter / left pane</h3>
                                <p>Resizable and collapsible.</p>
                            </div>
                        </div>
                        <div id="center-pane">
                            <div class="pane-content">
                                <h3>Inner splitter / center pane</h3>
                                <p>Resizable only.</p>
                            </div>
                        </div>
                        <div id="right-pane">
                            <div class="pane-content">
                                <h3>Inner splitter / right pane</h3>
                                <p>Resizable and collapsible.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="middle-pane">
                    <div class="pane-content">
                        <h3>Outer splitter / middle pane</h3>
                        <p>Resizable only.</p>
                    </div>
                </div>
                <div id="bottom-pane">
                    <div class="pane-content">
                        <h3>Outer splitter / bottom pane</h3>
                        <p>Non-resizable and non-collapsible.</p>
                    </div>
                </div>
            </div>

            <script>
            
                $(document).ready(function() {
                
                    $("#vertical").kendoSplitter({
                    
                        orientation: "vertical",
                        
                        panes:
                      
                        [
                            { collapsible: false },
                            
                            { collapsible: false, size: "100px" },
                            
                            { collapsible: false, resizable: false, size: "100px" }
                            
                        ]
                        
                    });

                    $("#horizontal").kendoSplitter({
                        panes: [
                            { collapsible: true, size: "220px" },
                            { collapsible: false },
                            { collapsible: true, size: "220px" }
                        ]
                    });
                });
            </script>

            <style scoped="scoped">
                #vertical {
                    height: 380px;
                    width: 700px;
                    margin: 0 auto;
                }
                #middle-pane {
                    background-color: rgba(60, 70, 80, 0.10);
                }
                #bottom-pane {
                    background-color: rgba(60, 70, 80, 0.15);
                }
                #left-pane {
                    background-color: rgba(60, 70, 80, 0.05);
                }
                #center-pane {
                    background-color: rgba(60, 70, 80, 0.05);
                }
                #right-pane {
                    background-color: rgba(60, 70, 80, 0.05);
                }
                .pane-content {
                    padding: 0 10px;
                }
            </style>
        </div>

</body>
</html>


No answers yet. Maybe you can help?

Tags
TabStrip
Asked by
sairam
Top achievements
Rank 1
Share this question
or