Question

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

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

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

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

Answer 1

是的，您可以通过内容网址

在Kendo窗口中加载部分视图

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

Answer 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
                    });
                }

将Google网址替换为@Url.Action("Action Name")

Answer 3

创建包含网格的部分视图

：做一个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");
}

Answer 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;
}
});

在Controller中，返回包含网格的部分视图

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

Answer 5

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

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

我的javascript：

darth.vader@deathstar.com

我的Html：

$(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();
        }
    });
});

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

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

在Kendo窗口加载Kendo网格

5 个答案: