Ajout d'une colonne de cases à cocher pouvant être reliée à la grille
avoir cette colonne dans une grille de Kendo qui affiche actuellement une valeur booléenne MySQL donc nous avons soit 1 ou 0.
Fait cette démo pour jouer sur...
dans un synchronisation et inline:true grille.
je voudrais que cette colonne soit de type "Checkbox" mais, pour des raisons étranges, Je ne peux pas trouver une démo ou un exemple sur le web qui affiche "enabled" checkbox qui change 1 à 0 lorsqu'il n'est pas vérifié et Vice-Versa.
3 réponses
Il y a quelques considérations précédentes:
- lorsque vous cliquez sur une cellule pour éditer, vous passez en mode édition et c'est alors que la fonction editor est exécutée.
- Si vous en mode édition malgré le HTML utilisé, les modifications ne sont pas transférées dans le modèle.
- Kendo UI render
booleancomme cases à cocher pour l'édition mais pas en mode édition.
Ce que vous devez faire est:
- définir un modèle pour afficher une case à cocher.
- si vous ne voulez pas cliquer deux fois sur la case à cocher (la première pour entrer en mode édition et la seconde pour changer sa valeur), vous devez définir une case à cocher mais lier un événement de changement qui intercepte les clics et changer le modèle.
définition du modèle:
{
title : "Fully Paid",
field : "fullyPaid",
template: "<input name='fullyPaid' class='ob-paid' type='checkbox' data-bind='checked: fullyPaid' #= fullyPaid ? checked='checked' : '' #/>"
}
comme vous pouvez le voir, Je ne définit pas une fonction d'éditeur car nous allons changer la valeur de la case à cocher sans entrer en mode d'édition.
définir un gestionnaire qui détecte les changements dans la case à cocher que j'ai définie dans le modèle et mettre à jour le modèle.
grid.tbody.on("change", ".ob-paid", function (e) {
var row = $(e.target).closest("tr");
var item = grid.dataItem(row);
item.set("fullyPaid", $(e.target).is(":checked") ? 1 : 0);
});
Votre JSBin modifié ici : http://jsbin.com/ebadaj/12/edit
j'ai eu le même problème avec mon lot édité grille. Les solutions que j'ai trouvées étaient seulement pour une colonne spécifique (comme la solution mentionnée ci-dessus). Alors, j'ai changé
item.set("fullyPaid", $(e.target).is(":checked") ? 1 : 0);
var col = $(this).closest('td');
dataItem.set(grid.columns[col.index()].field, checked);
donc vous pouvez l'utiliser pour toutes les colonnes de cases à cocher.
le problème suivant était le drapeau sale qui n'est pas réglé correctement en utilisant l'option "one click edit" de la case à cocher.
donc j'ai testé différentes choses pour que ça marche et j'ai fini avec ceci:
Dans la définition de la colonne:
.ClientTemplate("<input type='checkbox' #= CheckboxColumn? checked='checked': checked='' # class='chkbx' />");
Et le script ci-dessous:
<script>
$(function () {
$('#GridName').on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#GridName').data().kendoGrid;
grid.closeCell();
var dataItem = grid.dataItem($(this).closest('tr'));
var col = $(this).closest('td');
grid.editCell(col);
dataItem.set(grid.columns[col.index()].field, checked);
grid.closeCell(col);
});
});
</script>
exemple mis à jour pour 2018!!
avec des thèmes. Kendo utilise des thèmes si l'utilisation de la norme "browser-checkbox-look" (différent dans chaque navigateur) n'est pas si agréable.
https://dojo.telerik.com/IluJosiG/14
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function(options){
var data = [
{
include: true,
Amount: 20
},
{
include: true,
Amount: 30
},
{
include: false,
Amount: 0
}
];
options.success(data);
}
},
schema:{
model: {
fields: {
include: { type: 'boolean' },
Amount: { type: "number", },
}
}
}
},
columns: [
{
field: "include",
editor: function(container, options){
var grid = $(container).closest('[data-role=grid]').data('kendoGrid');
var row = grid.dataItem(container.closest('tr'));
//console.log('grid', grid);
console.log('row', row);
if(row.include){
row.set('include', false);
row.set('Amount', 0);
} else {
row.set('include', true);
row.set('Amount', 1);
}
grid.closeCell();
},
template: function(items){
var guid = kendo.guid();
var checked = ''; // = ' disabled="disabled" ';
if(items.include){
checked = ' checked="checked" ';
}
return '<input class="k-checkbox" id="' + guid + '" type="checkbox" ' + checked + ' />' +
'<label class="k-checkbox-label" for="' + guid + '">​</label>';
},
attributes:{ align:"center" },
headerAttributes: { 'class': 'k-header-centeralign' }
},
{
field: "Amount",
format: "{0:n6}",
editor: function(container, options){
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
decimals: 6,
min: 0,
restrictDecimals: true // Specifies whether the decimals length should be restricted during typing. The length of the fraction is defined by the decimals value
}
);
}
}
],
editable: true,
save: function(e){
console.log('save', e);
var model = e.model;
console.log('save model', model);
var items = this.dataSource.data();
var item = $.grep(items, function(e){ return e.uid == model.uid; })[0];
//console.log('item uid', items);
var userAmount = e.values.Amount;
if(userAmount>0){
item.set('include', true);
console.log('set include true');
} else {
item.set('include', false);
console.log('set include false');
}
// redraw row for checkbox
// timeout because qty is not updated before
var grid = e.sender;
setTimeout(function(){
var row = grid.element.find('tr[data-uid=' + model.uid + ']');
console.log('redraw row for checkbox', row);
kendoFastReDrawRow(grid, row);
},0);
},
dataBound: function(e){
console.log('dataBound');
},
});
});
function kendoFastReDrawRow(grid, row) {
var dataItem = grid.dataItem(row);
var rowChildren = $(row).children('td[role="gridcell"]');
for (var i = 0; i < grid.columns.length; i++) {
var column = grid.columns[i];
var template = column.template;
var cell = rowChildren.eq(i);
if (template !== undefined) {
var kendoTemplate = kendo.template(template);
// Render using template
cell.html(kendoTemplate(dataItem));
} else {
var fieldValue = dataItem[column.field];
var format = column.format;
var values = column.values;
if (values !== undefined && values != null) {
// use the text value mappings (for enums)
for (var j = 0; j < values.length; j++) {
var value = values[j];
if (value.value == fieldValue) {
cell.html(value.text);
break;
}
}
} else if (format !== undefined) {
// use the format
cell.html(kendo.format(format, fieldValue));
} else {
// Just dump the plain old value
cell.html(fieldValue);
}
}
}
}td[role=gridcell] .k-checkbox + label.k-checkbox-label {
cursor: pointer !important;
}<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<div id="example">
<div id="grid"></div>
</div>