初识Kendo

Posted 2023-04-25

参考技术A 思路是通过在数据对象上定义get和set方法，调用时手动调用set或get数据，改变数据后触发UI层的渲染操作；以视图驱动数据变化的场景主要应用于input、select、textarea等元素，当UI层变化时，通过监听dom的change，keypress，keyup等来触发事件改变数据层的数据。整个过程均通过函数调用方法完成。

Kendo UI MVVM 数据绑定支持的绑定属性有 attr, checked, click, custom , disabled,enabled, events, html, invisible, , style, text ,value, visible ，这些属性可以绑定到 DOM 元素或是 Kendo UI 组件的属性。

以attr方法为例：

image 元素的 src 和 alt 属性被绑定到 viewModel 对象的 imageSource 和 imageAlt 属性。 当调用 kendo.bind 方法，image 元素和下面 HTML 元素等效：

其他绑定方法和attr大同小异！

kendo的数据源支持本地数据（javascript对象数组），或者远程数据源（XML、JSON、JSONP），支持CRUD操作（创建、读取、更新和删除操作）。
于是就想访问一个万屏汇的接口试一下，如果直接访问万屏汇接口会报错，因为kendo里面的一些方法是针对返回的数据为数组来操作的（而我们的接口返回的是对象）。所以通过现有的环境为基础，运用mock数据，重新做了一个b44的接口数据。
1.首先运用 Browsersync.cn 来访问本地服务器。查看Browsersync的安装步骤及好处点击 http://www.browsersync.cn/
2.在将返回的格式改为数组
3.格式为：

4.获取数据的长度为dataSource.view().length ；

通过这几天的认识我觉得Kendo可能并不是太适用：

获取iframe可视区域的高度 $(window.parent).height()
1.refresh方法
2.datasource 中 请求接口的数据时,获取数据要用view()方法。例如：
获取条数的个数方法为： dataSource.view().length ;
获取第一条数据的内容：dataSource.view[0].name;
3.filter 设置数据过滤器
4.sync 默认值为false。如果设置为true表示数据源将自动调用保存任何改变的数据项。

在Kendo窗口加载Kendo网格

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

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

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

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

答案

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

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

另一答案

您应该使用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网址

另一答案

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

另一答案

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

另一答案

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

我会为窗口创建一个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();
        }
    });
});