title: Refresh whole page from view in kendo splitter pane- MVC
body: <p>I'm trying to refresh whole page from a view which is loaded in kendo splitter pane</p>
  
  <p>For better explanations,</p>
  
  <p><strong>Splitter in Layout Page</strong></p>
  
  <pre><code> @(Html.Kendo().Splitter()
    .Name("Splitter")
    .Orientation(SplitterOrientation.Horizontal)
    .HtmlAttributes(new { id="Splitter", style = "height:100%;border:none;" })
    .Events(e =&gt; e.Expand("SplitterExpand"))
    .Panes(HorizontalPanes =&gt;
    {
        HorizontalPanes.Add()
            .HtmlAttributes(new { id = "left-pane", style = "height:100%; overflow:visible;background-image:url('" + @Url.Content("~/Content/images/GradientBg.jpg") + "');background-repeat:no-repeat;background-size: 100%;" })
            .Scrollable(false)
            .Collapsible(true)
            .Resizable(false)
            .Size("23%")
            .Content(@&lt;div id="left"&gt;
                &lt;img style="float:none"class="logo" src="@Url.Content("~/Content/logo.png")" alt="Logo" /&gt;
                &lt;div id="navigation" style=" height:75%;width:95%;overflow-y:scroll"&gt;
                    &lt;br /&gt;
                    &lt;br /&gt;
                    @RenderBody()
                &lt;/div&gt;                  &lt;div style="position:relative; top:0%" id="logo"&gt;
                    &lt;a href="http://www.olgu.com.tr/" target="_newtab"&gt;
                        &lt;img id="image" src="@Url.Content("~/Content/images/Icons/OlguLogo.png")" alt="Logo" style="width:90%;height:5%" /&gt;&lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;);
        HorizontalPanes.Add()
            .HtmlAttributes(new { id = "right-pane", style = "height:100%" })
            .Collapsible(false)
            .Scrollable(false)
            .Resizable(false)
            .Size("75%")
            .Content(@&lt;div id="right" class="right"&gt;
            &lt;/div&gt;);
    })
  )
  </code></pre>
  
  <p><strong>Layout Script for loading right pane</strong></p>
  
  <pre><code>    var iframe = document.getElementById("right");
  $("#right").html('&lt;object id="displayObj" data="@Url.Content("~/Home/RightIndex")"&gt;');
  </code></pre>
  
  <p><strong>Menu Selected Item Function</strong></p>
  
  <pre><code>function select(e)
  {
      var span = e.item.getElementsByTagName('span')[0];
      var selectedItem = span.textContent || span.innerText;
  
      $.ajax({
          url: "@Url.Content("~/Home/MenuLayout")",
          data: { text: selectedItem },
          datatype: "json",
          type: "POST",
  
          success: function (response, status, xhr)
          {
              $("#right").html('&lt;object id="displayObj" data="'+response+'"&gt;');
          },
  
      error: function (XMLHttpRequest, textStatus, errorThrown)
      {
      }
  });
  }
  </code></pre>
  
  <p><strong>Menu Layout Function</strong></p>
  
  <pre><code>        [HttpPost]
      public JsonResult MenuLayout(string text)
      {
          var data = Helper.MenuData().Where(m =&gt; m.Caption == text).FirstOrDefault();
          return Json(Url.Content(data.ViewName));
      }
  </code></pre>
  
  <p>For example RightIndex has a refresh button. When it is clicked it , whole page must be refreshed. But when I tried to refresh, only right-pane is refreshing, how can I refresh left-pane too? </p>