Ajout d'une colonne de case à cocher pouvant être liée à la grille
Avoir cette colonne dans une grille de Kendo qui affiche actuellement une valeur booléenne MySQL afin que nous ayons 1 ou 0.
Fait cette démo pour jouer sur ...
Ceci dans une grille autosync et inline: true.
Je voudrais que cette colonne soit de type "Checkbox" mais, pour des raisons étranges, je ne trouve pas de démonstration ni d’exemple sur le Web qui affiche la case "activé" qui change de 1 à 0 s’il est décoché et vice-versa.
Il y a quelques considérations précédentes:
- Lorsque vous cliquez dans une cellule pour la modifier, vous passez en mode édition, puis la fonction d'édition est exécutée.
- Si vous êtes pas en mode édition malgré le code HTML utilisé, les modifications ne sont pas transférées dans le modèle.
- Kendo UI rend
booleansous forme de cases à cocher pour l'édition, mais pas en mode édition.
Ce que vous devez faire c'est:
- Définir un modèle pour afficher une case à cocher.
- Si vous ne souhaitez pas cliquer deux fois sur la case à cocher (la première à entrer en mode édition et la seconde à en changer la valeur), vous devez définir une case à cocher mais lier un événement de modification qui intercepte les clics et modifie 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 constater, je ne définis pas de fonction d’éditeur car nous allons changer la valeur de la case à cocher sans entrer en mode d’édition.
Définissez un gestionnaire qui détecte les modifications dans la case à cocher que j'ai définie dans le modèle et met à 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 a été modifié ici: http://jsbin.com/ebadaj/12/edit
J'ai eu le même problème avec ma grille de traitement par lots . Les solutions que j'ai trouvées n'étaient que 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);
Vous pouvez donc l'utiliser pour toutes les colonnes de cases à cocher.
Le problème suivant était l'indicateur "dirty" qui n'est pas défini correctement lorsque l'option "One Click Edit" de la case à cocher est utilisée.
J'ai donc testé diverses choses pour le faire fonctionner et en finir avec ceci:
Dans la définition de la colonne:
.ClientTemplate("<input type='checkbox' #= CheckboxColumn? checked='checked': checked='' # class='chkbx' />");
Et 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. Le Kendo utilise des thèmes, de sorte que l'utilisation du "look-checkbox-look" standard (différent dans chaque navigateur) n'est pas très 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>