Annullare l'aggiornamento nella griglia di kendo inline cancellare la riga

Question

Sto usando due parent e child grid in linea di kendo. la griglia figlio contiene l'elenco dei prodotti, quando l'utente seleziona i prodotti (selezione multipla) dalla griglia figlio e fa clic sul pulsante Salva, viene inserito in una griglia padre.

griglia bambino:

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: " ", 
     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"); 
    }); 

pulsante Salva cliccato Evento

 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(); 

    } 

Parent Griglia:

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: " ", 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(); 

      }) 

     } 

}) 

Addin i dati di g nella rete di genitori funzionano bene, nessun problema, ma quando seleziono la griglia principale aggiungere una nuova riga da modificare, quindi attivare la riga del pulsante Annulla è stata eliminata.

Non riesco a capire il problema. Per favore aiutatemi.

Answer 1

Ho lo stesso problema, e mi config cancellare come:

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

Io non credo che sia il modo migliore, ma si sta lavorando.

Spero che un'altra persona possa darci un modo migliore.

Answer 2

Ho trovato l'errore, la speranza può aiutarti.

Se non si configura il dataSource: schema: campo "id" del modello, quando si fa clic su modifica in un'altra riga prima dell'aggiornamento o si fa clic su Annulla, verrà eliminata la riga.

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

     ... 
}) 

Answer 3

dopo aver salvato io chiamo $ ('# grid') dei dati ('kendoGrid') dataSource.read()..;

che annulla la riga di modifica e legge eventuali modifiche.

Answer 4

Ancora non sembra essere risolto. Lo sto indirizzando con 'preventDefault()'. Ciò potrebbe richiedere la chiusura esplicita della finestra di conseguenza.

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

Answer 5

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 } } 
     } 
    } 
} 

questo risolverà il vostro problema.