dorisdong0514 2016-01-25 05:37
浏览 41

对于这个Kendo-UI数据源和Kendo-UI网格,我的JSON响应应该是什么样的

I can't figure out what the JSON response from my server should be given this setup for a Kendo-UI Grid Control & Datasource while maintaining the validations of my model.

Here is my code below for the Grid.

<div id="grid"></div>
<script>
    var crudServiceBaseUrl = "/api",
    dataSource = new kendo.data.DataSource({
        transport: {
            read:  {
                url: crudServiceBaseUrl + "/companies",
                dataType: "json",
                type: "POST"
            },
            update: {
                url: crudServiceBaseUrl + "/companies/update",
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: crudServiceBaseUrl + "/companies/destroy",
                dataType: "json",
                type: "POST"
            },
            create: {
                url: crudServiceBaseUrl + "/companies/create",
                dataType: "json",
                type: "POST"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        error: function (e) {
            /* the e event argument will represent the following object:

            {
                errorThrown: "Unauthorized",
                sender: {... the Kendo UI DataSource instance ...}
                status: "error"
                xhr: {... the Ajax request object ...}
            }

            */
            //alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
        },
        autoSync: true,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: 20,
        selectable: "multiple cell",
        allowCopy: true,
        columnResizeHandleWidth: 6,
        schema: {
            total: "itemCount",
            //data: "items",
            model: {
                id: "CompanyID",
                fields: {
                    CompanyID: { editable: false, nullable: true },
                    Name: { validation: { required: true } },
                    Phone: { type: "string" },
                    Email: { type: "string" }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        height: 550,
        groupable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: ["create"],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        columns: [
            { field: "name", title: "Company Name" },
            { field: "phone", title:"Phone" },
            { field: "email", title:"Email" },
            { command: ["edit", "destroy"], title: "Operations", width: "240px" }
        ],
        editable: "popup"
    });
</script>



<div id="grid"></div>
<script>
    var crudServiceBaseUrl = "/api",
    dataSource = new kendo.data.DataSource({
        transport: {
            read:  {
                url: crudServiceBaseUrl + "/companies",
                dataType: "json",
                type: "POST"
            },
            update: {
                url: crudServiceBaseUrl + "/companies/update",
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: crudServiceBaseUrl + "/companies/destroy",
                dataType: "json",
                type: "POST"
            },
            create: {
                url: crudServiceBaseUrl + "/companies/create",
                dataType: "json",
                type: "POST"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        error: function (e) {
            /* the e event argument will represent the following object:

            {
                errorThrown: "Unauthorized",
                sender: {... the Kendo UI DataSource instance ...}
                status: "error"
                xhr: {... the Ajax request object ...}
            }

            */
            //alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
        },
        autoSync: true,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: 20,
        selectable: "multiple cell",
        allowCopy: true,
        columnResizeHandleWidth: 6,
        schema: {
            total: "itemCount",
            //data: "items",
            model: {
                id: "CompanyID",
                fields: {
                    CompanyID: { editable: false, nullable: true },
                    Name: { validation: { required: true } },
                    Phone: { type: "string" },
                    Email: { type: "string" }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        height: 550,
        groupable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: ["create"],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        columns: [
            { field: "name", title: "Company Name" },
            { field: "phone", title:"Phone" },
            { field: "email", title:"Email" },
            { command: ["edit", "destroy"], title: "Operations", width: "240px" }
        ],
        editable: "popup"
    });
</script>

You will notice in the code that I commented out //data: "items" in the schema if I uncomment it then the Kendo-UI Grid fills with data...however, I think I'm doing it incorrectly because then the validation rules don't seem to work on the data.

For example I can tell because I'm using the 'pop up' type editing on my grid and I don't see the required working, and if I change one of the model types to boolean or number I don't see a checkbox appear or the number selector.

How should my JSON format look for a schema like the one provided?

My current JSON response looks like this. I have itemCount in there because I'm doing serverPaging, serverFiltering and serverSorting.

{"itemCount":"7","items":[{"name":"Joe","phone":"(714)333-8650","email":"fake@gmail.com"},{"name":"Rachel","phone":"(562)810-4382","email":"rachel@yahoo.com"},{"name":"John","phone":"(562)810-4382","email":"John@yahoo.com"},{"name":"Richard","phone":"(562)810-4382","email":"Richard@yahoo.com"},{"name":"Sister","phone":"(562)810-4382","email":"Sister@yahoo.com"},{"name":"Brother","phone":"(562)810-4382","email":"Brother@yahoo.com"},{"name":"Sibling","phone":"(562)810-4382","email":"Sibling@yahoo.com"}]}
  • 写回答

1条回答 默认 最新

  • dtoq41429 2016-01-25 06:15
    关注

    Okay, looks like I was just blind, turns out its case sensitive... the validation started working once I changed my schema to the following. name, phone and email in the json are lowercase so the lesson here is keep it lowercase in the schema definition also if your json response is that way.

    schema: {
                total: "itemCount",
                data: "items",
                model: {
                    id: "id",
                    fields: {
                        id: { editable: false, nullable: true },
                        name: { validation: { required: true } },
                        phone: { type: "string" },
                        email: { type: "string" }
                    }
                }
            }
    
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题