How to set SplitterPane content?

2 posts, 0 answers
  1. Laszlo
    Laszlo avatar
    3 posts
    Member since:
    Aug 2013

    Posted 22 Aug 2013 Link to this post

    Hello, I would like to set other content to my splitter pane after i configured it by usig RAZOR syntax, The idea is that i have a treeview and onSelect event where I set the right pane content to a grid or calendar or some other stuff. How can I add thosse widgets to my right-pane using javascript? I can set the text of the field but i can't find a Content option. If you have other ideas how to implement this please feel free to suggest.

    @Code
      Html.Kendo().Splitter() _
            .Name("Splitter") _
            .HtmlAttributes(New With {.id = "pekasz"}) _
            .Orientation(SplitterOrientation.Horizontal) _
            .Panes(Sub(panes)
            ...
                    panes.Add().Scrollable(True) _
                                      .Collapsible(False) _
                                      .HtmlAttributes(New With {.id = "right-pane"}) _
                                      .Content("<div id = 'estifeny'>" & Html.Kendo().Calendar().Name("bar").HtmlAttributes(New With {.id = "kicsicsicsiman"}).ToHtmlString & "</div>")
    END Code

    <script>
        function onSelect(e) {
           $("#right-pane").text(this.text(e.node)) ;     
           $("#right-pane").Content???
            };
    </script>
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 Aug 2013 Link to this post

    Hello Laszlo,

    $("#right-pane") is a standard jQuery object, so it does not have Kendo UI server properties.

    You can set pane content client side by using

    + the ajaxRequest method of the Splitter
    http://docs.kendoui.com/api/web/splitter#methods-ajaxRequest

    or

    + the jQuery html method
    http://api.jquery.com/html/

    After appending the required HTML markup to the Splitter pane, you can execute the Javascript initialization statements of the new widgets, similar to the way these statements are executed manually in our online demos (compared to using MVC wrappers when the initialization statements are automatically generated).

    http://demos.kendoui.com/web/calendar/index.html

    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
Back to Top