Des boutons Radio à l'intérieur de Kendo de la grille

Dans mon Kendo Grille j'ai besoin de trois boutons radio relié à ma source de données et inCell modifiable. Le problème, c'est l'éditeur. Quand je clique dans une colonne (et j'ai créé un div mur à force d'appeler l'éditeur), la valeur n'est pas correctement définie pour l'éditeur. Lorsque je clique sur une autre ligne et de colonne différent de la valeur n'est pas enregistrée. Et si je clique sur une autre ligne pour une même colonne, le nom de groupe de boutons radio) n'est pas correctement définie (éditeur de deux lignes avec le même nom). Est-il un moyen de l'éditeur de se comporter correctement?

J'ai la grille suivante définie à l'aide de JavaScript:

EDIT 1: j'ai ajouté quelques sauts de lignes dans le modèle et l'éditeur pour une meilleure lisibilité, mais ils ne devraient pas exister dans le code.

EDIT 2: correction d'une erreur dans la balise d'entrée de validation.

<html>
<!-- head code -->
<body>
<div id="grid"></div>
<script>
$(document).ready(function() {
var grid = $("grid").kendoGrid({
dataSource: [{
id: 1, name: "John", period: "F"
}, {
id: 2, name: "Mary", period: "S"
}],
editable: true,
columns: [{
field: "name",
title: "First Name"
}, {
field: "period",
title: "Period",
template:  '<div style="position:relative">
<input type="radio" name="group#: id#" value="F" #= period=="F" ? checked="checked" : "" # />First
<input type="radio" name="group#: id#" value="S" #= period=="S" ? checked="checked" : "" # />Second
<input type="radio" name="group#: id#" value="T" #= period=="T" ? checked="checked" : "" # />Third
<div style="background-color: rgba(255, 0, 0, 0.5); position: absolute; top: 0; left: 0; right: 0; bottom: 0"></div>
</div>',
editor: '<input type="radio" name="group#: id#Editor" value="F" #= period=="F" ? checked="checked" : "" # />First
<input type="radio" name="group#: id#Editor" value="S" #= period=="S" ? checked="checked" : "" # />Second
<input type="radio" name="group#: id#Editor" value="T" #= period=="S" ? checked="checked" : "" # />Third'
}]
});
}
</script>
</body>
</html>
InformationsquelleAutor Marlos | 2014-04-22
  1. 4

    Vous pouvez essayer en utilisant MVVM dans votre éditeur de modèle pour lier le champ de la période de la mesure actuellement sélectionnée bouton radio. 

    $("#grid").kendoGrid({   dataSource: [{
id: 1, name: "John", period: "F"   }, {
id: 2, name: "Mary", period: "S"   }],   editable: true,   columns: [{
field: "name",
title: "First Name"   }, {
field: "period",
template: "<label>First<input disabled type='radio' value='#: period #' #= period== 'F' ? 'checked' : ''# >" +
"<label>Second<input disabled type='radio' value='#: period #' #= period== 'S' ? 'checked' : ''# >"
,
editor: "<label>First<input name='period' type='radio' data-bind='checked:period' value='F'>" +
"<label>Second<input name='period' type='radio' data-bind='checked:period' value='S'>"
,
title: "Period"   }] 
});

    Voici une démonstration en direct: http://trykendoui.telerik.com/@korchev/ahaX

    • Il a travaillé. Merci!
    InformationsquelleAutor Atanas Korchev