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

1 posts, 0 answers
  1. sairam
    sairam avatar
    1 posts
    Member since:
    Aug 2012

    Posted 13 Aug 2012 Link to this post

    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>


Back to Top