Questions on Kendo UI for jQuery Forum

3 answers

219 views

I'm trying to set a splitter to 100% height, as per the example here: http://docs.telerik.com/KENDO-UI/controls/layout/splitter/how-to/expand-splitter-to-100-height

But I'm running into some very strange behaviour, as seen in this video (please ignore the styling, we're in the middle of a system update): http://recordit.co/kE4wBkI3k4

The video starts on a fresh load of the page. You can see the breadcrumbs, and what appear to be the splitter resize and collapse controls. The rest of the page is empty, even though there should be content. When I click the splitter resize, the content blinks in, and while the splitter is highlighted, it seems bent over/doubled up at the top. At 0:10 I refresh the page again, showing how a new page load is blank, except for the splitter controls. Collapsing the left panel causes the content to appear again. I was having a hard time grabbing the splitter to re-expand the left panel, so I refreshed again (0:23), and dragged it out again to test the resizing of the panels. You'll also notice that I have no scrollbars in the video, despite the fact that the content runs off the bottom of the page.

Here's my HTML:

<body>

<div id="jsParentContainer">

<div id="splitter">

<div id="tree_pane" class="pane-content">

<div id="nav_tree">/div>

</div>

<div id="tab_pane" class="pane-content">

<div id='jqxTabs'>

<iframe class="tab-iframe" id="start_iframe" src="" testStudioTag="" width="100%" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

</div>

</body>

And the splitter init:

function createSplitter() {

$('#splitter').kendoSplitter({

orientation: "horizontal",

panes: [

{collapsible: true, size: "20%"},

{collapsible: false, size: "80%"}

],

messages: { //TODO: add translations

retry: '',

requestFailed: '',

loading: ''

}

});

}

And the CSS I added, as per the help:

<style>

html, body { height:100%; margin:0; padding:0; overflow:hidden; }

#jsParentContainer { height:100%; margin:0; padding:0; overflow:hidden;}

#splitter { border-width: 0; height:100%; }

</style>

Splitter

answered on 03 Feb 2016

1 answer

75 views

toggling splitter inside angular's controller

Hi,

Is there a way to handle a toggle of kendo splitter(i.e. expand\collapse) inside a controller in angular.

For reference I mean a code like this: http://jsfiddle.net/dimodi/LjNdD/

but using only angularjs way, without jquery.

Thanks in advance,

Emanuel

Splitter

answered on 21 Jan 2016

5 answers

344 views

Is it possible to change splitter orientation?

I've prepared a little demo here:
http://70.43.83.4/test/split.html

On clicking the "turn" button it almost does what is needed but not quite..
Is there something I do wrong or is it a bug or not implemented?
(I call the "size" after change because by documentation it redraws the splitter)

Thanks.
Raido

Splitter

answered on 10 Dec 2015

2 answers

55 views

Splitter Inside AngularUI Modal is Broken

Hi,

We recently attempted to upgrade from Kendo 2014.2.716 to 2015.3.1116 and we've experienced several breaking changes along the way. We've resolved everything except for the following issue: when a Kendo Splitter is on an AngularUI modal, it does not render. This worked in the 2014 release, and has since stopped working.

Please see this Dojo for an example: http://dojo.telerik.com/IYOvA/7. I've included both sets of scripts, as it is important to use a more modern version of AngularJS than is bundled with the 2014 Kendo release to replicate our environment.

Thanks!

Splitter

answered on 25 Nov 2015

1 answer

35 views

Explorer style splitter, MVC, Razor - how do I change only the content in the right window?

I have an explorer type window with a treeview on the left and MVC forms in the right splitter pane. Is there a way to, such as on a submit (AJAX), to then render new content into the right pane only? I do not want to re-load the tree and lose the way the tree was setup by the user...

Thanks

Matt

Splitter

answered on 09 Oct 2015

1 answer

46 views

Undocumented resize method

Along the way I missed the deprecation of .data('kendoSplitter').trigger('resize').

I couldn't find any examples of calling trigger within the api docs at all anymore. This led me to the guides section which details calling .data('kendoSplitter').trigger('resize') manually. I did not miss it, it is not listed on the API docs. And sure enough, it behaves properly unlike the now deprecated trigger.

Splitter

answered on 07 Aug 2015

1 answer

50 views

Splitter, scrollable and child popup clipping

Hello,

Is there a way to have the Kendo Splitter support vertical scrolling of the child content with the added ability to allow for popup content (like hints or "modal pages") to not get clipped by the boundaries of the splitter panes?

See attached drawing.

Is there anything that can be done to the popup content to make them overflow?

Thanks.

Splitter

answered on 31 Jul 2015

1 answer

114 views

Splitter applying additional styling to some elements in IE

I've noticed that elements (buttons, select boxes) inside the Kendo Splitter have large borders or other styling changes in IE, but not in Chrome.

I couldn't find the cause for this by inspecting the CSS.

How can I make my elements inside the Splitter look the same in both IE and Chrome?

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/splitter/index">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css" />

<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example" style="height:300px; width: 800px">

<div id="outsideSplitter">

<input type="button" value="A Button"/>

<input type="checkbox"/>

<select style="width:120px"></select>

</div>

<div id="splitter" style="height: 100%; width: 100%;">

<div id="left-pane">

<div class="pane-content">

<div>

<input type="button" value="A Button"/>

<input type="checkbox"/>

<select style="width:120px"></select>

</div>

<div id="right-pane">

<div class="pane-content">

<div>

<input type="button" value="A Button"/>

<input type="checkbox"/>

<select style="width:120px"></select>

</div>

<script>

$(document).ready(function() {

$("#splitter").kendoSplitter({

panes: { collapsible: true }

});

</script>

</body>

</html>

Splitter

answered on 31 Jul 2015

0 answers

92 views

Toggle Kendo Splitter on button click inside iframe

my Kendo Splitter is as below.

@(Html.Kendo().Splitter()

.HtmlAttributes(new { style = "height:590px;", id = "mainSplitter" })

.Orientation(SplitterOrientation.Horizontal)

.Panes(horizontalPanes =>

{

horizontalPanes.Add()

.HtmlAttributes(new { id = "left-pane" })

.Size("246px")

.Collapsible(true)

.Content(@<text></text>);

horizontalPanes.Add()

.HtmlAttributes(new { id = "right-pane", style = "overflow:hidden;" })

.Content(@<iframe id="tabsContent_iframe" src='' data-src='' style="width:100%;height:100%;"></iframe>

);

})

)

I have a button outside the splitter used to toggle the left-pane which worked perfectly.
Now, if I used the same button inside my iframe and make the call. It doesn't work.
I tried doing it in couple of ways as below:

1)

var parentSplitterId = parent.$('#mainSplitter').data("kendoSplitter");

var parentLeftTogglePane = parent.$('#full-pane');// , window.parent.document);

parentSplitterId[parentLeftTogglePane.width() > 0 ? "collaspe" : "expand"](parentLeftTogglePane);

2)

var parentSplitterId = window.parent.document.getElementById('mainSplitter');

var parentLeftTogglePane = $('#full-pane', window.parent.document);

var splitter = $("#parentSplitterId").data("kendoSplitter");

splitter[leftTogglePane.width() > 0 ? "collaspe" : "expand"](leftTooglePane);

I am not able to understand where I am going wrong or what I'm missing. Please guide me out here.
Thanks

Splitter

asked on 30 Jul 2015

2 answers

101 views

Resizing to height to 100% doesn't work

I have a PivotGrid and a PivotConfigurator with a splitter. Now i want to set the height of both to 100% but can't get it to work.

I tried to do this like in your demo:

http://dojo.telerik.com/OSEco/6

But that doesn't do the trick.

Here is my code:
http://dojo.telerik.com/UvUFi

I have set

html,body,form,fieldset,table,tr,td,img {

height: 100%;

margin: 0;

padding: 0;

font: 100%/150% helvetica, calibri, sans-serif;

overflow: hidden;

}

and

"<div id=\"horizontal\" style=\"height:100%; border:0;\"><div id=\"configurator\"></div><div id=\"pivotgrid\"></div></div>"

in the function "showGrid" (there is also the initialisation of the pivotgrid and the configurator aswell as the splitter).

What am i doing wrong?

I want the pivotgrid and the configurator to fill all the height they get from the parent splitter and the splitter should fill all the height that it can get.

Splitter