2013-07-09 1 views
13

cancellare ho sviluppato un'applicazione web utilizzando strumenti kendo ui e c'è una griglia di kendo con lotto modalità di modifica ..kendo griglia di comando non funziona

ma quando si preme il tasto di cancellazione per qualsiasi record nel kendo grid verranno cancellati dalla lista in griglia, ma in realtà non è nei dati source.when i ricaricare la pagina o griglia l'elemento eliminato esisteranno ancora ..

ecco il codice della mia griglia

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

non è in grado di identificare la causa del problema e qualcuno può aiutarmi a risolvere questo problema.

+0

Hai controllato se hai qualche errore nella console del browser? – OnaBai

+0

cosa intendi ?? – sanzy

+0

Usi Firebug o simile? Mostra eventuali errori durante l'esecuzione del javascript. Ho provato il tuo codice e ha funzionato, ma ovviamente ho apportato alcune modifiche poiché non ho tutto il tuo progetto. – OnaBai

risposta

32

Ci sono tre motivi comuni cancellare non funzionerà:


1. Non impostando editable di griglia-inline o popup. Gli articoli eliminati verranno elaborati automaticamente tramite il trasporto distruggibile solo per le modalità di modifica "inline"/"popup". Es:

editable: { 
    mode: "inline", 
} 
//or 
editable: "inline" 


2. Se sul tuo origine dati, si ha la bandiera batch impostato true, questo significa l'origine dati renderà la chiamata solo dopo gli si dice di, ad esempio chiamando sync(). Es:

var dataSource = new kendo.data.DataSource({ 
    batch: true, 
    //..... 
}); 
//... in some where e.g in a save button click event call the following line: 
dataSource.sync(); 


3. È necessario definire id alla vostra chiave primaria del database nome campo all'interno model di origine dati. Es:

model: { 
     id: "ProductID", 
     fields: { 
      ProductID: { editable: false, nullable: true }, 
     } 
    } 


Quindi il problema con il vostro codice è primo, cioè non è stata impostata editable- inline o popup

0

Hmm prova a non includere type: "POST", e vedere se ora funziona, poiché per quanto posso vedere quel bit non è incluso nella demo e non credo di averlo incluso quando ho fatto le modifiche/eliminazioni inline.

0

avevo messo un nome arbitray per un int sul server Elimina metodo.

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

L'impostazione predefinita modelbinder era probabilmente alla ricerca di una proprietà chiamata Id (lo stesso come la chiave primaria del mio tipo a seconda della configurazione del modello).

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

In realtà, ho dimostrato questo cambiando la firma al seguente:

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

mio punto di rottura è stato colpito dopo.

In definitiva, ho usato il tipo completo come parametro, come mostrato negli esempi di Kendo, perché non volevo avere nomi di parametri con nomi scarsi (non caso di cammello) nell'azione. Indicato come segue:

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

Questa sembra essere la ragione per cui non funzionava.

0

Ho avuto lo stesso problema. Il mio problema è stato causato dall'avere una proprietà data nel modello di kendo. Esempio:

{id: 1, data: ""} 
2

Se si sceglie di non includere editable.mode al fine di utilizzare la modifica nelle celle, è possibile impostare la toolbar della griglia per includere l'opzione save:

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

Questo creerà un pulsante save nella barra degli strumenti della griglia. Dopo aver eliminato tutti i record facendo clic sul pulsante di comando destroy, fare clic sul pulsante save per fare in modo che la griglia effettui una chiamata Ajax al server per eliminare il record.

Se invece volete eliminare il record automaticamente senza includere il pulsante save, si potrebbe aggiungere un gestore change evento al datasource della griglia:

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

Ciò sincronizzare automaticamente le modifiche apportate alla griglia con il server quando c'è un cambio di dati.