DataList - Controles Server Side para exibição de dados.
Todos os controles de exibição de dados do ambiente .NET são parecidos. As mudanças são
mais visuais que funcionais.
O DataList tem a vantagem de ser mais simples, compacto que o GridView, por ter um visual
bem mais simplificado e não tem funções nativas do GridView como ordenação pelo campo
quando clicamos no cabeçalho do GridView.
É um bom controle para exibir os dados como uma planilha ou tabela web mas é bem fraco em
recursos operacionais.
Efeitos visuais : Muitos efeitos visuais são difíceis de serem utilizados porque trabalham
em conjunto e quando um fica bom o outro fica péssimo. Por exemplo, para que o parâmetro
BorderStyle funcione o parâmetro BorderWidth tem que ser maior que 1 e aí a borda, muitas
vezes, fica muito feia.
Apesar de muita coisa contrária ao uso do controle ele é muito rico em detalhes de
customização que faz com que ele acabe tendo um visual interessante em qualquer site.
No exemplo abaixo eu inseri 3 linhas em cada campo do controle : Um numérico indicando
o número do registro, um com o nome do cliente e outro com a data de inserção do cliente
no banco de dados. Note que o horário no banco de dados não foi definido e por esse motivo
o horário em todos os campos estão como 00:00:00. Note que eu poderia ter aglutinado as
3 linhas numa única ou fazer uma combinação com elas mas escolhi esse formato porque
foi o visual que mais gostei
Veja o exemplo abaixo:
| Clientes |
1
Syed E Abbas
21/08/1924 00:00:00
|
2
Catherine R. Abel
27/12/1988 00:00:00
|
3
Kim B Abercrombie
10/02/1932 00:00:00
|
4
Hazem E Abolrous
23/10/1984 00:00:00
|
5
Pilar G Ackerman
22/08/1991 00:00:00
|
6
Aaron B Adams
10/09/1983 00:00:00
|
7
Alex C Adams
07/07/1905 00:00:00
|
8
Alexandra J Adams
12/08/1964 00:00:00
|
9
Allison L Adams
29/08/1936 00:00:00
|
10
Amanda P Adams
17/01/2002 00:00:00
|
11
Andrea M Adams
22/12/1922 00:00:00
|
12
Blake L Adams
07/09/1956 00:00:00
|
13
Carla J. Adams
01/06/2008 00:00:00
|
14
Charles R Adams
05/02/1944 00:00:00
|
15
Chloe A Adams
08/12/1996 00:00:00
|
16
Courtney C Adams
02/02/2018 00:00:00
|
17
Eduardo A Adams
21/03/1946 00:00:00
|
18
Elijah L Adams
23/01/1912 00:00:00
|
19
Fernando S Adams
27/08/1956 00:00:00
|
20
Frances B. Adams
09/09/1980 00:00:00
|
21
Gabriel S Adams
06/05/2007 00:00:00
|
22
Gabriella K Adams
04/09/1949 00:00:00
|
23
Gabrielle J Adams
23/03/1991 00:00:00
|
24
Hailey M Adams
27/11/1918 00:00:00
|
25
Haley M Adams
02/04/1926 00:00:00
|
26
Ian C Adams
03/07/1965 00:00:00
|
27
Isaiah L Adams
28/01/2003 00:00:00
|
28
Jackson H Adams
29/04/1912 00:00:00
|
29
Jay G Adams
05/06/1917 00:00:00
|
30
Jenna L Adams
24/07/1990 00:00:00
|
31
Jeremy D Adams
27/09/1924 00:00:00
|
32
Jesse M Adams
13/07/1947 00:00:00
|
33
Jordan F Adams
14/04/1989 00:00:00
|
34
Jordan R Adams
06/04/2012 00:00:00
|
35
Jose J Adams
22/12/1930 00:00:00
|
36
Julia N Adams
15/10/1946 00:00:00
|
37
Kaitlyn A Adams
08/08/1947 00:00:00
|
38
Katelyn W Adams
12/05/1912 00:00:00
|
39
Katherine M Adams
12/03/1961 00:00:00
|
40
Kaylee F Adams
18/08/2008 00:00:00
|
41
Kevin M Adams
13/10/1972 00:00:00
|
42
Kyle E Adams
22/01/1911 00:00:00
|
43
Luis R Adams
10/05/1901 00:00:00
|
44
Luke C Adams
24/10/2005 00:00:00
|
45
Mackenzie A Adams
22/11/1977 00:00:00
|
46
Marcus M Adams
30/08/1905 00:00:00
|
47
Maria N Adams
11/12/1906 00:00:00
|
48
Mary D Adams
16/01/1942 00:00:00
|
49
Mason T Adams
23/08/1931 00:00:00
|
50
Natalie P Adams
28/11/1942 00:00:00
| | |
| Ano fiscal de 2021 |
O DataList possui regiões como cabeçalho, rodapé, corpo que são chamados de templates.
Os templates que podem ser definidos ou não. Se não forem definidos não são exibidos.
Num DataList temos os seguintes templates :
Header - É o primeiro template do cabeçalho e será exibido logo acima, no topo do DataList.
O template Item é o corpo do DataList, o local onde serão exibidos os itens de
informação
o template AlternateItem é usado para dar o efeito 'zebrado' em cada linha do
DataList.
O template EditItem é usado para 'customizar' as linhas ou células onde
podemos editar as informações contidas nelas.
O template SelectedItem é usado para exibir os itens selecionados, ou seja, que o
usuário clicou com o mouse para selecionar.
O template Separator insere um separador entre os itens do DataList.
O template Footer é o último template e define a região do rodapé do Datalist.
Muito usado para definir uma característica dos dados exibidos do DataSet como, por
exemplo, 'Vendas de Jan/2020 a Out/2020'.
Ainda podemos personalizar a exibição do componente através das seguintes propriedades:
RepeatLayout : Pode ser flow ou table e define como os dados serão exibidos no
DataList. 'Flow' os dados serão exibidos em sequência e no caso do 'table' serão
estruturados como uma tabela
GridLines : Define como as linhas de grade devem ser exibidas. Podem ser
None(nenhum), Horizontal (só as linhas horizontais), Vertical (só as linhas verticais) ou
Both (ambos - Linhas Horizontais e verticais, como uma planilha do Excel
RepeatColumns Informa ao DataList a quantidade de colunas que serão usadas para
exibir os dados.Num DataGrid é automatico mas no DataList não.
RepeatDirection Define como os dados deverão ser exibidos, ou empilhando
eles na Vertical ou na Horizontal.
ShowHeader Pode ter os valores False ou True e define se o template cabeçalho
(Header) será exibido.
ShowFooter Pode ter os valores False ou True e define se o template rodapé (footer)
será exibido ou não.
DataSource = "<% expressão databinding %>Eval DataKeyField Exibe uma informação trazida
do banco de dados.
OnCancelCommand ("OnCancelCommandMethod") - Define que o DataList deve exibir e tratar
o comando para cancelar a operação, no caso de uma edição de dados, por exemplo(*1).
OnDeletelCommand ("OnDeleteCommandMethod") - Define que o DataList deve exibir
e tratar o comando para deletar dados associados a linha selecionada(*1).
OnEditCommand ("OnEditCommandMethod") - Define que o DataList deve exibir
e tratar o comando de edição de dados da linha seleiconada(*1).
OnUpdateCommand ("OnUpdateCommandMethod") - Define que o DataList deve exibir
e tratar o comando para atualizar dados(*1).
(*1) - Nota : Quando as funções OnCancelCommand, OnDeleteCommand, OnEditCommand,
OnUpdateCommand são definidas como true o DataList apenas exibe um botão de
Cancel, Delete Edit e Update respectivamente e cria um evento que é disparado
ao clicar nesse botão. Contudo as funções de Cancel, Delete, Edit e Update dos dados
devem ser programadas pelo analista para que seja realizada no banco de dados, NÃO é feita
de maneira automática.
Código:
<div class="container">
<asp:Label ID="lblmsg" runat="server" Text=""></asp:Label>
</div>
<div class="container">
<asp:DataList id="Pessoas"
runat="server"
gridlines ="Both"
RepeatColumns="4"
RepeatDirection="Horizontal"
CellPadding="3"
CellSpacing="0"
Font-Name="Arial"
Font-Size="8pt"
HeaderStyle-BackColor="LightBlue"
HeaderStyle-HorizontalAlign="Center"
HeaderStyle-VerticalAlign="Middle"
FooterStyle-BackColor="LightGreen"
FooterStyle-HorizontalAlign="Center"
FooterStyle-VerticalAlign="Middle" Width="500px">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "ID") %><br />
<%# DataBinder.Eval(Container.DataItem, "nome") %><br />
<%# DataBinder.Eval(Container.DataItem, "dtNasc") %><br />
</ItemTemplate>
<HeaderTemplate>Clientes</HeaderTemplate>
<FooterTemplate>Ano fiscal de 2021</FooterTemplate>
</asp:DataList>