11

ID と名前の 2 つの列しかないテーブルを使用して、非常に単純な Kendo CRUD グリッドを構築しようとしています。サーバー側のページネーションとサーバー側のフィルタリングを使用してグリッドを構成しました。

すべてが期待どおりに機能しているように見えますが、新しいレコードが作成された後、グリッドには新しいレコードが表示されますが、ID フィールドは表示されません。作成時にリクエストの ID は null ですが、作成後に id の値と完全なオブジェクトを送信しています。グリッドの例では、グリッドは新しい値で更新されます。新しく作成されたレコードの ID がグリッドにも表示されるようにするには、何を変更または追加する必要がありますか?

JSP は次のとおりです。

        <script>


        $(function() {
            var dataSource =  new kendo.data.DataSource({
                transport: {
                    read: {
                        url:"http://localhost:8181/baseweb/countrylist",
                        dataType: "jsonp"
                    },
                    update: {
                        url: "http://localhost:8181/baseweb/countryupdate",
                        dataType: "jsonp"
                    },    
                    destroy: {
                        url: "http://localhost:8181/baseweb/countrydelete",
                        dataType: "jsonp"
                    }, 
                    create: {
                        url: "http://localhost:8181/baseweb/countrycreate",
                        dataType: "jsonp"
                    },                        
                    parameterMap: function(data, operation) {
                        if (operation !== "read" && data.models) {
                            return {grid_options: kendo.stringify(data.models)};
                        }
                        return {grid_options: kendo.stringify(data)};
                    }                       
                },
                serverPaging: true,
                serverFiltering: true,
                pageSize: 10,
                schema: {
                    data: "data",        
                    total: "total",                     
                    model: {
                        id: "id",
                        fields: {
                            id: { editable: false, nullable: true },
                            name: { validation: { required: true } }                                
                        }

                    }
                }                   
        });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                filterable: true,
                height: 400,  
                toolbar: ["create"],                    
                columns: [
                          { field: "id", title:"Identification"}, 
                          { field: "name", title:"Country Name" },
                          { command: ["edit", "destroy"], title: "&nbsp;", width: "160px" }
                          ],
                editable: "popup"           
            });
        });

    </script>

作成時にサーバーに送信されるパラメーター: _ 1380846899054 callback jQuery19108827040256333442_1380846899052 grid_options {"id":null,"name":"testing"}

サーバーから応答として返されたパラメーター: jQuery19108827040256333442_1380846899052([ {"id":"4028828f4180d64a014180e3bda20002","name":"testing"}])

サーバーから返された ID がグリッドに表示されることを期待しています。このフォーラム、剣道のドキュメント、Google で回答を検索しましたが、解決策が見つかりません。

私は何が欠けていますか？

ソリューションで更新:

ジャックの答えは、解決策を見つける手がかりを提供しました。私は2つの間違いを犯していました：

a. Kendo Grid のコールバックは、データが「data:」属性に返されることを期待しているようです。応答で結果セットに「data:」という名前を付けていませんでした。b. コールバックは、data: 属性内のオブジェクトの JSONArray も想定しています。オブジェクトを 1 つしか作成していなかったので、JSONObject を送信していました。

data: attribute と JSONArray を含めるように応答を変更した後、完全に機能します。クライアントからのリクエスト パラメータは次のようになります。

_   1386350196768
callback    jQuery19101285024500179227_1386350196765
grid_options    {"id":null,"name":"Ghana"}

編集された応答は次のようになります。

jQuery19101285024500179227_1386350196765( {"data":[{"id":"2c9323ca42c8df630142c944450b0002","name":"Ghana"}]})

これは公式ドキュメントに明確に記載されていないため、他の人の助けになることを願っています。

4

2 に答える 2

12

これを行うためのきれいな方法があります...

グリッドがスクリプト ブロックで作成されている場合:

dataSource: {
    transport: {
        read: {
            url: "..."
        },
        create: {
            url: "...",
            type: "POST",
            complete: function(e) {
                $("#grid").data("kendoGrid").dataSource.read(); 
        }
    },
}...

またはHTMLで

@(Html.Kendo().Grid<ViewModel>()
  .Name("grid")
  .DataSource(dataSource => dataSource
      .Ajax()
      .PageSize(10)
      .Model(model =>
        {
            model.Id(i => i.Cde);
            model.Field(i => i.Description).Editable(true);
        })
      .Read(read => read.Action("EditingInline_Read", "UserGroups"))
      .Update(update => update.Action("EditingInline_Update", "UserGroups")).Read("EditingInline_Read", "UserGroups")
      .Destroy(delete => delete.Action("EditingInline_Delete", "UserGroups"))
      .Create(create => create.Action("EditingInline_Create", "UserGroups")).Read("EditingInline_Read", "UserGroups")
   )
  .Columns(columns =>
  {
      columns.Bound(s => s.Decription);
      columns.Bound(s => s.enabled);
      columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
  })
  .Pageable()
  .Sortable()
  .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Single))
  .ToolBar(toolbar => toolbar.Create()))

CRUD 呼び出し、より具体的には Update と Create を確認してください。

于 2014-01-16T05:52:03.393 に答える