Formatação da paginação de um gridview via Java Script (DHTML)
Por
Alessandro Gonzalez
- junho 22, 2011
Quantas vezes ja tivemos aquele probleminha de conflito de CSS, aqueles que pra resolver só in-line mesmo mesmo??
Acho que é geral principalmente quando trabalhamos com ASP.NET e webforms… hehehhe
Um dos meus últimos problemas foi a formatação de daquela área do gridview que exibe a paginação, ou melhor, quando habilitamos a propriedade Allow Paging do grid, onde não conseguia formatar adequadamente pois havia um conflito de CSS e o pior deveria aplicar em várias páginas pensei em algumas soluções como fazer uma Skin, fazer uma nova classe css para o gridview, todavia, resolvi fazer diferente usando Javas Script (DHTML).
Então, abaixo segue o códido em Java Script (DHTML) para formatar o a área de paginação de um grid, lembrando que o função deve ser chamada no evento databind() da gridview.
/********************************************************
*Função para formatação da grid em específico da área de paginação
* By Alessandro Gonzalez
********************************************************/
function formataPaginacao(nmGrid) {
//Pega o elemento
var grid = document.getElementById(nmGrid);
//Pega as tabelas existentes internamente na grid
var tabelasInternas = grid.getElementsByTagName("TABLE");
//Varre as tags em busca da table que contém os itens da paginação
for (i = tabelasInternas.length - 1; i >= 0; i--) {
tabelasInternas[i].style.width = "100px";
//Pega as células que contém os números
var celulas = tabelasInternas[i].getElementsByTagName("TD");
//Varre as células para adicionar a formatação
for (j = celulas.length - 1; j >= 0; j--) {
//Formatando as células que contém os números da paginação
//Procura por página atual
var spans = celulas[j].getElementsByTagName("SPAN");
for (y = spans.length - 1; y >= 0; y--) {
spans[y].style.padding = "3px";
spans[y].style.border = "solid 1px #DCDCDC";
spans[y].style.backgroundColor = "#F7F7F7";
spans[y].style.font = "normal normal 17px verdana";
}
//Pega os links
var links = celulas[j].getElementsByTagName("A");
for (w = links.length - 1; w >= 0; w--) {
links[w].style.font = "normal normal 13px verdana";
}
}
//Pega as imagens que contém os next e previus
var imagens = tabelasInternas[i].getElementsByTagName("INPUT");
for (k = imagens.length - 1; k >= 0; k--) {
//Formatando as imagens de paginação
imagens[k].style.width = "17px";
imagens[k].style.border = "none";
}
}
}
Vale lembrar que o parametro nmGrid é o id da gridview gerado no HTML, lembrando que a propriedade UniqueID não funcionou.
espero que sirva pra vcs, no meu caso funcionou 100%.
Até o próximo.
Alessandro Gonzalez
Nenhum comments
