This is a migrated thread and some comments may be shown as answers.

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

2 Answers 264 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
mark
Top achievements
Rank 1
mark asked on 26 Aug 2016, 04:16 AM

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 Answers, 1 is accepted

Sort by
0
Accepted
Nencho
Telerik team
answered on 29 Aug 2016, 03:55 PM
Hello Mark,

The reason for the inability to load the Splitter is a timing issue. This is I would suggest 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
0
mark
Top achievements
Rank 1
answered on 06 Sep 2016, 01:26 AM
Thanks for your help, Nencho. You are right. After resize splitter, it worked well. Thanks again.
Tags
PanelBar
Asked by
mark
Top achievements
Rank 1
Answers by
Nencho
Telerik team
mark
Top achievements
Rank 1
Share this question
or