So generieren Sie Daten im Textfeld Erstellen von Daten in der Gridline Grid Kendo UI

Question

Ich möchte Daten aus GridLine einfügen. Ich habe 3 Spalten (Code, ExpDate, Status). Im Codefeld möchte ich ein Wort erzeugen, das aus einem zufälligen Zeichen und einer Zahl besteht. Und der bearbeitbare Gutscheincode ist deaktiviert. Und im Status wird nur gültige Bedingung haben. Und ich möchte es in Grid Kendo UI machen. Hilfe ich weiß nicht, wie es geht.

Ich verwende diesen Code aus meiner Sicht. Hilf mir, es zu machen. Vielen Dank.

Ansicht

<div class="tables"> 
    <div class="table-responsive bs-example widget-shadow"> 
     <h4>Data Propinsi:</h4> 
      @(Html.Kendo().Grid<admission.Models.VoucherPreviewModel>() 
    .Name("grids") 
    .Columns(columns => 
    { 
     columns.Bound(p => p.id_voucher).Hidden(); 
     columns.Bound(p => p.voucherCode).Title("Kode Voucher"); 
     columns.Bound(p => p.expDate).Title("Tgl Exp").Format("{0: dd MMM yyyy - HH:mm WIB}"); 
     columns.Bound(p => p.status).Title("Status"); 
     columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250); 
    }) 
    .ToolBar(toolbar => toolbar.Create()) 
    .Editable(editable => editable.Mode(GridEditMode.InLine)) 
    .Pageable() 
    .Sortable() 
    .Filterable() 
    .HtmlAttributes(new { style = "height:570px;" }) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .PageSize(10) 
     .Events(events => events.Error("error_handler")) 
     .Model(model => model.Id(p => p.id_voucher)) 
     .Create(update => update.Action("voucher_Create", "Voucher")).Read("voucher_read", "Voucher") 
     .Update(update => update.Action("voucher_Update", "Voucher")).Read("voucher_read", "Voucher") 
     .Read(read => read.Action("voucher_read", "Voucher")) 
     .Destroy(update => update.Action("voucher_Delete", "Voucher")).Read("voucher_read", "Voucher") 
    ) 
) 
    </div> 
</div> 

<script type="text/javascript"> 
    function error_handler(e) {  
     if (e.errors) { 
      var message = "Errors:\n"; 
      $.each(e.errors, function (key, value) { 
       if ('errors' in value) { 
        $.each(value.errors, function() { 
         message += this + "\n"; 
        }); 
       } 
      });   
      alert(message); 
     } 
    } 
</script> 

Answer 1

Sie können eine Javascript-Funktion aufrufen, wenn das Add/edit Schaltfläche geklickt wird. In Javascript können Sie die Datenquelle so manipulieren, wie Sie möchten.

Offenbar können Sie die Zeile nicht bearbeiten, aber Sie können das HTML in dieser Zeile ersetzen. http://www.telerik.com/forums/making-individual-rows-read-only

Beispiel mit Ihrem Code:

<div class="tables"> 
    <div class="table-responsive bs-example widget-shadow"> 
     <h4>Data Propinsi:</h4> 
      @(Html.Kendo().Grid<admission.Models.VoucherPreviewModel>() 
    .Name("grids") 
    .Columns(columns => 
    { 
     columns.Bound(p => p.id_voucher).Hidden(); 
     columns.Bound(p => p.voucherCode).Title("Kode Voucher"); 
     columns.Bound(p => p.expDate).Title("Tgl Exp").Format("{0: dd MMM yyyy - HH:mm WIB}"); 
     columns.Bound(p => p.status).Title("Status"); 
     columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250); 
    }) 
    .ToolBar(toolbar => toolbar.Create()) 
    .Editable(editable => editable.Mode(GridEditMode.InLine)) 
    .Pageable() 
    .Sortable() 
    .Filterable() 
    .HtmlAttributes(new { style = "height:570px;" }) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .PageSize(10) 
     .Events(events => events.Error("error_handler")) 
     .Model(model => model.Id(p => p.id_voucher)) 
     .Create(update => update.Action("voucher_Create", "Voucher")).Read("voucher_read", "Voucher") 
     .Update(update => update.Action("voucher_Update", "Voucher")).Read("voucher_read", "Voucher") 
     .Read(read => read.Action("voucher_read", "Voucher")) 
     .Destroy(update => update.Action("voucher_Delete", "Voucher")).Read("voucher_read", "Voucher") 
    ) 
    .Events(events => events.Edit("onEdit")) 
) 
    </div> 
</div> 

<script type="text/javascript"> 
    function error_handler(e) {  
     if (e.errors) { 
      var message = "Errors:\n"; 
      $.each(e.errors, function (key, value) { 
      if ('errors' in value) { 
       $.each(value.errors, function() { 
        message += this + "\n"; 
        }); 
        } 
       });   
       alert(message); 
     } 
} 

function onEdit(event) { 
       event.model.voucherCode=makeid(); 
      } 

function makeid() { 
    var code = ""; 
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; 
    code = Math.random(1).toString().substring(3, 2); 
    code += possible.charAt(Math.floor(Math.random() * possible.length)); 
    return code; 
} 
    </script> 

Für die Herstellung der Reihe uneditable Teil folgen Sie den Faden i erwähnt.