如何在文本框中生成數據在網格線中創建數據網格Kendo UI

Question

我想從GridLine插入數據。我有3列（代碼，expDate，狀態）。在代碼字段中，我想生成一個由隨機字符和數字組成的單詞。優惠券代碼可編輯關閉。並且在狀態將只有有效的條件。我想在Grid Kendo UI中製作它。幫助我不知道該怎麼做。

我用在我看來，這個代碼。幫我定製它。謝謝。

查看

<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

你可以調用javascript函數被點擊添加/編輯按鈕時。在JavaScript中，您可以按照自己喜歡的方式操作數據源。

 .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")) 

**.Events(events => events.Edit("onEdit"))**  

in javascript: 

     function onEdit(event) { 
      var grid = $("#ActionsGrid").data("kendoGrid"); 
      var dataSource=grid.dataSource; 
      //do stuff here 
      event.model.voucherCode=Math.random();//http://www.w3schools.com/jsref/jsref_random.asp 
     //make row uneditable follow this thread: http://www.telerik.com/forums/making-individual-rows-read-only 
     } 

顯然，你不能讓該行不可編輯的，但你可以替換該行中的HTML。 http://www.telerik.com/forums/making-individual-rows-read-only

與示例代碼：

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

爲了使該行不可編輯的部分跟隨我提到的線程。