Questions on Kendo UI for jQuery Forum

2 answers

104 views

Splitter in Partialview with Grid do not display horizontal splitting

Hello,

i am displaying splitter in a Pop up window and have 2 vertical panes. Top one with search text box and bottom one has 2 horizontal panes. Left side has a treeview and right side has a grid. When i view this page as normal view everything Displays fine. But when i Display this page as partialview inside an window i see 3 horizontal panes rather than treeview and grid lying side by side. Somehow the grid is wrapping to next line and i do not see splitter resize Options as well.

Attached my view file. the Moment i replace right pane Content from grid to some text it will start showing splitter.

Anamika

Splitter

answered on 02 Apr 2018

4 answers

221 views

Splitter - Dynamic Panel creation

Hi,

I had a question about Splitter. Is it possible to create a splitter dynamically - I know that in theory this is possible.

But I wanted to find out about performance, and any other issues there may be.

Thanks

Uma

Splitter

answered on 26 Mar 2018

2 answers

396 views

Kendo UI Dynamic Splitter panes with Angular 2

I'm trying to implement a Kendo splitter pane with dynamically allocated number of panes in Angular 2. I have the kendo-splitter element in the parent component but unless I remove it the child component doesn't get rendered?

Parent Splitter Component

import { Component, OnInit } from '@angular/core';

import { BrxDelta } from '../model/BrxDelta';

@Component({

selector: 'app-all-deltas',

template: `<kendo-splitter orientation="vertical" style="height: 340px;">

<app-brx-delta *ngFor="let b of brxDeltas" [brxDelta]="b"></app-brx-delta>

</kendo-splitter>`,

styleUrls: ['all-deltas.component.scss']

})

export class AllDeltasComponent implements OnInit {

brxDeltas: BrxDelta[];

constructor() {

this.brxDeltas = [

new BrxDelta("DELTA1"),

new BrxDelta("DELTA2")

];

}

ngOnInit() {

console.log("BrxTableListComponent init");

console.log( this.brxDeltas );

}

Child Pane Component

import { Component, OnInit, Input} from '@angular/core';

import { BrxDelta } from '../model/BrxDelta';

@Component({

selector: 'app-brx-delta',

template: `<kendo-splitter-pane size="100px">

<div class="pane-content">

<h3>{{brxDelta.deltaName}}</h3>

</div>

</kendo-splitter-pane>

`,

styleUrls: ['brx-delta.component.scss']

})

export class BrxDeltaComponent implements OnInit {

@Input('brxDelta') brxDelta:BrxDelta;

ngOnInit() {

console.log( this.brxDelta );

}

Splitter

answered on 23 Mar 2018

2 answers

244 views

kendo splitter height issue with Chrome

Hi,

My case is the following :

- At the top of my page I have a header

- On the rest, I have a splitter with orientation Horizontal, inside a div with width: 100%, weight: 100% )

When I move the splitter, header disappears; but only with Chrome (It works correctly with FF & IE11 ...)

After investigations, the height calculated by the splitter is incorrect

I found a correlation with the fact that the offsetTop returned by Chrome is also incorrect

In fact, my page is not so simple as described previously : there is a lot a nested div. And at one point, the offsetTop returns to 0

Here is the code that I have to add so that it works (sorry for the quality of the code, i'm a beginner javascript developer) :

var contInit = document.getElementById("Container-" + splitterId);

var cont = contInit;

var top = cont.offsetTop;

var zero = false;

while (cont.parentElement !== document.body) {

cont = cont.parentElement;

if (cont.offsetTop === 0) zero = true;

else if (cont.offsetTop !== 0 && zero) {

zero = false;

top = top + cont.offsetTop;

}

contInit.style.height = "calc( 100vh - " + top + "px )";

var outerSplitter = $("#" + splitterId).data("kendoSplitter");

if (outerSplitter != null) outerSplitter.resize(true);

If you have a better solution, I'll take it

Regards

Splitter

answered on 22 Aug 2017

4 answers

260 views

Hot to customize splitter

Hello

The KendoUI Splitter would be the perfect solution for what I want to do. I ran into the follow three style problems you may know the answer:

1. The default color of the panes is white. I need to have them transparent what is ignored by the Splitter. How can I remove the defaulted white?

2. How can I change the color of the most outer frame border? (the one surrounding both panes)

3. On hovering the splitter an arrow is coming up. This is imho missleading. The arrow has only one head, should have two since you can move the splitter in two directions. How can I change that?

Greetings

Splitter

answered on 30 Jun 2017

3 answers

510 views

splitter with bootstrap grid

I'm working on a project where I have 2 horizontal panes. The left side is a tree view and the right side is the content view (Think windows explorer). Is it possible to have a content layout (grid) in that right pane that will resize based on the size of the splitter pane? Right now I can't seem to get controls to stack properly when the pane is resized. This isn't a kendo issue exactly, but I'm hoping someone else has worked through this. My left pane is going to start with a fixed size and the right pane takes the remainder of the viewport.

Splitter

answered on 21 Jun 2017

3 answers

198 views

toggle, expand, and collapse functions do not trigger corresponding events.

Noticed that when you call either the toggle, expand, or collapse function calls on a splitter, the corresponding event never fires.

Here's a demo of the behavior:

http://dojo.telerik.com/asOJA

You can see in your console when you double click the bar, the event fires. But when you click the button which makes a toggle call, no event is fired.

Splitter

answered on 07 Apr 2017

1 answer

397 views

Custom Icon to Expand/Collapse

Hi,

I am using Kendo splitter to duplicate a layout to an existing app. The layout is a collapsible pane on the left thats only 200px wide when expanded In the existing app, there is an icon to toggle the collapsible pan. The icon sits in the top right corner of the left pane, and overflows the pane.

What is the best way to implement this icon that toggles the pane from collapsed to expanded?

From my perspective, I have two choices.

1. I can use CSS to change the existing .k-splitbar icons to match my design needs. The problem with this method is that the clickable region that triggers the expand/collapse is only as wide as the k-splitbar container. I need the clickable region to be at least 40px by 40px. How might I expand the clickable region?

2. I add my own button (an A tag) in my collapsed pane, absolutely position the icon to the correct space, and use javascript to expand/collapse the pane. The problem with this method is that I was unable to figure out how to get the pane to allow overflow (overflow: visible). I've seen numerous links for how to get the pane to allow overflow. however I can't seem to trump the inline style that kendo is adding to the pane. What is the bast way to allow overflow on panes?

Please and thanks.

Splitter

answered on 27 Mar 2017

2 answers

517 views

Hiding the progress indicator for ajaxRequest

Hi,

I am making the following call:

splitter.ajaxRequest("#ContentPane", path);

I would like to hide the progress indicator and have tried using:

kendo.ui.progress($("#ContentPane"), false);
kendo.ui.progress($("#splitter"), false);

Neither of which work. Can someone enlighten me on how to best do this? I still want the progress indicator to work on other controls when doing an Ajax request, such as the treeview/dropdown...

Thanks,

Matt

Splitter

answered on 21 Mar 2017

3 answers

332 views

Who trigger resize

Resize can be trigger on multiple events:

expand / collapse
user move splitbar
by window if splitter is inside window and window is resized

I need to act differently based on who trigger resize. There is expand/collapse events so this 2 events solve problems with first trigger. But what about second?

Basically I need to know if user move splitbar. How?

Splitter