2013-04-24 29 views
9

Volevo aggiungere una colonna di controllo come prima colonna al di sotto della griglia. Qualcuno può aiutarmi come aggiungerlo?Colonna Checkbox con griglia Kendo

@(Html.Kendo().Grid(Model) 
     .Name("items") 
     .Columns(columns => 
     { 
      columns.Bound(p => p.itemname).Title("Name"); 
      columns.Bound(p => p.cost).Title("Cost"); 
      columns.Bound(p => p.stockinhand).Title("Stock in hand"); 
      columns.Command(command => command.Destroy()).Width(100); 
     }) 
    .Pageable() 
      .DataSource(dataSource => dataSource 
       .Server() 
       .Model(model => model.Id(p=>p.Id)) 
       .Destroy(update => update.Action("EditingInline_Destroy", "Grid")) 
      ) 
) 

risposta

17

Ecco come ho fatto:

columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= IsAdmin ? checked='checked':'' # class='chkbx' />") 

e poi su javascript:

$(function() { 
    $('#grid').on('click', '.chkbx', function() { 
     var checked = $(this).is(':checked'); 
     var grid = $('#grid').data().kendoGrid; 
     var dataItem = grid.dataItem($(this).closest('tr')); 
     dataItem.set('IsAdmin', checked); 
    }) 
}) 
+2

Utilizzando una griglia con modalità InLine Edit, come disattivare questa casella di controllo finché la linea non entra in modalità di modifica? –

+0

Come aggiungere un'etichetta dati? Ho provato con ==> columns.Template (@) .ClientTemplate ("

columns.Bound(p => p.Status).HeaderTemplate("<input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked);' />").ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this); ' class='chkbxq' type='checkbox' />").Sortable(false).Filterable(false).Width(30); 

E la casella di controllo Inserisci come di seguito:

//Cell click Checkbox select 
$('#Grid').on("click", "td", function (e) { 
    var selectedTd = $(e.target).closest("td"); 
     var grdChkBox = selectedTd.parents('tr').find("td:first").next("td").find('input:checkbox'); 
     grdChkBox.prop('checked', !grdChkBox.prop('checked')); 

}); 

E fare controllare tutte le funzionalità di casella di controllo come di seguito:

function ToggleChkBox(flag) { 
    $('.chkbxq').each(function() { 
     $(this).attr('checked', flag); 
    }); 
} 
3

Io di solito aggiungere una colonna booleana nel modello; come seguire

@(Html.Kendo().Grid(Model) 
    .Name("items") 
    .Columns(columns => 
    { 
     columns.Bound(p => p.status).ClientTemplate("<input type='checkbox' disabled #= status == true ? checked='checked' : '' # />"); 
     columns.Bound(p => p.itemname).Title("Name"); 
     columns.Bound(p => p.cost).Title("Cost"); 
     columns.Bound(p => p.stockinhand).Title("Stock in hand"); 
     columns.Command(command => command.Destroy()).Width(100); 
    }) 
.Pageable() 
     .DataSource(dataSource => dataSource 
      .Server() 
      .Model(model => model.Id(p=>p.Id)) 
      .Destroy(update => update.Action("EditingInline_Destroy", "Grid")) 
     ) 
) 

E per disattivarla fino a quando si preme il pulsante "Modifica" basta aggiungere "disabile" nel ClientTemplate. Questo dovrebbe farlo. Grazie.

Problemi correlati