Wie verwende ich Kendo UI Grid mit Popup- und Inline-Modi?

Question

Ich benutze Kendo Grid mit benutzerdefinierten Popup-Vorlage.

Ich möchte die popup und inline Modi zusammen verwenden. Beim Hinzufügen neuer Datensätze sollte das Raster den Modus popup verwenden und meine benutzerdefinierte Vorlage öffnen. Bei der Bearbeitung sollte der Modus inline verwendet werden.

Ich habe this DEMO in this blog article, bezeichnet die zeigt, wie die popup und inline Modi zusammen verwenden, aber ich bin nicht in der Lage das Popup mit meiner benutzerdefinierten Vorlage zu machen.

Kann mir jemand bei der Lösung dieses Problems helfen?

Danke.

Hier ist my DEMO:

HTML:

<h3>How to use Kendo-ui Grid use popup with custom template while adding and Inline while editing records</h3> 
<div id="grid"></div> 
<script id="popup-editor" type="text/x-kendo-template"> 
    <h3>Edit Person</h3> 
    <p> 
    <label>Name:<input name="name" /></label> 
    </p> 
    <p> 
    <label>Age: <input data-role="numerictextbox" name="age" /></label> 
    </p> 
</script> 

JS:

var ds = { 
    data: createRandomData(20), 
    pageSize: 4, 
    schema: { 
     model: { 
      fields: { 
       Id: { type: 'number' }, 
       FirstName: { type: 'string' }, 
       LastName: { type: 'string' }, 
       City: { type: 'string' } 
      } 
     } 
    } 
}; 

var grid = $("#grid").kendoGrid({ 
    dataSource: ds, 
    toolbar: [ { text : "Add new record", name: "create", iconClass: "k-icon k-add"} ], 
    // editable: "inline", 
    editable: { 
     mode: "popup", 
     template: kendo.template($("#popup-editor").html()) 
    }, 
    pageable: true, 
    columns: [ 
     { field: "FirstName", width: 100, title: "First Name" }, 
     { field: "LastName", width: 100, title: "Last Name" }, 
     { field: "City", width: 100 }, 
     { command: [ "edit" ]} 
    ] 
}).data("kendoGrid"); 

Answer 1

ich Ihre bearbeitet haben und diese neue DEMO erstellt.

Sie Kendo Grids setOptions Methode können dynamisch den Bearbeitungsmodus mit Ihrem custom template wie unten Popup entlang ändern:

$(".k-grid-popup", grid.element).on("click", function() { 
    // change grid editable mode to popup and set the popup editing template 
    grid.setOptions({ 
     editable: { 
      mode: "popup", 
      template: kendo.template($("#popup-editor").html()) 
     } 
    }); 

    grid.addRow(); 
    grid.options.editable = "inline"; 
});