Загрузить сетку кендо в окне кендо

Question

Я хочу открыть Kendo Grid в окне Kendo. Мой код окна Кендо такой.

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

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

Я хочу открыть сетку кендо в окне. Я не передаю никаких значений в окно. Открывая окно, я хочу прочитать данные из базы данных и заполнить сетку. Как я могу это сделать? Могу ли я использовать частичное представление для таблицы и загрузки в окне кендо?

Answer 1

Да, вы можете загрузить частичное представление в окне Kendo через URL-адрес содержимого:

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

Answer 2

1. Создайте частичное представление, которое содержит вашу сетку

2. в javascript: сделать ajax призыв к действию, который возвращает этот вид View:

   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 3

Вы должны использовать опцию iframe

Посмотреть демо

$("#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 с @Url.Action("Action Name")

Answer 4

1. Создайте пустой Div, где вы можете визуализировать вашу сетку. Скрыть видимость

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

2. Создайте окно кендо и раскройте 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();
   

3. Сделайте 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;
   }
   });
   

4. В Controller верните частичное представление, которое будет содержать вашу сетку

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

Answer 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>

My Controller Action (изменить при необходимости):

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