Lista de Dados com Subitens – Parte I

 

Olá Pessoal,

 

Olha, tentei de todas as formas, mas este foi o título que consegui encontrar para este tutorial.

 

Vou tentar através dele, mostrar a vocês como criar listagem de dados com Subitens, onde os dados são obtidos através de uma base de dados. Não entendeu? Então vamos no popular mesmo: No banco de dados Northwind existe uma tabela de Produtos e outra de Categorias, onde a tabela de Produtos relaciona a qual categoria de Produtos um tal produto pertence. Digamos que você tem o desafio de listar todas estas categorias e seus respectivos produtos, como no modelo abaixo:

 

 

Exibi apenas 2 categorias.

 

Não parece uma tarefa fácil, mas 80% do que é necessário já foi escrito nos tutoriais deste site.

 

Então, mãos a obra. Crie um novo projeto chamado ListaDeProdutos

 

 

Estou utilizando a linguagem Visual Basic.Net, mas você pode construir em C# ou J# também.

 

Crie um novo arquivo chamado ProdutosPorCategoria.aspx

 

 

Abra este arquivo e adicione um DataList chamado dlCategorias.

 

 

Agora, temos que criar o template do DataList. Para isso, clique com o botão direito sobre o dlCategorias, opção Edit Template, opção ItemTemplate

 

 

Vamos inserir uma tabela com 1 coluna e 2 linhas na seção Item Template. Para isso, clique na seção ItemTemplate e depois vá até o menu Table>Insert>Table

 

 

Configure de acordo com a imagem abaixo e clique em Ok

 

 

Clique na tabela e formate-a como desejar. Veja como fiz:

 

 

Na parte onde está marrom, vamos inserir um Label. Clique na ToolBox e arraste um label para dentro desta parte que está em Marrom

 

 

Ainda com o Label selecionado, vá até a guia de propriedades e clique em DataBindings. Selecione a opção text à esquerda, na parte da direita, expanda a opção Container e selecione a opção DataItem. Clique na opção Custom Binding Expression e escreva a expressão de acordo com a imagem abaixo:

 

 

Clique em Ok.

 

Agora, abra a Tool Box e arraste um DataGrid para a seção que está de verde. Dê a ele o nome de dgItems.

 

 

Formate seu DataGrid como quiser, mas que pelo menos combine as cores com a tabela. Veja:

 

 

Ainda com o DataGrid selecionado, vá até a guia de propriedades e na propriedade ShowHeader marque false para ocultar o cabeçalho.

 

 

Vejam o resultado:

 

 

Salve o arquivo, e na próximo tutorial continuamos.

 

Um abraço,

 

Lano de Castro