Splitter not initial/work well in panelbar when using partial view

3 posts, 1 answers
  1. mark
    mark avatar
    10 posts
    Member since:
    Jul 2012

    Posted 25 Aug Link to this post

    hello,

        I am drawing one page like this: In panelbar, load Splitter widget. When I put Splitter in partial view and use LoadContentFrom to load this partial view. Splitter will not initial/work well.

        Here is part code:

    1. PanelBar

          @(Html.Kendo().PanelBar()
              .Name("Panelbar1")
              .ExpandMode(PanelBarExpandMode.Multiple)
              .Items(panelbar =>
              {
                  panelbar.Add().Text(N5Default.LABEL_MASTER_STRUCTURE).ImageUrl(@Url.Content("~/content/images/controltesting_panel1.png"))
                      .Expanded(false).LoadContentFrom("SplitterPartial", "Admin");
              })
    )

    2. Splitter

    @(Html.Kendo().Splitter()
          .Name("SplitterSample")
          .HtmlAttributes(new { style = "height:700px;top:-9px;" })
          .Orientation(SplitterOrientation.Vertical)
          .Panes(verticalPanes =>
          {
              verticalPanes.Add()
                  .HtmlAttributes(new { id = "location-structure-top-pane" })
                  .Scrollable(false)
                  .Collapsible(true)
                  .Content(
                    Html.Kendo().Splitter()
                        .Name("LocationStructureHorizontalSplitter")
                        .HtmlAttributes(new { style = "height: 100%;" })
                        .Panes(horizontalPanes =>
                        {
                            horizontalPanes.Add()
                                .HtmlAttributes(new { id = "location-structure-left-pane" })
                                .Size("200px")
                                .Collapsible(true)
                                .Content("");
                            horizontalPanes.Add()
                                .Collapsible(true)
                                .HtmlAttributes(new { id = "location-structure-right-pane" })
                                .Content("");
                        }).ToHtmlString()
                  );
              verticalPanes.Add()
                  .HtmlAttributes(new { id = "location-structure-bottom-pane" })
                  .Size("320px")
                  .Collapsible(true)
                  .Content("");
          })
       )

    Anybody know why it does not work?

    After I use Content to load Splitter and not use LoadContentFrom by partial view, it works.

    The below code works well:

    @(Html.Kendo().PanelBar()
              .Name("Panelbar1")
              .ExpandMode(PanelBarExpandMode.Multiple)
              .Items(panelbar =>
              {
                  panelbar.Add().Text(N5Default.LABEL_MASTER_STRUCTURE).ImageUrl(@Url.Content("~/content/images/controltesting_panel1.png"))
                      .Expanded(false).Content(@<div>
                          @RenderSplitter()
                      </div>);
              })
    )

     

    @helper RenderSplitter()
        {

           @(Html.Kendo().Splitter()
                  .Name("SplitterSample")

                 .......

    }

      Anybody can help? Because I am drawing one complex page. I cannot put all widgets in one page. It will be hard to view. So I want to use partial view to load. Thanks in advance.

     

    Mark

    Best Wishes

  2. Answer
    Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 29 Aug Link to this post

    Hello Mark,

    The reason for the inability to load the Splitter is a timing issue. This is why, I would suggest you to use the resize() method of the Splitter at the activate event of the PanelBar with a slight timeout:

    @(Html.Kendo().PanelBar()
              .Name("Panelbar1")
              .ExpandMode(PanelBarExpandMode.Multiple)
              .Items(panelbar =>
              {
                  panelbar.Add().Text("test").LoadContentFrom("SplitterPartial", "Splitter");
              })
              .Events(e=>e.Activate("activate"))
    )
     
    <script >
        function activate() {
            setTimeout(function e() {
                $("#SplitterSample").data("kendoSplitter").resize();
            }, 100)
        }
    </script>

    Hope this would help.

    Regards,
    Nencho
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. mark
    mark avatar
    10 posts
    Member since:
    Jul 2012

    Posted 05 Sep Link to this post

    Thanks for your help, Nencho. You are right. After resize splitter, it worked well. Thanks again.
Back to Top