web-dev-qa-db-ja.com

剣道グリッド削除コマンドが機能しない

kendo ui toolsを使用してWebアプリケーションを開発しましたが、バッチ編集モード ..の剣道グリッドがあります。

しかし、剣道グリッドのレコードの削除ボタンを押すと、グリッドのリストから消去されますが、実際にはデータソースにはありません。ページまたはグリッドをリロードすると、削除されたアイテムはまだ存在します。

これが私のグリッドのコードです

<div id="grid">
        </div>
        <script type="text/javascript">

            $("#submitMarketUser").click(function () {
                var grid = $("#grid").data("kendoGrid");
                var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "WholeSaleTrade/GetTradeProductDetail",
                            dataType: "json",
                            data: {
                                test: $("#Names").val()
                            }
                        },
                        destroy: {
                            url: "WholeSaleTrade/DeletePro",
                            type: "POST",
                            dataType: "jsonp",
                            data: {
                                DAKy: $("#Names").val(),
                                DIKy: $("#btntxt").val()
                            }
                        },
                        create: {
                            url: "WholeSaleTrade/CreateProduct",
                            type: "POST",
                            dataType: "jsonp",
                            data: {
                                AKy: $("#Names").val(),
                                IKy: $("#btntxt").val()
                            }
                        }
                    },
                    pageSize: 5,
                    schema: {
                        model: {
                            id: "ProductKey",
                            fields: {
                                ProductKey: { editable: false, nullable: true },
                                ProductName: { validation: { required: true} }
                            }
                        }
                    }
                });
                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    editable: true,
                    toolbar: ["create", "save"],
                    autobind: true,
                    pageable: true,
                    columns: [
                        { field: "ProductName", title: "Product Name",
                            editor: function (container, options) {
                                var model = options.model;
                                $('<input id="btntxt" name="' + options.field + '"/>').appendTo(container).kendoComboBox({
                                    dataSource: {
                                        type: "POST",
                                        transport: {
                                            read: {
                                                url: "MarketInformation/PopulateProducts",
                                                success: function (data) {
                                                    var prod = data[0];
                                                    model.set("ProductName", prod.ItmNm);
                                                    model.set("ItmKy", prod.ItmKy);
                                                    model.set("UserKey", $("#Names").val());
                                                }
                                            }
                                        }
                                    },

                                    dataValueField: "ItmKy",
                                    dataTextField: "ItmNm"
                                });
                            }
                        },
                        { command: ["destroy"], title: "&nbsp;" }
                    ]
                });
            });

        </script>

障害がどこに向かっているのか特定できず、誰かがこの問題を解決するのを手伝ってくれませんか。

kendo-uikendo-grid
16
sanzy

セル内編集を利用するためにeditable.modeを含めないことを選択した場合は、グリッドのtoolbarにオプションsaveを含めるように設定できます。

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            ....
        },
        schema: {
            ....
        }
    },                        
    toolbar: ["create", "save", "cancel"],
    columns: [
        ....
    ],
    editable: true
});

これにより、グリッドのツールバーにsaveボタンが作成されます。 destroyコマンドボタンをクリックしてレコードを削除した後、saveボタンをクリックしてグリッドを作成し、サーバーにAjax呼び出しを行ってレコードを削除します。

saveボタンを含めずにレコードを自動的に削除したい場合は、グリッドのchangeにdatasourceイベントハンドラーを追加できます。

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            ....
        },
        schema: {
            ....
        },
        change: function(e) {
            if (e.action === "remove") {
                this.sync();
            }
        }
    },                        
    columns: [
        ....
    ],
    editable: true
});

これにより、データが変更されたときに、グリッドに加えた変更がサーバーと自動的に同期されます。

2
Twisted Whisper

私も同じ問題を抱えていました。私の問題は、剣道モデルにdataプロパティがあることが原因でした。例：

{id: 1, data: ""}
0
Jakobovski

サーバーのDeleteメソッドにintの任意の名前を付けていました。

    [HttpPost]
    public ActionResult DeleteRandomTest(Int32 randomTestId)
    {
         ...
    }

デフォルトのmodelbinderは、おそらくIdというプロパティを探していました（モデルの構成に応じて、私のタイプの主キーと同じです）。

 .Model(config => config.Id(p => p.Id))

実際、私は署名を次のように変更することでこれを証明しました。

    [HttpPost]
    public ActionResult DeleteRandomTest(Int32 Id)
    {
        ...
    }

その後、私のブレークポイントに到達しました。

最終的には、剣道の例に示すように、完全な型をパラメーターとして使用しました。これは、アクションでパラメーター名の名前が不適切（キャメルケースではない）にしたくないためです。次のように表示されます。

    [HttpPost]
    public ActionResult DeleteRandomTest([DataSourceRequest]
         DataSourceRequest request, RandomDrugTest randomDrugTest)
    {
       ...
    }

これが機能しなかった理由のようです。

0
jwize

うーん、type: "POST",を含めないようにして、デモにビットが含まれておらず、最後にインライン編集/削除を行ったときに含めていないと思うので、今は機能するかどうかを確認してください。

0
Myzifer