Saudações a todos,
Estou novamente presente no portal DevMedia e desta vez para falar do controle DataList. Em uma série de artigos vou mostrar o que tem de melhor neste controle que não pode faltar em suas páginas .NET. Acompanhe os artigos e boas práticas.
DataList - Visão Geral
O controle de DataList é fortemente usado para a exibição de dados em uma lista repetida, como por exemplo uma tabela com a lista de produtos mais vendidos ou ainda com os produtos em destaque. Este controle suporta ainda selecionar e editar seus registros. O conteúdo e a disposição dos registros na lista em um controle DataList são definidos usando Templates. No mínimo, cada DataList deve definir um ItemTemplate, entretanto, diversos Templates opcionais podem ser usados customizando ainda mais a aparência da lista.
A tabela 1 descreve os Templates existentes para este controle.
|
Template Name |
Descrição |
|
ItemTemplate |
Define o conteúdo e o layout dos itens dentro da lista. Requerido. |
|
AlternatingItemTemplate |
Se usado, determina o conteúdo e o layout dos itens alternados. Se não for definido, os valores de ItemTemplate são mantidos em toda a lista. |
|
SeparatorTemplate |
Se definido, é renderizado entre os itens e os itens alternados. Se não for definido, o separador não será renderizado. |
|
SelectedItemTemplate |
Determina o conteúdo e o layout do item selecionado. |
|
EditItemTemplate |
Determina o conteúdo e o layout do conteúdo em Edição. |
|
HeaderTemplate |
Determina o conteúdo e o layout do cabeçalho da lista. |
|
FooterTemplate |
Determina o conteúdo e o layout do rodapé (Footer) da lista |
Tabela 1 – Templates do controle DataList
Os Templates definem os elementos e os controles HTML que devem ser exibidos para um registro. As formatações de cores, fontes etc. podem ser ajustadas através estilos. Cada Template tem suas próprias propriedades de estilo. Por exemplo, os estilos para o EditItemTemplate são ajustados através da propriedade de EditItemStyle.
Uma outra propriedade que devemos salientar é a RepeatLayout. Esta propriedade muda completamente a renderização do controle DataList. Um controle DataList exibe por default uma tabela com uma coluna simples na vertical. Mudar a propriedade RepeatLayout para Flow vai remover toda a estrutura Table para o HTML gerado ao renderizar a página.
DataList suporta render direcional através da propriedade RepeatDirection, modifica-la permitirá renderizar seus registros horizontalmente ou verticalmente. O controle DataList permite ao desenvolvedor controlar o número das “colunas” que são renderizadas pela propriedade RepeatColumns, não importando se os registros estão renderizados horizontalmente ou verticalmente.
Se RepeatDirection for horizontal e RepeatColumns for definido em 5 (cinco), os itens serão renderizados em cinco colunas, cada coluna igual no comprimento e também no total de itens dispostos na horizontal, quando possível. Tabela 2.
|
1 |
2 |
3 |
4 |
5 |
|
6 |
7 |
8 |
9 |
10 |
|
11 |
12 |
13 |
|
|
Tabela 2 – RepeatDirection=Horizontal / RepeatColumns=5
Se RepeatDirection for vertical e RepeatColumns for definido em 5 (cinco), os itens serão renderizados em cinco colunas, cada coluna igual no comprimento e o total de itens será dividido por cinco e organizados na vertical. Tabela 3.
|
1 |
4 |
7 |
10 |
12 |
|
2 |
5 |
8 |
11 |
13 |
|
3 |
6 |
9 |
|
|
Tabela 2 – RepeatDirection=Vertical / RepeatColumns=5
O Código abaixo ilustra um exemplo simples que exibe um DataList com suas propriedades RepeatDirection, RepeatLayout e RepeatColumns, sendo possível alterá-las dinamicamente.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<html>
<script language = "C#" runat="server">
ICollection CreateDataSource() {
DataTable dt = new DataTable();
DataRow dr;
dt.Columns.Add(new DataColumn("ValorString", typeof(string)));
for (int i = 0; i < 10; i++) {
dr = dt.NewRow();
dr[0] = "Item " + i.ToString();
dt.Rows.Add(dr);
}
DataView dv = new DataView(dt);
return dv;
}
void Page_Load(Object Sender, EventArgs E) {
if (!IsPostBack) {
DataList1.DataSource = CreateDataSource();
DataList1.DataBind();
}
}
void Button1_Click(Object Sender, EventArgs E) {
if (DropDown1.SelectedIndex == 0)
DataList1.RepeatDirection = RepeatDirection.Horizontal;
else
DataList1.RepeatDirection = RepeatDirection.Vertical;
if (DropDown2.SelectedIndex == 0)
DataList1.RepeatLayout = RepeatLayout.Table;
else
DataList1.RepeatLayout = RepeatLayout.Flow;
DataList1.RepeatColumns=DropDown3.SelectedIndex+1;
if ((Check1.Checked ==true) && (DataList1.RepeatLayout == RepeatLayout.Table)) {
DataList1.BorderWidth = Unit.Pixel(1);
DataList1.GridLines = GridLines.Both;
}
else {
DataList1.BorderWidth = Unit.Pixel(0);
DataList1.GridLines = GridLines.None;
}
}
</script>
<body>
<h3><font face="Verdana">Exemplo de DataList Simples</font></h3>
<form id="Form1" runat="server">
<font face="Verdana" size="-1">
<asp:DataList id="DataList1" runat="server"
BorderColor="black"
CellPadding="3"
Font-Names="Verdana"
Font-Size="8pt"
HeaderStyle-BackColor="#aaaadd"
AlternatingItemStyle-BackColor="Gainsboro"
>
<HeaderTemplate>
ITENS...
</HeaderTemplate>
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "ValorString") %>
</ItemTemplate>
</asp:DataList>
<br /><br />
<hr noshade align="left" width="300px">
RepeatDirection:
<asp:DropDownList id=DropDown1 runat="server">
<asp:ListItem>Horizontal</asp:ListItem>
<asp:ListItem>Vertical</asp:ListItem>
</asp:DropDownList><br>
RepeatLayout:
<asp:DropDownList id=DropDown2 runat="server">
<asp:ListItem>Table</asp:ListItem>
<asp:ListItem>Flow</asp:ListItem>
</asp:DropDownList><br>
RepeatColumns:
<asp:DropDownList id=DropDown3 runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList><br>
Exibir Bordas:
<asp:CheckBox id=Check1 runat="server" /><p>
<asp:LinkButton id=Button1 Text="Atualiza DataList" OnClick="Button1_Click" runat="server"/>
</font>
</form>
</body>
</html>
Selecionando Itens em um DataLis (SelectItemTemplate)
Você pode customizar o conteúdo e a aparência do item selecionado através da propriedade SelectedItemTemplate. O SelectedItemTemplate é controlado pela propriedade SelectedIndex. Por padrão o valor de SelectedIndex é -1, significando que nenhum dos itens na lista está selecionado. Quando SelectedIndex é ajustado a um conteúdo em particular, esse conteúdo pode ser destacado usando o SelectedItemTemplate.
O exemplo abaixo ilustra o uso de SelectItemTemplate em um controle DataList.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<script runat="server">
ICollection CreateDataSource() {
DataTable dt = new DataTable();
DataRow dr;
dt.Columns.Add(new DataColumn("ValorInteiro", typeof(Int32)));
dt.Columns.Add(new DataColumn("ValorString", typeof(string)));
dt.Columns.Add(new DataColumn("ValorData", typeof(DateTime)));
for (int i = 0; i < 9; i++) {
dr = dt.NewRow();
dr[0] = i;
dr[1] = "Item " + i.ToString();
dr[2] = DateTime.Now;
dt.Rows.Add(dr);
}
DataView dv = new DataView(dt);
return dv;
}
void Page_Load(Object Sender, EventArgs e) {
if (!IsPostBack)
CarregaLista();
}
void CarregaLista() {
DataList1.DataSource= CreateDataSource();
DataList1.DataBind();
}
void DataList_ItemCommand(object Sender, DataListCommandEventArgs e) {
string cmd = ((LinkButton)e.CommandSource).CommandName;
if (cmd == "select")
DataList1.SelectedIndex = e.Item.ItemIndex;
CarregaLista();
}
</script>
<html>
<head runat="server">
<title>Exemplo do Controle DataList</title>
</head>
<body>
<h3>Usando o SelectItemTemplate com o DataList</h3>
<form id="Form1" runat="server">
<asp:DataList id="DataList1" runat="server"
BorderColor="black"
BorderWidth="1"
GridLines="Both"
CellPadding="3"
Font-Names="Verdana"
Font-Size="8pt"
Width="150px"
HeaderStyle-BackColor="#aaaadd"
AlternatingItemStyle-BackColor="Gainsboro"
SelectedItemStyle-BackColor="yellow"
OnItemCommand="DataList_ItemCommand"
>
<HeaderTemplate>
INTENS
</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton
id="button1"
runat="server"
Text="Detalhes..."
CommandName="select" />
<%# DataBinder.Eval(Container.DataItem, "ValorString") %>
</ItemTemplate>
<SelectedItemTemplate>
Item:
<%# DataBinder.Eval(Container.DataItem, "ValorString")%>
<br>
Data do Pedido:
<%# DataBinder.Eval(Container.DataItem, "ValorData", "{0:d}") %>
<br>
Quantidade:
<%# DataBinder.Eval(Container.DataItem, "ValorInteiro", "{0:N1}") %>
<br>
</SelectedItemTemplate>
</asp:DataList>
</form>
</body>
</html>
Com estes dois exemplos, podemos sentir um pouco do poder deste controle que sem sombra de dúvidas é essencial em nossas aplicações web.
Bem, vou ficando por aqui com esse artigo. Mas não deixem de acessar o Portal DevMedia pois em breve estarei dando continuidade a esse artigo.
Uma boa prática e até breve!!!
