kendo-ui - angular2 - kendo grid component

¿Cómo formatear condicionalmente una fila de Cuadrícula de UI de Kendo dentro de una tira de pestañas?

Question

Soy bastante nuevo en Kendo UI.

Estoy intentando colorear condicionalmente las filas dentro de una grilla de la interfaz de usuario de Kendo usando la sintaxis de Razor. La cuadrícula está contenida dentro de una Tabstrip de IU de Kendo. Aquí está el código que he escrito:

@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(items =>
{
items.Add().Text("Books")
.Selected(true)
.Content(
@<text>@(Html.Kendo().Grid((IEnumerable<Library.Models.Books>)ViewBag.Books)
.Name("grid2")
.Columns(columns =>
{
columns.Bound(books => books.BookID);
columns.Bound(books => books.BookName);
})
.ClientRowTemplate(
"<tr class= ''red'' data-uid=''#= uid #''>" +
"<td>#: BookID #</td>" +
"<td>#: BookName #</td>" +
"</tr>")
.Pageable()
.Sortable()
)
</text>
);
}))

Aunque, por el momento, no estoy buscando valores particulares, me gustaría colorearlo en función de alguna condición, pero incluso esta simple tarea de colorear fila en color rojo no funciona. ¿Algunas ideas?

Answer 1

Estoy respondiendo mi propia pregunta para cualquier búsqueda futura sobre el mismo tema.

Resultó ser que el problema era que el enlace actual de la cuadrícula era vinculante para el servidor, y ClientRowTemplate () solo se aplica cuando se usa el enlace Ajax, por lo tanto, no se aplicaba en absoluto. Cambió la fuente de datos a Ajax y funcionó como un amuleto.

Terminé abriendo un ticket de soporte con Telerik y lo siguiente fue la respuesta que obtuve:

... Con respecto a la plantilla de fila, el método ClientRowTemplate () solo se aplica cuando se utiliza el enlace Ajax, por lo que en el caso actual no se aplicó a la cuadrícula. ...

Aquí está mi código ahora con una fila condicionalmente formateada:

@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(items =>
{
items.Add().Text("Books")
.Selected(true)
.Content(@<text>@(Html.Kendo().Grid((IEnumerable<Library.Models.Books>)ViewBag.Books)
.Name("grid2")
.Columns(columns =>
{
columns.Bound(books => books.BookID);
columns.Bound(books => books.BookName);
})
.ClientRowTemplate(
"<tr data-uid=''#= uid #''>"+
"<td class=''#= BookID == 1 ? /"red/" : BookID == 2 ? /"orange/" : BookID == 3 ? /"yellow/" : /"green/" #'' style=/"text-align:center;/">#: BookID #</td>" +
"<td>#: BookName #</td>" +
"</tr>"
)
.Pageable()
.Sortable()
.DataSource(datasource => datasource
.Ajax()
.PageSize(20)
.ServerOperation(false)
)
)
</text>
);
}))

Para cambiar el enlace del enlace del servidor a Ajax, simplemente agregue lo siguiente a la grilla:

.DataSource(datasource => datasource
.Ajax()
.PageSize(20)
.ServerOperation(false)
)

Lo que buscaba era dar formato condicional a varias filas / celdas, según el valor de BookID. Terminó aplicando el formato condicional (aplicando varias clases) a una etiqueta ''td''. Lo mismo se puede aplicar a una etiqueta ''tr'', si toda la fila necesita formatearse condicionalmente en lugar de una celda. es decir

.ClientRowTemplate("<tr class=''#= BookID == 1 ? /"red/" : BookID == 2 ? /"orange/" : BookID == 3 ? /"yellow/" : /"green/" #'' data-uid=''#= uid #''>"+
"<td>#: BookID #</td>" +
"<td>#: BookName #</td>" +
"</tr>"
)