使用弹出式编辑器添加时,Kendo Grid Data无法显示?

时间:2015-08-10 16:38:48

标签: javascript kendo-ui telerik kendo-grid

我正在尝试使用kendo popup添加数据。它添加到数据源(请参见网格右下角),但它没有显示在网格行的值中。请帮我实现这个目标。 源代码:此代码将为kendo编辑器 - http://dojo.telerik.com/

 <!DOCTYPE html>
    <html>
    <head>
        <base href="http://demos.telerik.com/kendo-ui/grid/index">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.material.min.css" />

        <script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
        <script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
    </head>
    <body>

    <div id="example">
                <div id="grid"></div>

                <script>
                    $(document).ready(function () {
                        $("#grid").kendoGrid({
      "dataSource": {
        "batch": "TRUE",
        "schema": {
          "model": {
            "id": "id",
            "field": {
              "id": {
                "editable": "FALSE",
                "nullable": "FALSE"
              },
              "cusAddTelephone": {
                "editable": false,
                "type": "string"
              }
            }
          }
        },
        "table": null,
        "fields": [
          {
            "encoded": true,
            "field": "cusAddTelephone",
            "title": "Telephone"
          },
          {
            "encoded": true,
            "title": "&nbsp;",
            "command": [
              "destroy",
              "edit"
            ]
          }
        ],
        "pageSize": "TRUE",
        "data": [
          {
            "cusAddTelephone": "Joe Smith"
          },
          {
            "cusAddTelephone": "Jane Smith"
          },
          {
            "cusAddTelephone": "Will Roberts"
          }
        ]
      },
      "columns": [
        {
          "field": "cusAddTelephone",
          "title": "Telephone"
        },
        {
          "title": "&nbsp;",
          "command": [
            "destroy",
            "edit"
          ]
        }
      ],
      "sortable": "TRUE",
      "editable": "popup",
      "toolbar": [
        {
          "name": "create",
          "text": "add a new contact"
        }
      ],
      "groupable": "TRUE",
      "pageable": {
        "pageSize": "TRUE",
        "buttonCount": "5",
        "schema": "TRUE"
      }
    });
                    });
                </script>
    </div>

    <style type="text/css">
            .customer-photo {
            display: inline-block;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-size: 32px 35px;
            background-position: center center;
            vertical-align: middle;
            line-height: 32px;
            box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
            margin-left: 5px;
        }

        .customer-name {
            display: inline-block;
            vertical-align: middle;
            line-height: 32px;
            padding-left: 3px;
        }
    </style>


    </body>
    </html>

1 个答案:

答案 0 :(得分:0)

我假设这是你所期待的? Your code dojo

我为您创建了附加的dojo,并使您的代码工作正常。

您将有希望注意到我所要做的就是删除kendo设置的识别部分周围的引号。