Splitter with partial views in panes doesn't display correctly

[Sam]

I am trying to set up my index page such that it has a splitter with two horizontal panes, left and right.  Each pane gets its contents from a partial view.  The left pane should contain a text box, button and a TreeView.  The right pane is a map.  If I try to load the partial view in the left pane, the page does not display correctly.  If I only have a simple string in the left pane content, the page (and map) work.  Please advise.

Index.cshtml:

@(Html.Kendo().Splitter()
      .Name("splitter")
      .Orientation(SplitterOrientation.Horizontal)
      .Panes(hPanes =>
      {
          hPanes.Add()
              .HtmlAttributes(new { id = "left-pane" })
              .Size("25%")
              .Scrollable(false)
              .Collapsible(true)
          .Content(Html.Partial("_TreeView").ToHtmlString());
          //.Content("<h1>TEST</h1>");

          hPanes.Add()
        .HtmlAttributes(new { id = "right-pane" })
        .Size("75%")
        .Scrollable(false)
        .Collapsible(false)
        .Content(Html.Partial("_MapView").ToHtmlString());
      })
)
<style>
    #splitter {
        height: 100vh;
        /*width: 100vw;*/
        padding: 0;
        margin: 0;
    }

    #left-pane {
        color: #000;
        background-color: #ccc;
    }

    #right-pane {
        color: #000;
        background-color: #aaa;
    }
</style>

<script>
</script>

 

_TreeView.cshtml:

@{
    Html.Kendo().TextBox()
       .Name("searchTextBox");

    Html.Kendo().Button()
    .Name("SearchTrigger")
    .Content("Search");
}

 

_MapView.cshtml:

@(Html.Kendo().Map()
    .Name("map")
    .Center((double)ViewBag.BicLat, (double)ViewBag.BicLong)
    .Zoom(14)
    .Layers(layers =>
    {
        layers.Add()
        .Type(MapLayerType.Bing)
              .ImagerySet(MapLayersImagerySet.AerialWithLabels)
              .Key("ApiZL7kfQK2OAVUEfEtIUds-61ZYq1QHeX8DF6fm7kKWlLuzreW4anD5v8DeuvEu");
        //.Type(MapLayerType.Tile)
        //.UrlTemplate("http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
        //.Subdomains("a", "b", "c");
    })
    .Markers(markers =>
    {
        markers.Add()
        .HtmlAttributes(new {id = "bicMarker" })
                .Location((double)ViewBag.BicLat, (double)ViewBag.BicLong)
                .Shape(MapMarkersShape.PinTarget)
                .Tooltip(tooltip => tooltip.Content("BIC"));
    })
)

<style>
    #map {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>

[Aleksandar]

Hello Sam,

Thank you for the provided code snippets. The issue is related to the initialization of the Kendo Widgets in the _TreeView.cshtml partial file. The widgets should be initialized in the following manner:

@(Html.Kendo().TextBox()
    .Name("searchTextBox")
)

@(Html.Kendo().Button()
    .Name("SearchTrigger")
    .Content("Search")
)

I'm attaching a sample project with a sample TreeView added as well, for you to review. Should you have any further questions please get back to me.

Regards,
Aleksandar
Progress Telerik

[Sam]

Actually, that isn't the problem.  What fixed it was commenting out the script for the autocomplete.