MVC5 Views and Kendo Splitter - Content in 2 overwrites 1

Question

TLDR; Why is pane 2 contentUrl data overwriting pane1 contentUrl data. Details below.

Ok we're getting education by fire here and trying to learn more web based development while too quickly developing an application. Using MVC 5 and Telerik (Kendo) I'm trying to create a spitter than loads from 4 different partial views. Currently I'm just using dummy/demo data from Telerik's site.

When the page loads, it will briefly show the contents of @Url.Content("~/Productivity") then it is replaced by the contents of @Url.Content("~/QualityControl"), but the headings do not change.

Both Productivity and QualityControl are partial views which are returned by the associated controllers and are . SpanOfControl and Position Control are currently returning only an H2 header.

public ActionResult Index() { return View("_ProductivityPartial"); }

public ActionResult Index()
    {
        return View("_QualityControlPartial");
    }

HTML/Javascript on index.cshtml

<div id="verticalSplit">
<div id="topHorizontal">
    <div id="top-left">Top Left</div>
    <div id="top-right">Top Right</div>
</div>
<div id="bottomHorizontal">
    <div id="bottom-left">Bottom Left</div>
    <div id="bottom-right">Bottom Right</div>
</div>

<script type="text/javascript">
 $(document).ready(function () {

    $("#verticalSplit").kendoSplitter({
        orientation: "vertical",
        panes: [
            { collapsible: true, expand: true, resize: false },
            { collapsible: true, expand: true, resize: false }
        ]
    });
   $("#topHorizontal").kendoSplitter({
        orientation: "horizontal",
        panes: [
            { contentUrl: "@Url.Content("~/Productivity")" },
            { contentUrl: "@Url.Content("~/QualityControl")" }
        ]
    });
    $("#bottomHorizontal").kendoSplitter({
        orientation: "horizontal",
        panes: [
            { contentUrl: "@Url.Content("~/SpanOfControl")" },
            { contentUrl: "@Url.Content("~/PositionControl")" }
        ]
    });

score 0 · Accepted Answer · answered Feb 28 '18 at 20:32

So I've done a lot of digging and had actually found the answer 2 hours ago but it's still vaguely mentioned on Telerik support.

Since I was using the slightly modified demos from Telerik UI for ASP.NET MVC, I had forgotten to change the name of the charts. I decide to post this answer as I had the realization as I was writing the question. Even though they are in different views and controllers, when attempting to display them both on the same page you'll likely encounter the issue I had. It was more confounding as the graphs worked perfectly when on their individual pages.

So if you want to use 2 charts/controls on separate pages but still want to display them (via a view/grid/pane etc) on the same page, make sure you change the name below.

Default:

Html.Kendo().Chart()
  .Name("chart")

MVC5 Views and Kendo Splitter - Content in 2 overwrites 1

1 Answers1