Clique aqui para ler todos os artigos desta edição
ASP.NET DataGrid no Cliente
por Dino Esposito
|
Este artigo discute |
Este artigo usa as seguintes tecnologias: |
|
· Customização do Datagrid · DHTML, HTML, JavaScript |
Visual Basic e SQL Download: CuttingEdge0401.exe (128KB) |
|
Chapéu ASP.NET Datagrid |
|
Para a maior parte dos desenvolvedores de ASP.NET, o controle DataGrid é uma ferramenta básica e essencial, assim como o rolo de massa para os pizzaiolos profissionais. O DataGrid no ASP.NET 1.x é um controle extremamente avançado e versátil e uma excelente ferramenta de servidor. No entanto, você pode torná-lo ainda mais avançado com a inclusão de poucos scripts no lado cliente. Até agora, eu não havia experimentado controles JavaScript e DataGrid juntos. Recentemente, deparei-me com um excelente artigo escrito por Dave Massy há alguns anos para a coluna "DHTML Dude" na MSDN® Online. Ele analisava maneiras criativas de reativar o elemento
Ele demonstra também o uso de comportamentos DHTML com um elemento Uma Rápida Visita aos Comportamentos do DHTML Os comportamentos do DHTML desempenham um papel importante na implementação de um controle DataGrid rico. Como você verá em breve, eu não poderia usar os comportamentos de Dave em seus formulários originais. Foram necessárias algumas modificações para fazer com que esses comportamentos funcionassem no contexto de um controle ASP.NET. Embora não seja preciso conhecimentos específicos em JavaScript para usar os componentes modificados, uma rápida revisão da tecnologia de comportamento do DHTML se faz necessária para melhor compreensão dos mecanismos que permitem que o código no lado cliente e no lado servidor funcionem juntos. Um comportamento DHTML consiste em um componente de script que é vinculado a uma tag HTML por meio de uma folha de estilos em cascata (CSS). Se o seu código é executado em um navegador antigo que não tenha suporte a CSS ou que não reconheça o comportamento de estilo, o estilo desconhecido será simplesmente ignorado. Um comportamento DHTML é uma coleção de funções JavaScript acrescentada de alguns membros públicos definidos por meio de uma sintaxe especial. Em geral, os membros públicos englobam propriedades e eventos e, às vezes, métodos. Os comportamentos trabalham acima de elementos HTML existentes e permitem que você substitua e estenda o comportamento de elementos HTML. Para fazer isso, um comportamento anexa seu próprio código a um ou mais eventos padrão do DHTML. Por exemplo, o comportamento que permite arrastar as colunas trata os eventos onmousedown e onmouseup. Além disso, todos os comportamentos não-triviais do DHTML podem tratar o evento oncontentready, que é disparado após a análise completa da sub-árvore HTML (todo o HTML em um elemento específico). O evento oncontentready é uma boa hora de inicializar um comportamento. Em sua essência, comportamentos são objetos COM que expõem algumas interfaces ao Microsoft® Internet Explorer (versão 5.0 e superior). No entanto, você pode escrevê-los como componentes binários em C++ ou como arquivos de texto HTC (HTML Component). Os arquivos HTC podem ser distribuídos ao servidor junto com os arquivos que os utilizam (HTML, ASP e ASP.NET), sem qualquer instalação no cliente. O código a seguir mostra como adicionar recursos de arrastar colunas a uma tag
Aqui o arquivo precisa ser implementado no servidor no mesmo diretório do arquivo que o utiliza. O DataGrid para Arrastar Depois de ler a coluna de Dave Massy, baixei o componente dragdrop.htc do exemplo e tentei vinculá-lo a um componente DataGrid em uma página de exemplo, desta maneira: theGrid.Style["behavior"] = "url(dragdrop.htc)"; Surpreendentemente, ele não funcionou. Baseado em minha certeza de que o DataGrid não passa de uma tabela em um cliente, decidi comparar o código-fonte da tabela de exemplo de Dave com o código-fonte HTML do DataGrid ASP.NET. Percebi que, no ASP.NET 1.x, as tabelas geradas pelo DataGrid não contêm os elementos THEAD e TBODY. No entanto, esses elementos são essenciais para que o comportamento do exemplo funcione. As tags THEAD e TBODY não são estritamente necessárias para implementar o comportamento “drag and drop” da coluna, mas elas facilitam enormemente a localização do corpo e do cabeçalho da tabela. Você pode reescrever o comportamento sem THEAD e TBODY ou escrever um controle DataGrid personalizado que gere uma tabela com tags THEAD e TBODY. No caso de um desenvolvedor ASP.NET como eu, acreditei que seria mais fácil escrever um controle personalizado do que editar um comportamento. Pensei que teria ao menos um depurador eficaz para incluir no código. Desse modo, iniciei uma nova solução Visual Studio® .NET e criei um aplicativo ASP.NET de exemplo e um projeto de biblioteca de controles na Web. A nova classe DataGrid tinha esse protótipo: [ToolboxData("<{0}:DataGrid runat=\"server\" />")] public class DataGrid : System.Web.UI.WebControls.DataGrid { public DataGrid() : base() { EnableColumnDrag = true; DragColor = Color.Empty; HitColor = Color.Empty; } ••• } O construtor inicializa três propriedades personalizadas públicas: EnableColumnDrag, DragColor e HitColor. EnableColumnDrag é uma propriedade Boolean que permite arrastar colunas. Com essa propriedade definida como False, o DataGrid personalizado não adiciona o comportamento de arrastar (drag). As outras duas propriedades definem a cor de fundo da coluna arrastada e a cor da coluna-alvo da operação de arrastar. Note que essas duas propriedades de cor não afetam a lógica de controle do servidor DataGrid. Elas são simplesmente propriedades no lado servidor que são usadas para gerar os valores para HTML que serão consumidos pelo comportamento no lado cliente. Os valores das duas propriedades são renderizados como atributos personalizados para a tag Listagem 1 Método Render ... do HTML. Entre outras coisas, Dave mostra como classificar o conteúdo de uma tabela por coluna e como arrastar as colunas.
. Percebi que, quando renderizado para HTML e enviado ao browser, o controle DataGrid é um elemento
simples. Claro, ele pode conter muitos atributos de estilo, mas seu esqueleto é uma clássica tabela HTML. Isso me fez perceber que eu poderia criar um controle DataGrid com colunas que podiam ser arrastadas e com classificação no lado cliente. Este artigo descreve os meus experimentos. Você pode baixar o código-fonte para ver que não estou mentindo.
usando o comportamento dragdrop.htc:
gerada para o grid. O código de marcação do DataGrid é criado no método Render do controle listado na Listagem 1.
