Dans un kendo grille, puis-je définir des attributs de colonne de façon dynamique avec une fonction?

J'ai un peu de code ici, où je suis en train de mettre une couleur de fond d'une cellule basée sur la valeur de l'élément de données: http://dojo.telerik.com/@solidus-flux/eHaMu

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
</head>
<body>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    title: "Name",
    attributes: function(e) {
      return {
        "class": "table-cell",
        style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
      };
    }
    //attributes: {
      //"class": "table-cell",
      //style: "text-align: right; font-size: 14px"
    //}
  } ],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
</script>
</body>
</html>

Je me rends compte que je pouvais le faire avec un modèle, mais qui aurait besoin d'un élément html, puisque vous ne pouvez pas modifier le balisage de la td. Je voudrais utiliser une fonction pour renvoyer les attributs si c'est pris en charge.

OriginalL'auteur Chris | 2015-02-28

Vous avez dit que vous ne souhaitez pas utiliser les templates, mais je pense que vous parliez de modèles de colonne.

Vous pouvez modifier le balisage de la td, même en utilisant une ligne de modèle:

<script id="template" type="text/x-kendo-template">
    <tr data-uid="#= uid #">
      # this.columns.forEach(function(col) { 
          var val = data[col.field],
          css,
          style = ''
          cClasses = ''; 
          if (typeof col.attributes === 'function') {
              css = col.attributes(data); 
              cClasses = css["class"];
              style = css.style
          } 
      #         
          <td class='#= cClasses #' style='#= style #'>
            #= data[col.field] #
          </td>
      # }) #
    </tr>
</script>

De la boucle travailler, vous devez lier votre modèle de la grille:

var grid = $("#grid").kendoGrid({
    columns: [{
        field: "name",
        title: "Name",
        attributes: function (e) {
            return {
                "class": "table-cell",
                style: e.name == "Jane Doe" ? 
                       "background-color: red" : "background-color: green"
            };
        }
    }, {
        field: "title",
        title: "Title"
    }],
    dataSource: [{name: "Jane Doe", title: "Dr. Dr."}, 
                 {name: "John Doe", title: "Senior Citizen"}]
}).data("kendoGrid");

var template = kendo.template($("#template").html()).bind(grid);
grid.setOptions({
    rowTemplate: template
});

(démo)

Comme alternative, vous pouvez également créer des attributs comme ceci:

{
    field: "name",
    title: "Name",
    attributes: { 
        "class": "# if(data.name === 'Jane Doe') { # red # } else { # green # } #" 
    }
},

Cela aurait l'avantage de ne pas utiliser la ligne de modèle, mais vous auriez à utiliser le modèle de la syntaxe de la logique.

(démo)

Si les attributs de la propriété ne prend pas en charge les fonctions, alors cela me met aussi près que je vais l'avoir.
maintenant que vous le dites, vous pouvez utiliser les fonctions dans les attributs tant que vous n'avez pas l'esprit le modèle de délimiteurs (et d'avoir à l'écrire comme une chaîne de caractères)

OriginalL'auteur Lars Höppner

Veuillez essayer avec le code ci-dessous un extrait.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<style>
.greenBG {
background-color:green;
}
.redBG {
background-color:red;
}
</style>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
field: "name",
title: "Name",
attributes: function (e) {
return {
"class": "table-cell",
style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
};
}
}],
dataSource: [{ name: "Jane Doe" }, { name: "John Doe" }],
dataBound: function () {
dataView = this.dataSource.view();
for (var i = 0; i < dataView.length; i++) {
if (dataView[i].name === "Jane Doe") {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("greenBG");
}
else {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("redBG");
}
}
}
});
</script>
</body>
</html>

Je l'ai eu à travailler avec quelque chose de similaire:

$("td").each(function () {                     if ($(this).text() === "Jane Doe") {                         $(this).addClass("good");                     }                 });

mais j'espérais ne pas avoir une boucle. Juste un attribut en fonction.

OriginalL'auteur Jayesh Goyani

Angulaire de kendo de rappel e de ne pas travailler

Utiliser cette

attributes: {
"ng-confirm-message": "{{this.dataItem.is_active ? \'Are you sure deactive ?\' :  \'Are you sure active ?\'}}",
"confirmed-click": "vm.inlineSubmit(this.dataItem.toJSON() ,true)"
}

OriginalL'auteur Nishchit Dhanani

Pour Le Kendo-JQuery.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
field: "name",
headerAttributes: {
"class": "table-header-cell",
style: "text-align: right; font-size: 14px"
}
}]
});
</script>

Et ce Kendo-MVC

.Columns(columns =>
{
columns.Bound(c => c.ActiveReason).Title("ActiveReason").HeaderHtmlAttributes(new { @class = "table-header-cell" });
})

OriginalL'auteur MohammadSoori

Vous devez vous connecter pour publier un commentaire.