Questions on Kendo UI for jQuery Forum

2 answers

105 views

How to expand splitter panes from a different JavaScript file?

I have a layout using splitters and I have them collapsed when the view loads. From there I have a button to start an order and that button click triggers a popup, and in that popup there are 2 buttons a Save button and a Cancel button. The originating view has its own JavaScript file and the popup has its own JavaScript file, so this is where I think the trouble is happening. If everything was in the same JavaScript file then it would probably be easier to do.

With all that information my question is when I click Save from the popup, how do I expand the splitter panes in the view from where the popup was called?

Splitter

answered on 18 Oct 2016

3 answers

383 views

How to collapse splitter on document ready?

Hi,

I have a dojo set up where I have a couple splitters, and I been searching online for a couple hours on how to have the splitter panels collapsed when the page loads.

Currently my splitter layout looks like this attachment A.PNG and I want the end result to look like attachment B.PNG ( I hope they got attached)

If the screenshots didn't get attached then what I am looking to do is have the left pane and bottom right pane collapsed

This my dojo

Splitter

answered on 14 Oct 2016

1 answer

584 views

Hiding on of the Splitter Panes

Hi,

I have a screen with 3 vertical panes, but one of the panes is not required for all the interactions and I would like to hide it. I know I can remove the pane, but then means I have to reload content every time.

Is there a way to hide the pane (and the bar) and then, when needed make it reappear?

matt

Splitter

answered on 12 Aug 2016

1 answer

252 views

Splitter to display on whole window

Thank you in advance for any feedback!

I am trying to have one left pane and two middle pane split on the middle. So one vertical left splitter and one horizontal splitter.

So far this is the code that I have, it does the split ok but it doesn't show in the whole page.

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

<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.mobile.min.css" />

<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/js/kendo.all.min.js"></script>

</head>
<body>
<div id="example">
<div id="vertical" style="height: 100%; width: 100%" >

<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="vertical">
<div id="center-top">
<div class="pane-content">
<h3>Inner splitter1 / center pane</h3>
<p>Resizable only. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
</div>
<div id="center-bottom">
<div class="pane-content">
<h3>Inner splitter2 / center pane</h3>
<p>Resizable only.</p>
</div>
</div>
</div>
</div>

</div>
</div>

<script>
$(document).ready(function() {
$(".vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: false, size: "80%" },
{ collapsible: false, size: "20%" }
]
});

$("#vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: false, size: "100%" },
]
});

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

<style>
#vertical {
height: 100%;
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>

Splitter

answered on 20 Jul 2016

1 answer

497 views

Kendo Splitter does not properly resize in a window

Hi, please look at the following example:

http://docs.telerik.com/kendo-ui/controls/layout/window/how-to/add-auto-resizing-splitter

Please run the example and follow these steps:

1. Move the splitter to the right.

2. Move mouse to the right edge of the window and drag towards the left.

(i.e. resize the window to be smaller using the right edge of the window)

3. Note that the splitter does not resize proportionally and becomes hidden such that you can no longer operate the splitter.

Are there any fixes/workarounds for this?

Thanks,

Michelle

Splitter

answered on 01 Jul 2016

1 answer

291 views

Change Loading Spinner Appearance for Splitter Control

Hi there,

The Grid and Splitter are using two different loading spinners - a big one for Grid and a small one for Splitter - see attached images.

Is it possible to show the bigger Grid spinner when the Splitter is loading?

Thanks!

Splitter

answered on 20 Jun 2016

1 answer

80 views

The kendoSplitter contentLoad Event Does Not Fire

I've tested in Chrome (49.0.2623.112 m), Firefox (45.0.2), IE 11 (11.212.10586.0), and MS Edge (25.10586.0.0).

I'm having to programmatically resize some parent panes and a vertical splitter, it would be nice to bind that event and call my resize function there.

And while the contentLoad event doesn't appear to be working, the resize event does fire.

I'd also like to note that the kendoSplitter loads beautifully in IE 11.

Thanks!

Splitter

answered on 18 Apr 2016

2 answers

59 views

directive scope will not be destroy when call the remove method of splitter

hello there,

I encounter a issue that, i have a directive in a pane of splitter, of course i can remove it and re-append it to the splitter. for now, the directive has a isolate scope, even though i had remove the current pane from the document, but the isolate scope is still there, is it makes the memory leak? because this operation maybe will be execute a lot time in a short time. so there will be a lot of scope objects in memory.

here is the demo in dojo

Splitter