How to setup screen splitup using kendo framework?

60 Views Asked by Beginner At 12 April 2025 at 17:03

I am a newbie in JS development.I have a class defined in html file.

 <div class="content">
            <div id="splitter">
              <div>Pane A</div>
              <div>Pane B</div>
            </div>
</div>

I want to use kendo splitter to split the screen in 20:80 ratio.Here is the code of JS file:

            var currViewCtx = viewEvt.view.viewCtx;
            var contentView = currViewCtx.getViewContent().find(".content");
            var Widget = CrudUtils.createFilter();
            if (FilterWidget.Id != null) {
                $(contentView).find("#splitter").kendoSplitter({/////Line x
                    orientation: "horizontal",
                    panes: [{ resizable: false, size: "20%", collapsible: false },
                    { resizable: false, collapsible: false }]
                });
            }

The code doesn't run from Line x .Can anyone help me out with the code?

Original Q&A

There are 1 best solutions below

jpllosa On 10 February 2021 at 17:11

Not sure why you have those contentView stuff. You can just go straight to $("#splitter"). Here is an example of splitting the screen 20:80. You can run this in the Kendo Dojo.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="splitter">
  <div>Pane A</div>
  <div>Pane B</div>
</div>
<script>
$("#splitter").kendoSplitter({
  panes: [{
    resizable: false,
    size: "20%",
  },{ 
    resizable: false,
  }]
});
</script>
</body>
</html>

How to setup screen splitup using kendo framework?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in KENDO-UI

Related Questions in KENDO-GRID

Related Questions in KENDO-SPLITTER

Trending Questions

Popular # Hahtags

Popular Questions