Add text to Splittbar

[Thomas Sonnenschein]

Hello Forum,

  I try to add some text to a horrizontal Splittbar of my Splitter. Background is, that if the User of my site collapse the filter pane, the entered filter should be displayed in a short form in the splittbar.

I tried the following code (without luck yet):

$(document).ready(function ()
{
    var allHorizontalSplitterElements = $(".k-splitbar.k-state-default.k-splitbar-vertical");
    var splitter = $("#filterMaster").find(allHorizontalSplitterElements);
    var splittbar = splitter.get(0);
    var child = createInfoDiv();
    splittbar.appendChild(child);
});
function createInfoDiv()
{
    var infoDiv = document.createElement("div");
    infoDiv.className = "infoDiv";
    infoDiv.innerHTML = "Filter:";

    return infoDiv;
}

All works without any error, but the div is not added to the splittbar. If I check in IE Developer Tools, the Splittbar div only contains the div for the collapse icon.

That I got the right div in my variable splittbar I checked by appending an additional css style. That was working, but not the appendChild function.

In hope for help,

  Thomas

[Dimo]

Hi Thomas,

The appendChild code is working and the custom <div> is appended to the splitbar <div>. However, there are several things that you need to take care of:

1. The font-size of the splitbar is zero, so the appended <div> is practically invisible. You need to define a positive font size for the appended <div>.

2. The splitbar width (height) is probably smaller than the appended content requires. You may need to use wider splitbars. Making the splitbar wider manually will naturally require you to reduce the size of the adjacent pane, otherwise some pane content may become inaccessible.

3. The splitbars are recreated on every resizing, so any manipulations should be executed in the Splitter's resize event.

http://demos.telerik.com/kendo-ui/splitter/events

Regards,
Dimo
Telerik

 

 

[Thomas Sonnenschein]

Hello Dimo,

  thanks a lot, now it works. My fault was to add the additional content in the document.ready function and in the resize event it was removed again. Style I already set to see my text. So that part is working.

Now I discovered another problem, which has nothing to do with the additional content. I recognized in all my windows with collapsable splitbar (even if I had not added any code to alter the splitbar), that after once I collapsed the bar, the mouse is flickering between arrow and hand over the expand icon in the splitbar and between arrow and textbox edit icon on hoover over any textbox in the pane that was collapsed after expanding it again.I use the default theme and Kendo Version 2014.1.415

In your webdemo this behavior is not visible.

Greetings
  Thomas

[Dimo]

Hello Thomas,

Since I am not able to reproduce the described flickering problem with the specified Kendo UI version (the correct version number is actually 2014.1.416), please provide a runnable example, in case you believe it is caused by Kendo UI. Alternatively, modify my test page:

http://jsfiddle.net/dimodi/pqxF6/5/

Regards,
Dimo
Telerik

 

 

[Thomas Sonnenschein]

Hello Dimo,

  I just checked again not in VS2013 as before but our installed Demo in Azure. The flickering occurs only in IE11 (regardless of Document Modus and User Agent setting). IE10 and IE8 also as FireFox 30 and 31 show no flickering.

I realy use Kendo MVC 2014.1.415 and not 416 (see Attached Upgrade Wizard Screenshot). I use no internal builds (not intentionally).

In FireFox (Version 30 and 31) I see now an other issue. Collapsing the pane with the splitbar collapse icon works only for the first click. After that expanding and collapsing only works by double clicking the splitbar. The Icon has no more function beyond changing the mouse cursor.

Greetings
  Thomas

[Dimo]

Hi Thomas,

The Kendo UI version number is 416, but there is a bug in our VS extensions, which makes it look like 415. This is now fixed. It doesn't really matter, as long as you do not configure CDN usage via the VS extensions - then the generated CDN URLs will be incorrect and you will have to modify them manually.

Since I am not aware how to reproduce the described issues, please provide a runnable demo, or modify the jsFiddle I sent earlier (which seems to work properly with regard to all the mentioned problems).

Regards,
Dimo
Telerik

 

 

[Thomas Sonnenschein]

Hi Dimo,

  at least I found the reason for the flickering. It was my own code. I bind an event on the resize event of the splitter, which is triggered first on colapsing the pane. This event than calls a function. In this function I make some calculations, and set the size of the pane to a new value, which triggers the resize event, which calls the function again, which triggers .... So I build a nice infinite loop after the first resize resulting in an anoying flickering.

I corrected the code and now,...... no flickering any more.

Thanks for your help

Regards
  Thomas

[Dimo]

Hi Thomas,

Thanks for the update, glad you found the cause of the issue.

Regards,
Dimo
Telerik