在 Kendo Window 中加载 Kendo Grid答案

【问题标题】：Load Kendo Grid in Kendo Window在 Kendo Window 中加载 Kendo Grid
【发布时间】：2015-02-27 19:14:53
【问题描述】：

我想在 Kendo Window 中打开 Kendo Grid。我的剑道窗口代码是这样的。

   $("#Dialog").kendoWindow({
            title: "Add",                
            modal: true
        });

        var dialog = $("#Dialog").data("kendoWindow");          
        dialog.center().open();

我想在窗口中打开剑道网格。我没有将任何值传递给窗口。打开窗口时，我想从数据库中读取数据并填充网格。我怎样才能做到这一点？我可以对网格使用局部视图并在 Kendo 窗口中加载吗？

【问题讨论】：

标签： asp.net-mvc razor kendo-ui kendo-grid kendo-window

【解决方案1】：

是的，您可以通过内容 url 在 Kendo 窗口中加载部分视图：

    $('#Dialog').kendoWindow({
        content: {
            url: "/AppName/ViewName" OR "ViewName/ControllerMethod"
        },
        title: "Add",                
        modal: true});

【讨论】：

【解决方案2】：

你应该使用 iframe 选项

See Demo

$("#window").kendoWindow({
                        width: "615px",
                        title: "Window",
                        iframe:true
                    });

function openWindow(_title, _url) {
                var manager = $('#window').data("kendoWindow");
                manager
                    .title(_title)
                    .center()
                    .open()
                    .refresh({
                        url: _url
                    });
                }

用@Url.Action("Action Name")替换谷歌网址

【讨论】：

【解决方案3】：

创建包含您的 Grid 的局部视图

在 JavaScript 中：进行 ajax 调用以返回此部分视图：

var kWindow = $("#window").data("kendoWindow");
$.ajax({
        url: YourController/OpenGridPartielView,
        cache: false,
        success: function (result) {
            kWindow.refresh
            {
                $("#window").html(result);
            };
            kWindow.center().open();
        },
        error: function (result) {
        }
    });

//在控制器中..

public PartialViewResult OpenGridPartielView()
{   
   return PartialView(@"your PartielView Path");
}

【讨论】：

【解决方案4】：

创建一个可以渲染网格的空 div。隐藏可见性
```
<div id="Dialog" style="display:none;">
</div>
```

创建一个 Kendo 窗口并随时取消隐藏 div。

document.getElementById("Dialog").style.display = "block";
$("#Dialog").kendoWindow({
    visible: false,
    modal: true,
    actions: ["Minimize", "Close"],
    title: "Select an Enterprise",
    width: "400px",
    visible: false
});
var _dialog = $("#Dialog").data("kendoWindow");
_dialog.center().open();

对控制器进行 Ajax 调用并在前面提到的 Div 中呈现输出

$.ajax({
 url: RootUrl + 'Controller/ActionMethod',
 type: 'POST',
 contentType: 'application/json;',
 data: JSON.stringify({ Property: Value }),
 async: false,
 success: function (data) {
    document.getElementById("Dialog").innerHTML = data;
}
});

在控制器中，返回包含您的网格的部分视图

public ActionResult ActionMethod()
{
   return PartialView("PartialViewName");
}

【讨论】：

【解决方案5】：

我在上面看到了一些使用 PartialView 的示例，这很好，但这是不使用 PartialViews 的另一种方式。

我将为窗口创建一个 div 元素，为网格创建另一个元素。然后，我将使用网格读取事件的自定义参数来实例化两个剑道元素，以便结果可以是动态的。

我的javascript：

$(document).ready(function () {
//VARIABLE TO HOLD PARAMETER VALUE FOR READ EVENT
    var id = 0;
    $("#btn").click(function () {
        var dialog = $("#kendoWindow").data("kendoWindow");
        dialog.center().open();
    });
    $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: 'YOUR URL TO CONTROLLER ACTION',
                    type: "GET",
                    dataType: 'json',
                    data: function() {
                        return {
                            id: id
                        }
                    }
                }
            },
            schema: {
                model: {
                    id: "ProductId",
                    fields: {
                        ProductName: { type: "string" }
                    }
                }
            },
            pageSize: 20
        },
        height: 550,
        columns: [
            "ProductId",
            "ProductName"
        ]
    });

    $("#kendoWindow").kendoWindow({
        title: "Add",
        model: true,
        open: function () {
        //ON OPEN EVENT OF WINDOW YOU CAN CHANGE THE PARAMETER IF NEEDED
            id = 10;
            $("#grid").data("kendoGrid").dataSource.read();
        }
    });
});

我的 HTML：

<h2>kendoGridinKendoWindow</h2>
<button id="btn">Open Window</button>
<div id="kendoWindow">
    <div id="grid"></div>
</div>

我的控制器操作（根据需要更改）：

public JsonResult GetData(int id)
{
    if(id == 0) {
        List<Product> data = new List<Product>();
        for(var i=0; i< 10; i++){
            data.Add(new Product{ ProductId = i, ProductName ="test" + i});
        }
        return Json(data, JsonRequestBehavior.AllowGet);
    }
    else
    {
        List<Product> data = new List<Product>();
        data.Add(new Product { ProductId = 0, ProductName = "test" });
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

【讨论】：