Solved

Kendo Splitter usage

Posted on 2013-06-11
1
892 Views
Last Modified: 2013-06-14
My next challenge is Web Page and Kendo controls.  They do have a lot on their site.  But I am still have a problem.  Please check the attached document.  I managed to create the "original" page look.  But the "current" look is not how I want it to be.
I need to place second tree underneath the first, that is in the left side of the "original" look.  and leave the grid at the right, as it is on the "Original" screen shot.  But I only managed to do "Current" look, that moves the grid at the bottom of the page. This is training for me.  I have experience in a html from many years back.  I need help to jump into Kendo
KendoSplitter.doc
0
Comment
Question by:Aquarus
1 Comment
 
LVL 11

Accepted Solution

by:
mcnute earned 500 total points
ID: 39248115
Within the left pane div is another div try to clone this div and give it some individual content to check how it looks like.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</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 class="pane-content">
                                <h3>Inner splitter / left pane 2</h3>
                                <p>Resizable and collapsible 2.</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>
                #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, #center-pane, #right-pane  { background-color: rgba(60, 70, 80, 0.05); }

                .pane-content {
                    padding: 0 10px;
                }
            </style>
        </div>


</body>
</html>

Open in new window

0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question