Rank 1
Iron
Hello.
I'm trying to put different color text (and style) on TreeView node item.
I just found that this is archieved with SpriteCssClass property on TreeViewItemModel class but it seems that It is not working.
My view:
<h2>Index</h2>
<script>
kendo.culture("es-ES"); //week start day depends on the used kendo culture
</script>
@section Menu {
<h4>Departamento</h4>
@(
Html.Kendo().TreeView()
.Name("left-menu")
.BindTo((IEnumerable<TreeViewItemModel>)ViewBag.depts)
.DataSpriteCssClassField("SpriteCssClass")
.Events(ev => ev
.Select("onSelect")
)
)
}
My CSS file:
/* Treeview Departamentos */
.deptRoot {
color: dodgerblue;
font-weight: bold;
}
.deptSub {
color: cadetblue;
font-weight: bold;
}
.empSup {
color:indianred;
font-weight: normal;
}
.empleado {
color: white;
font-weight: normal;
}
This is my JSON Tree data passed by ViewBag.depts var:
[
{
"Enabled": true,
"Expanded": false,
"Encoded": true,
"Selected": false,
"Text": "Informática",
"SpriteCssClass": "deptRoot",
"Id": "1#48",
"Url": null,
"ImageUrl": null,
"HasChildren": true,
"Checked": false,
"Items": [
{
"Enabled": true,
"Expanded": false,
"Encoded": true,
"Selected": false,
"Text": "Soporte",
"SpriteCssClass": "deptSub",
"Id": "2#1001",
"Url": null,
"ImageUrl": null,
"HasChildren": true,
"Checked": false,
"Items": [
{
"Enabled": true,
"Expanded": false,
"Encoded": true,
"Selected": false,
"Text": "RAUL MORENO RAMIREZ",
"SpriteCssClass": "empSup",
"Id": "3#221",
"Url": null,
"ImageUrl": null,
"HasChildren": true,
"Checked": false,
"Items": [
{
"Enabled": true,
"Expanded": false,
"Encoded": true,
"Selected": false,
"Text": "BRIAN SALAZAR MUÑOZ",
"SpriteCssClass": "empleado",
"Id": "4#585",
"Url": null,
"ImageUrl": null,
"HasChildren": false,
"Checked": false,
"Items": [
],
"HtmlAttributes": {
},
"ImageHtmlAttributes": {
},
"LinkHtmlAttributes": {
}
}
],
"HtmlAttributes": {
},
"ImageHtmlAttributes": {
},
"LinkHtmlAttributes": {
}
}
],
"HtmlAttributes": {
},
"ImageHtmlAttributes": {
},
"LinkHtmlAttributes": {
}
},
{
"Enabled": true,
"Expanded": false,
"Encoded": true,
"Selected": false,
"Text": "Desarrollo",
"SpriteCssClass": "deptSub",
"Id": "2#1002",
"Url": null,
"ImageUrl": null,
"HasChildren": true,
"Checked": false,
"Items": [
{
"Enabled": true,
"Expanded": false,
"Encoded": true,
"Selected": false,
"Text": "GUILLEM ALBERT JULVE SEGOVIA",
"SpriteCssClass": "empSup",
"Id": "3#292",
"Url": null,
"ImageUrl": null,
"HasChildren": false,
"Checked": false,
"Items": [
],
"HtmlAttributes": {
},
"ImageHtmlAttributes": {
},
"LinkHtmlAttributes": {
}
}
],
"HtmlAttributes": {
},
"ImageHtmlAttributes": {
},
"LinkHtmlAttributes": {
}
},
{
"Enabled": true,
"Expanded": false,
"Encoded": true,
"Selected": false,
"Text": "MTRANS",
"SpriteCssClass": "deptSub",
"Id": "2#1003",
"Url": null,
"ImageUrl": null,
"HasChildren": true,
"Checked": false,
"Items": [
{
"Enabled": true,
"Expanded": false,
"Encoded": true,
"Selected": false,
"Text": "CARLOS LUNA PACHECO",
"SpriteCssClass": "empSup",
"Id": "3#40",
"Url": null,
"ImageUrl": null,
"HasChildren": true,
"Checked": false,
"Items": [
{
"Enabled": true,
"Expanded": false,
"Encoded": true,
"Selected": false,
"Text": "ALBERT FERRANDIZ ISERTE",
"SpriteCssClass": "empleado",
"Id": "4#576",
"Url": null,
"ImageUrl": null,
"HasChildren": false,
"Checked": false,
"Items": [
],
"HtmlAttributes": {
},
"ImageHtmlAttributes": {
},
"LinkHtmlAttributes": {
}
}
],
"HtmlAttributes": {
},
"ImageHtmlAttributes": {
},
"LinkHtmlAttributes": {
}
}
],
"HtmlAttributes": {
},
"ImageHtmlAttributes": {
},
"LinkHtmlAttributes": {
}
}
],
"HtmlAttributes": {
},
"ImageHtmlAttributes": {
},
"LinkHtmlAttributes": {
}
}
]
All items have the same text color. Where is the mistake?
Thx in advance for who resolve this ;)
KR
2 Answers, 1 is accepted
Hello Guillem Albert,
Using the DataSpriteCssClassField configuration of the TreeView, you are defining the sprite/icon that will appear in front of the node's text. To be able to change the color of a node's text, you will have to use the Template configuration as is demonstrated below.
@(Html.Kendo().TreeView()
.Name("treeview")
.TemplateId("treeview-template")
.BindTo((IEnumerable<TreeViewItemModel>)ViewBag.depts)
)
)Having the above, you can define the treeview-template as follows:
<script id="treeview-template" type="text/kendo-ui-template">
<span class="#:item.spriteCssClass #"> #: item.text # </span>
# if (!item.items) { #
<span class='k-icon k-i-close'></span>
# } #
</script>The code in yellow shows how you can add the class defined in the nodes' properties to the nodes' text.
I hope the above will help you implement what you need.
Regards,
Petar
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
It works like a charms.
You save my day.
KR