kendo-ui - インライン剣道グリッドの更新をキャンセル行を削除

Question

剣道インライングリッドを親子で2つ使用しています。子グリッドには製品のリストが含まれており、ユーザーが子グリッドから製品 (複数選択) を選択し、ボタンをクリックして保存すると、親グリッドに挿入されます。

子グリッド:

var selectedIds = {};

var ctlGrid = $("#KendoWebDataGrid3");
ctlGrid.kendoGrid({
    dataSource: {
        data:data1,
        schema: {
            model: {
                id: 'id',
                fields: {
                    select: {
                        type: "string",
                        editable: false
                    },

                    Qty: {
                        editable: true,
                        type: "number",
                        validation: { min: 1, required: true }
                    },
                    Unit: {
                         editable: false,
                         type: "string"
                    },
                    StyleNumber: {
                         editable: false,
                        type: "string"
                    },
                    Description: {
                         editable: false,
                        type: "string"
                    }


                }
            }
        },
        pageSize: 5
    },
    editable: 'inline',
    selectable: "multiple",
    sortable: {
        mode: 'single',
        allowUnsort: false
    },
    pageable: true,
    columns: [{
        field: "select",
        title: "&nbsp;",
        template: '<input type=\'checkbox\' />',
        sortable: false,
        width: 35},
    {

        title: 'Qty',
        field: "Qty",
        width:90},
    {
        field: 'Unit',
        title: 'Unit',
        width: 80},
    {
        field: 'StyleNumber',
         title: 'Style Number',
        },
    {
        field: 'Description',
        width: 230},

   {command: [<!---{text:"Select" ,class : "k-button",click: selectProduct},--->"edit" ], title: "Command", width: 100 }

   ],
    dataBound: function() {
        var grid = this;            
        //handle checkbox change
        grid.table.find("tr").find("td:first input")        
            .change(function(e) {                  
                var checkbox = $(this);     
                var selected = grid.table.find("tr").find("td:first input:checked").closest("tr");

                grid.clearSelection();      

                //persist selection per page
                var ids = selectedIds[grid.dataSource.page()] = [];

                if (selected.length) {
                    grid.select(selected);
                    selected.each(function(idx, item) {
                        ids.push($(item).data("id"));
                    });                    
                } 

            })
            .end()
            .mousedown(function(e) {
                e.stopPropagation();
            })

        //select persisted rows
        var selected = $();
        var ids = selectedIds[grid.dataSource.page()] || [];

        for (var idx = 0, length = ids.length; idx < length; idx++) {
            selected = selected.add(grid.table.find("tr[data-id=" + ids[idx] + "]")                   );
        }

        selected
            .find("td:first input")
            .attr("checked", true)
            .trigger("change");


    }
});

var grid = ctlGrid.data("kendoGrid");

grid.thead.find("th:first")
    .append($('<input class="selectAll" type="checkbox"/>'))
    .delegate(".selectAll", "click", function() {
        var checkbox = $(this);            

        grid.table.find("tr")
            .find("td:first input")
            .attr("checked", checkbox.is(":checked"))
            .trigger("change");
    });

保存ボタンクリックイベント

        function selectProduct()
    {

        //Selecting child Grid
        var gview = $("#KendoWebDataGrid3").data("kendoGrid");
        //Getting selected rows
        var rows = gview.select();

            //Selecting parent Grid
        var parentdatasource=$("#grid11").data("kendoGrid").dataSource;                         
        var parentData=parentdatasource.data();


            //Iterate through all selected rows
            rows.each(function (index, row) 
            {
                var selectedItem = gview.dataItem(row);
                var selItemJson={id: ''+selectedItem.id+'', Qty:''+selectedItem.Qty+'',Unit:''+selectedItem.Unit+'',StyleNumber:''+selectedItem.StyleNumber+'',Description:''+selectedItem.Description+''};


                //parentdatasource.insert(selItemJson);
            var productsGrid = $('#grid11').data('kendoGrid');
            var dataSource = productsGrid.dataSource;
            dataSource.add(selItemJson);
            dataSource.sync();



            });

        closeWindow();

    }

親グリッド:

 var data1=[];
    $("#grid11").kendoGrid({
            dataSource: {
                data:data1,

            schema: {
                    model: { id: "id" ,
                        fields: {

                                    Qty: { validation: { required: true } },
                                    Unit: { validation: { required: true } },
                                    StyleNumber: { validation: { required: true } },
                                    Description: { validation: { required: true } }
                                }
                          }
                     },
            pageSize: 5
        },
        pageable: true,
        height: 260,
        sortable: true,
        toolbar: [{name:"create",text:"Add"}],
        editable: "inline",
        columns: [

              {field: "Qty"},
              {field: "Unit"},
              {field: "StyleNumber"},
              {field: "Description"},
              { command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }]

    });
    $('#grid11').data().kendoGrid.bind("change", function(e) {
      $('#grid11').data().kendoGrid.refresh();
    });
    $('#grid11').data().kendoGrid.bind('edit',function(e){

      if(e.model.isNew()){
           e.container.find('.k-grid-update').click(function(){
              $('#grid11').data().kendoGrid.refresh();

           }),
           e.container.find('.k-grid-cancel').click(function(){
               $('#grid11').data().kendoGrid.refresh();

           })

        }

 })

親グリッドへのデータの追加はうまくいきますが、問題はありませんが、親グリッドを選択して編集する新しい行を追加すると、キャンセルボタンの行が削除されます。

私は問題を理解することができません.私を助けてください.

score 9 · Accepted Answer

エラーが見つかりました。お役に立てば幸いです。

dataSource: schema: モデルの「id」フィールドを構成しなかった場合、更新前に別の行で編集をクリックするか、キャンセルをクリックすると、その行が削除されます。

var dataSource = new kendo.data.DataSource({
        ...
        schema: {
            model: {
                id:"id", // Look here, if you did not config it, issue will happen
                fields: {...
                       ...}
            }
        }   

       ...
})

score 6 · Accepted Answer

私は同じ問題を抱えており、次のようにキャンセルを構成します。

...
cancel: function(e) {
           this.refresh();
      },
...

それが最善の方法だとは思いませんが、うまくいっています。

他の人が私たちにより良い方法を教えてくれることを願っています。

score 1 · Accepted Answer

保存した後、 $('#grid').data('kendoGrid').dataSource.read(); を呼び出します。

編集行をキャンセルし、変更を読み取ります。

score 0 · Accepted Answer

まだ直っていないようです。「preventDefault()」で対処しています。結果として、ウィンドウを明示的に閉じる必要がある場合があります。

    cancel: function (e) {
        // Not sure why this is needed but otherwise removes row...
        e.preventDefault();
        e.container.data("kendoWindow").close();
    },

score 0 · Accepted Answer

schema: {
    model: { id: "StyleNumber" // "Any ID Field from the Fields list" ,
        fields: {

            Qty: { validation: { required: true } },
            Unit: { validation: { required: true } },
            StyleNumber: { validation: { required: true } },
            Description: { validation: { required: true } }
        }
    }
}

これで問題は解決します。

kendo-ui - インライン剣道グリッドの更新をキャンセル 行を削除

5 に答える 5

Related

Reference

kendo-ui - インライン剣道グリッドの更新をキャンセル行を削除