Splitter with partial views in panes doesn't display correctly

3 posts, 0 answers
  1. Sam
    Sam avatar
    7 posts
    Member since:
    Sep 2019

    Posted 25 Sep Link to this post

    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>
  2. Missing user
    Missing user avatar

    Posted 27 Sep Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Sam
    Sam avatar
    7 posts
    Member since:
    Sep 2019

    Posted 02 Oct in reply to Missing user Link to this post

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