Kendo police de changement de couleur dans la grille

Est-il possible de changer la police la couleur de Kendo grille par certaines condition?
J'espère obtenir des données qui peuvent être reconnus par jquery comme:

if($("div td:contains('Online')")) {
         $("div :contains('Online')").css( "font-color", "Red" );
}

J'ai données dans la base de données pour voir qui est en ligne/hors ligne, mais les deux mots sont un peu similaire, donc j'espère que je peux changer le texte "en Ligne" de rouge. Je peux afficher les données avec succès, mais je n'ai pas d'autre balise(id ou le nom, etc.) pour faire différentes les unes des données....

Est le seul moyen que j'ai à faire est de laisser chaque ligne ont des id ou des tags?
Puis-je utiliser le .contains pour trouver l'objet et changer la couleur?

Mon code html tout simplement:

<body>
<div id="grid"></div>
<script>
    $(function() {
        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: "data/userState.php"
                },
                error: function(e) {
                    alert(e.responseText);
                },
                schema: {
                    data: "results",
                    total: "Count"
                },
                pageSize: 10
            },
            columns: [{ field: "userAcc", title: "Account" },{ field: "state", title: "State" }],
            pageable: {
                refresh: true,
                pageSizes: true
            },
            height: 430,
            resizable: true
        });
        if($("#grid td:contains('Online')")) {
            $("#grid td:contains('Online')").css( "font-color", "Red" );
        }
    });

</script>
</div>
</body>

pouvez-vous partager les dom qui est généré

OriginalL'auteur Shuinvy | 2013-12-10

Se débarrasser de la if déclaration et l'utilisation d'un colonne modèle à la place. Vous pouvez placer la valeur dans une plage, et à condition de définir sa classe pour afficher le texte en rouge en fonction de vos critères.

Voici un exemple:

$("#grid").kendoGrid({
    //...
    columns: [
        { field: "userAcc", title: "Account" },
        {
            field: "state",
            title: "State",
            template: "<span class='#if(state === \'Online\') {# red #}#'></span>"
        }
    ]
    //...
});

..et votre classe CSS...

.red {
    color: red;
}

Wow, plus clair, merci beaucoup!
Pas de problème! Heureux de vous aider. 🙂

OriginalL'auteur Kevin Babcock

Désolé, j'ai trouvé ma réponse.
Qui est, je dois utiliser un modèle( je ne suis pas familier avec elle).
Et il suffit d'utiliser le modèle en tant que:

<div id="grid"></div>
<script>
    $(function() {
        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: "data/userState.php"
                },
                error: function(e) {
                    alert(e.responseText);
                },
                schema: {
                    data: "results",
                    total: "Count"
                },
                pageSize: 10
            },
            columns: [{ field: "userAcc", title: "Account" },{ field: "state", title: "State", template: '#=SetColor(state)#' }],
            pageable: {
                refresh: true,
                pageSizes: true
            },
            height: 430,
            resizable: true
        });
    });
    function SetColor(state)
        {
            if(state=="Online")
                return "<font color=\"red\">"+state+"</font>";
            else
                return state;
        }
</script>
</div>

Utiliser un modèle de ce champ que vous souhaitez modifier, et de renvoyer le texte à être décoré, et je vous promets que les gens veulent faire de différent de la note ou des données comme des moins de 60 ans peuvent utiliser la méthode, trop!

Le <font> balise n'est plus pris en charge de HTML5. Utiliser CSS pour le style, la couleur du texte à la place.
Bon, je l'ai appris, et je vais le changer!

OriginalL'auteur Shuinvy

0

Supplémentaires info pour la version 2014.1.528

Aller Simple.

Tout ce que vous devez faire est d'ajouter un attribut de style de la classe appropriée

Pour une grille, ajouter un style:
```
.k-grid .text-box {
    color: black !important;
}
```
OriginalL'auteur Robert Achmann

Juste utiliser des styles simples.

du texte dans la grille de données

.k-grid table {
    font-weight: bold !important;
}

pour le texte d'en-tête

.k-filter-row th, .k-grid-header th.k-header{
    font-weight: bold !important;
}

OriginalL'auteur Anurada Bandara

Vous devez vous connecter pour publier un commentaire.