Kendo UI para download da versão de teste do jQuery R2 2020 SP1
Kendo UI fornece atualmente quatro controles: Kendo UI para jQuery , Kendo UI para Angular , Suporte Kendo UI para React e Suporte Kendo UI para Vue . Kendo UI para jQuery é a biblioteca de UI mais completa para a criação de aplicativos da web modernos.
Modelo de coluna
Kendo UI Grid apresenta linhas de tabela (tr) que representam itens de fonte de dados.
Para obter um exemplo prático, consulte:
- Demonstração sobre como usar o modelo de linha da grade
- Demonstração sobre o uso do modelo de linha de detalhes da grade
- Demonstração sobre o uso do template da barra de ferramentas do Grid
Cada linha da tabela contém uma célula da tabela (td) que representa a coluna Grid. Por padrão, a grade exibe o valor do código HTML do campo na coluna.
O exemplo a seguir mostra como personalizar a maneira como uma coluna exibe seu valor.
Definir modelo de coluna para string
O exemplo a seguir demonstra como definir o modelo como uma string e envolver os valores da coluna em HTML.
<div id = "grid"> </div>
<script>
$ ("# grid"). kendoGrid ({
colunas: [{
campo: "nome",
modelo: "<strong> #: nome # </strong> "
}],
fonte de dados: [{nome:" Jane Doe "}, {nome:" John Doe "}]
});
</script>
Defina o modelo de coluna como uma função
O exemplo a seguir mostra como definir o modelo para a função retornada por kendo.template.
<div id = "grid"> </div>
<script id = "name-template" type = "text / x-kendo-template">
<strong> #: name # </strong>
</script>
<script >
$ ("# grade"). kendoGrid ({
colunas: [{
campo: "nome",
modelo: kendo.template ($ ("# nome-modelo"). html ())
}],
fonte de dados: [{nome : "Jane Doe"}, {name: "John Doe"}]
});
</script>
O exemplo a seguir mostra como definir o modelo como uma função que retorna uma string.
<div id = "grid"> </div>
<script>
$ ("# grid"). kendoGrid ({
colunas: [{
campo: "nome",
modelo: função (dataItem) {
return "<strong>" + kendo.htmlEncode (dataItem.name) + "</strong>";
}
}],
dataSource: [{nome: "Jane Doe"}, {name: "John Doe"}]
});
</script>
Para obter as últimas notícias sobre o Kendo UI, siga o site chinês da Telerik!