Kendo Splitter usage

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
AquarusAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
mcnuteConnect With a Mentor Commented:
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
All Courses

From novice to tech pro — start learning today.