Question

我有一个Asp.net MVC应用程序，在主页面上有一个Kendo UI Splitter（参见下面的代码）。主页面还有一个Kendo UI TreeView（参见下面的代码）。右侧窗格由MVC局部视图调用，它有一个表单，以便用户可以输入数据。右窗格局部视图的内容（输入表单）由树节点从左窗格单击呈现。在用户单击HTML按钮（通过Ajax POST）将数据保存到数据库后，我想在右侧窗格窗体中，右窗格内容应刷新，以便树也将刷新。右侧窗格表单不应该刷新。我怎样才能做到这一点？请帮忙。非常感谢。

主视图页面上的Kendo Splitter：

@(Html.Kendo().Splitter()
    .Name("top")
    .Orientation(SplitterOrientation.Horizontal)
    .Panes(panes =>
    {
        panes.Add()
            .HtmlAttributes(new { id = "leftPane" })
            .Scrollable(true)
            .Collapsible(true)
            .Size("200px")
            .Content(@<div id="treeView" class="demo-section">

                      </div>);
        panes.Add()
            .HtmlAttributes(new { id = "rightPane" })
            .Scrollable(true)
            .Collapsible(true)
            .Content(@<div id="detail-pane">@{Html.RenderPartial("_RightFormPartial");}</div>);
    })
)

主页面上的TreeView和左侧窗格的构建如下：

 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");

Answer 1

我对Splitter不熟悉，但这就是我一直在刷新部分视图并调用刷新Kendo控件的方法。

 var grid = $("#ProposalGrid").data("kendoGrid");
 grid.dataSource.page(1) or  grid.dataSource.read() (forget if its a method)

在某些情况下，您将进行ajax通话。

<div id="partialSummaryDiv">@{Html.RenderAction("GetSummary", "Order");}</div>

public ActionResult GetContractTotals()
{
   // blah blah
    return PartialView("_OrderContractTotals", octvm);        
}

$.ajax({
url: "/Order/GetContractTotals",
type: "POST",
success: function (result) {
     // refreshes partial view
    $('#partialSummaryDiv').html(result);
  }
});

希望有所帮助

如何从右窗格刷新Kendo UI Splitter的左窗格

1 个答案: