Kendo数据源没有填充到网格中

时间:2014-08-27 07:52:20

标签: jquery kendo-ui kendo-grid

我是kendo框架的新手,如果需要,我将非常感谢您的帮助并提供更多详细信息。

我正在变空网格,我不知道填充到网格中需要进行哪些更改。

Webservice json string

{"items":[{"id":1,"publisherName":"Srini","active":false},{"id":2,"publisherName":"Ram","active":false}]}

Kendo Html Code

<!-- JAVASCRIPT FILES -->
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../jquery/plug-ins/colorbox-modal/jquery.colorbox.js"></script>
<script src="../jquery/plug-ins/colorbox-modal/colorbox.js"></script>
<script src="../jquery/plug-ins/jquery.placeholder.js"></script>
<script src="../jquery/plug-ins/jquery.jOrgchart.js"></script>      

<script src="../bootstrap/js/bootstrap-prettyCheckable.js"></script>    
<script src="../bootstrap/plug-ins/bootstrap-datepicker.js"></script>   
<script src="../bootstrap/plug-ins/bootstrap-switch.js"></script>
<script src="../bootstrap/js/bootstrap-downloadFile.js"></script>
<script src="../bootstrap/js/bootstrap-select.js"></script>
<!-- Kendo UI Web combined JavaScript -->
<script src="../kendoUI/js/kendo.web.min.js"></script>      



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

        <script style="text/javascript">

            $(document).ready(function () {
                var BASE_URL = "",

                    dataSource = new kendo.data.DataSource({
                        dataType: "jsonp",
                        transport: {
                            read:  {
                                url: "http://localhost:8080/wad/admin/searchPublishers.htm",
                                type: "GET",
                                cache: false
                            },
                            update: {
                                url: BASE_URL + "http://localhost:8080/wad/admin/updatePublisher.htm"
                            },
                            create: {
                                url: BASE_URL + "http://localhost:8080/wad/admin/addPublisher.htm"
                            },
                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {models: kendo.stringify(options.models)};
                                }
                            }
                        },
                        batch: true,
                        pageSize: 20,
                        schema: {
                              model: {
                                  id: "id",
                                  fields: {
                                      id: { editable: false, nullable: true },
                                      publisherName: { validation: { required: true } }
                                  }
                              },
                            data: "items",
                            total: "items.length" //total amount of records. This is needed for paging
                        }
                    });

                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    pageable: true,
                    height: 550,
                    toolbar: ["create"],
                    columns: [
                            { field: "publisherName", title: "Publisher", width: "130px" },
                            { command: ["edit"], title: "Actions", width: "150px" }
                        ],
                    editable: "inline"
                });
            });
        </script>
    </div>

3 个答案:

答案 0 :(得分:0)

试试这个

dataType放在transport这样的

如果您使用Cross origin,则只需使用jsonp,否则请使用json

  dataSource = new kendo.data.DataSource({

                        transport: {
                            read:  {
                                url: "http://localhost:8080/wad/admin/searchPublishers.htm",
                                type: "GET",
                                cache: false,
                                dataType: "json"
                            }});

答案 1 :(得分:0)

如果你要获取json字符串而不是替换代码行dataType:&#34; jsonp &#34;至 dataType:&#34; json &#34;

您可以使用以下阅读功能

transport: {
      read: function(options) {
        $.ajax( {
          url: "your url",
          dataType: "json",
          success: function(result) {
            options.success(result.items);
          }
        });

      },

答案 2 :(得分:0)

此外,您可以在读取数据时使用某些参数发布数据并获取结果并分配给网格。

transport: {
                read: function(options) {
                    $.ajax({
                        type: "POST",
                        url: "http://sdk.domain.com/services/general.asmx/GetPendingActions",
                        data:  "{'sUsername':'admin@mail.com','sPassword':'13123','sUserID':'1539','sClubID':'1'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (result) {
                            options.success(result);
                        }
                    });
                }
            },