Add text to Splittbar

8 posts, 2 answers
  1. Thomas Sonnenschein
    Thomas Sonnenschein avatar
    22 posts
    Member since:
    Dec 2008

    Posted 10 Jul 2014 Link to this post

    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
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 11 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Thomas Sonnenschein
    Thomas Sonnenschein avatar
    22 posts
    Member since:
    Dec 2008

    Posted 21 Jul 2014 in reply to Dimo Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 22 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Thomas Sonnenschein
    Thomas Sonnenschein avatar
    22 posts
    Member since:
    Dec 2008

    Posted 23 Jul 2014 in reply to Dimo Link to this post

    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
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 24 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Thomas Sonnenschein
    Thomas Sonnenschein avatar
    22 posts
    Member since:
    Dec 2008

    Posted 31 Jul 2014 in reply to Dimo Link to this post

    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
  9. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 01 Aug 2014 Link to this post

    Hi Thomas,

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

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready