在Kendo窗口加载Kendo网格

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

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

Answer 3

1. 创建包含Grid的局部视图
2. 在javascript中：对返回此部分视图的操作进行ajax调用： qazxsw poi //在控制器.. qazxsw poi

Answer 4

1. 创建一个空Div，您可以在其中渲染网格。隐藏可见性

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

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

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

3. 对控制器进行Ajax调用，并在前面提到的Div中渲染输出

   <div id="Dialog" style="display:none;">
   </div>

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

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

Answer 5

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

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

我的javascript：

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

我的Html：

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

我的控制器动作（根据需要改变）：

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