title: How to refresh left pane from right pane for Kendo UI Splitter
body: <p>I have an Asp.net MVC application that has a Kendo UI Splitter on a main page (see codes below).  The main page also has a Kendo UI TreeView (see codes below) .  The right hand side pane is called by an MVC partial view and it has a form so users can input data.  The right pane partial view's contents (input form) are rendered by tree node clicking from the left pane.  I would like on the right hand pane form after users click a HTML button (via Ajax POST) to save data to database, the right pane contents <strong>should</strong> be refreshed so the tree will be refreshed, too.  The right hand pane form <strong>should not</strong> refreshed though.  How can I achieve this? Please help. Thanks very much.</p>
  
  <p>Kendo Splitter on the main view page:</p>
  
  <pre><code>@(Html.Kendo().Splitter()
      .Name("top")
      .Orientation(SplitterOrientation.Horizontal)
      .Panes(panes =&gt;
      {
          panes.Add()
              .HtmlAttributes(new { id = "leftPane" })
              .Scrollable(true)
              .Collapsible(true)
              .Size("200px")
              .Content(@&lt;div id="treeView" class="demo-section"&gt;
  
                        &lt;/div&gt;);
          panes.Add()
              .HtmlAttributes(new { id = "rightPane" })
              .Scrollable(true)
              .Collapsible(true)
              .Content(@&lt;div id="detail-pane"&gt;@{Html.RenderPartial("_RightFormPartial");}&lt;/div&gt;);
      })
  )
  </code></pre>
  
  <p>TreeView on the main page and sits on the left pane is built like:</p>
  
  <pre><code> var _root = new kendo.data.HierarchicalDataSource({
                  transport: {
                      read: {
                          cache: false,
                          url: "/Employee/AjaxEmployeeList",
                          dataType: "json",
                          data: { employeeId : _selectedId }
                      }
                  },
                  schema: {
                      model: {
                          id: "Id",
                          hasChildren: "HasChildren",
                          expanded: "expanded",
                          parentId: "parentId",
                          ItemType: "ItemType"
                      }
                  }
              });
  
              _tree = $("#treeView").kendoTreeView({
                  dataSource: _root,
                  dataTextField: "Name",
                  loadOnDemand: true, //do NOT recurse with databound to expand nodes               
                  dataImageUrlField: "Image",
                  dataBound: function (e) {
                      handleTreeDataBound(e);
                  },
                  select: function (e) {
                      handleTreeNodeSelection(e.node);
                  }
              });
  
              treeViewCtrl = $("#treeView").data("kendoTreeView");
  </code></pre>