获取 kendo-window 参数

Question

我有一个 JavaScript 方法可以打开 kendo-window，这个 window 包含一个 kendo-grid，它有一个数据源我想从我的控制器中获取。为了让数据填充这个网格，我需要传递一个 ID。打开这个 window 的 JavaScript 方法包含必要的数据，但是我不知道如何在我的 kendo-grid 中获取这些数据。我需要将我的 ID 获取到 (read => read.Action("Read_Action", "ControlerName", new { linenum = ??? }) 部分，我想用我的 ID 替换问号。

JavaScript:

    function showDetails(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        console.log(dataItem.LineNum);
        var wnd = $("#Details").data("kendoWindow");
        wnd.center().open();
    }

Kendo-window:

@{Html.Kendo().Window().Name("Details")
    .Title("Location Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(800)
    .Height(600)
    .Content(                                
          Html.Kendo().Grid<TelerikMvcApp1.Models.BinLocationItemModel>()
               .Name("LocItemGrid")
               .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(m => m.BinLocationItemId))
                    .Read(read => read.Action("Read_Action", "ControlerName", new { linenum = ??? })))
                    .ToHtmlString()).Render();
}

Answer 1

您只能使用控制器将 window 内容作为局部视图打开。

设置您的控制器，它将呈现局部视图并将 id 添加到 ViewBag 以在 kendo window、

中检索

public ActionResult GetKendoWindow(){
    ViewBag.Id = 123;
    return PartialView("_PartialView"); // Html file name
}

您的 "_PartialView" 文件现在将仅包含从 ViewBag.Id

分配 ID 的网格

Html.Kendo().Grid<TelerikMvcApp1.Models.BinLocationItemModel>()
               .Name("LocItemGrid")
               .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(m => m.BinLocationItemId))
                    .Read(read => read.Action("Read_Action", "ControlerName", new { linenum = ViewBag.Id }))

您的 kendo().window() 方法将更改为此（没有内容，因为它将从局部视图加载）

@{Html.Kendo().Window().Name("Details")
    .Title("Location Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(800)
    .Height(600)
    .LoadContentFrom("GetKendoWindow", "Controller")
    .ToHtmlString()).Render();
}

如果您的 ID 来自父页面（您从中打开 window 的页面），您需要将 ID 传递给控制器，然后您的 .LoadContentFrom("GetKendoWindow", "Controller")变成 .LoadContentFrom("GetKendoWindow?ID=123", "Controller").

并且您的控制器声明将变为 public ActionResult GetKendoWindow(int ID)

编辑：当您从 JavaScript 事件中检索值时，为了简单起见，您最好使用 JavaScript 打开 window，在您的事件中放置以下

$("#Details").kendoWindow({
    width: "620px",
    height: "620px",
    title: "Window Title",
    content: {
       url: "GetKendoWindow",
       type: "GET",
       data: {ID : dataItem.ID}
    }
});

完全删除你的 Kendo().Window() Razor 函数，并留下一个空的 div 和 id 详细信息，并使用 $("#Details").data("kendoWindow").center().open()

打开 window

为简单起见，完整代码：

<div id="Details"></div>

<script>
// Your event function where you retrieve the dataItem
$("#Details").kendoWindow({
    width: "620px",
    height: "620px",
    title: "Window Title",
    content: {
       url: "GetKendoWindow",
       type: "GET",
       data: {ID : dataItem.ID}
    }
});

$("#Details").data("kendoWindow").center().open()
//End the event function
</script>

然后从上面添加你的控制器方法。

public ActionResult GetKendoWindow(int ID){
    ViewBag.Id = ID;
    return PartialView("_PartialView"); // Html file name
}

Answer 2

您可以这样使用 Kendo DataSource additional data：

$("#grid").data("kendo-grid").dataSource.read({additional:"data"});

这是在处理网格演示页面：http://demos.telerik.com/kendo-ui/grid/remote-data-binding。它将参数添加到请求中。

您或许可以在数据源中设置返回附加数据的函数 - 请参阅文档：http://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-do-i-send-values-to-my-action-method-when-binding-the-grid?

编辑 1

您可以简单地通过设置网格的附加请求数据来实现：

 $("#grid").data("kendo-grid").dataSource.transport.options.read.data = { additional: "data"};

所以你打开 window 和 kendo 网格。 Select $(...).data("kendoGrid") 典型的网格。然后将 dataSource.transport.options.read.data 设置为您的线路 ID。

获取 kendo-window 参数

Getting kendo-window parameter

javascript

kendo-grid

kendo-window