Usuário com melhor resposta
UpdatePanel + css + table
Pergunta
-
Pessoal,
Tenho uma tabela que uso para apresentar o resultado de uma pesquisa do usuário, tipo um grid, só que uso o repeater e monto uma <table> dentro dele.
Funciona bem, mas se coloco dentro de um updatepanel ele perde as referências ao css e fica sem o estilos que defini. Se tiro do updatepanel e deixo como submit normal, funciona certinho.
Em ambos os casos a tabela é preenchida corretamente, o problema é só o css. Já copiei os fontes (HTML) gerados das duas formas e são idênticos.
Alguém tem alguma dica?
Respostas
-
Lucas,
Sua dica não deu certo, mas me ajudou no caminho das pedras.
1º - Eu não consegui executar o script simplesmente colocando ele dentro do updatepanel, para isso tive que executar o código abaixo no onload da página:
ScriptManager.RegisterStartupScript( UpdatePanel, this.GetType(), "AtualizaTabela", "atualizaTabela();", //Nome da função javascript criada na masterpage true);
2º - A função javascript que eu tinha que chamar era diferente da que você informou.
Mesmo saindo um pouco do que vc sugeriu, se não fosse sua dica eu não chegaria à solulção.
- Marcado como Resposta Gustavo28 quarta-feira, 18 de julho de 2012 01:23
Todas as Respostas
-
-
Cara,
Se conseguir me ajudar vai ser muito bom... É o seguinte, meu repeater gera a tabela abaixo (com outras informações)
<table class="mws-table"> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </thead> <tbody> <tr class="gradeX"> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td class="center">4</td> <td class="center">X</td> </tr> <tr class="gradeC"> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> <td class="center">5</td> <td class="center">C</td> </tr> <tr class="gradeA"> <td>Trident</td> <td>Internet Explorer 5.5</td> <td>Win 95+</td> <td class="center">5.5</td> <td class="center">A</td> </tr> <tr class="gradeA"> <td>Trident</td> <td>Internet Explorer 6</td> <td>Win 98+</td> <td class="center">6</td> <td class="center">A</td> </tr> <tr class="gradeA"> <td>Trident</td> <td>Internet Explorer 7</td> <td>Win XP SP2+</td> <td class="center">7</td> <td class="center">A</td> </tr> <tr class="gradeA"> <td>Trident</td> <td>AOL browser (AOL desktop)</td> <td>Win XP</td> <td class="center">6</td> <td class="center">A</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 1.0</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.7</td> <td class="center">A</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 1.5</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Camino 1.5</td> <td>OSX.3+</td> <td class="center">1.8</td> <td class="center">A</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Netscape 7.2</td> <td>Win 95+ / Mac OS 8.6-9.2</td> <td class="center">1.7</td> <td class="center">A</td> </tr> </tbody> </table> </div>
Repeater:
<asp:Repeater ID="rptList" runat="server"> <HeaderTemplate> <table class="mws-table"> <thead> <tr> <th> Nome </th> <th> Status </th> <th> Início do contrato </th> <th> Valor da mensalidade </th> <th> Contato </th> </tr> <tbody> </HeaderTemplate> <ItemTemplate> <tr class="gradeX"> <td> <%# DataBinder.Eval(Container.DataItem, "nome") %> </td> <td> <%# DataBinder.Eval(Container.DataItem, "ativo") %> </td> <td> <%# DataBinder.Eval(Container.DataItem, "dataInicioContrato")%> </td> <td class="center"> <%# DataBinder.Eval(Container.DataItem, "valorMensalidade")%> </td> <td class="center"> <%# DataBinder.Eval(Container.DataItem, "contato")%> </td> </tr> </ItemTemplate> <AlternatingItemTemplate> <tr class="gradeC"> <td> <%# DataBinder.Eval(Container.DataItem, "nome") %> </td> <td> <%# DataBinder.Eval(Container.DataItem, "ativo") %> </td> <td> <%# DataBinder.Eval(Container.DataItem, "dataInicioContrato")%> </td> <td class="center"> <%# DataBinder.Eval(Container.DataItem, "valorMensalidade")%> </td> <td class="center"> <%# DataBinder.Eval(Container.DataItem, "contato")%> </td> </tr> </AlternatingItemTemplate> <FooterTemplate> </tbody> </table> </FooterTemplate> </asp:Repeater>
Não conheço o css, em primeiro lugar, porque não sei nada de css mesmo. Em segundo lugar, porque eu comprei o template de site pronto.
Procurei nos arquivos e não encontrei nenhuma referência à gradeX, gradeA ou gradeC, que são utilizados nas tr's. Encontre referências à mws-table em dois arquivos, seguem abaixo:
body, div#mws-container { background-image:url('../images/core/bg/paper.png'); } div#mws-sidebar-bg, div#mws-header, .mws-panel .mws-panel-header, div#mws-error-container, div#mws-login, div#mws-login .mws-login-lock, .ui-accordion .ui-accordion-header, .ui-tabs .ui-tabs-nav, .ui-datepicker, .fc-event-skin, .ui-dialog .ui-dialog-titlebar, div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer, div#mws-user-tools .mws-dropdown-menu .mws-dropdown-box, div#mws-user-tools .mws-dropdown-menu.toggled a.mws-dropdown-trigger { background-color:#35353a; } div#mws-header { border-color:#c5d52b; } .mws-panel .mws-panel-header span, div#mws-navigation ul li.active a, div#mws-navigation ul li.active span, div#mws-user-tools #mws-username, div#mws-navigation ul li span.mws-nav-tooltip, div#mws-user-tools #mws-user-info #mws-user-functions #mws-username, .ui-dialog .ui-dialog-title, .ui-state-default, .ui-state-active, .ui-state-hover, .ui-state-focus, .ui-state-default a, .ui-state-active a, .ui-state-hover a, .ui-state-focus a { color:#c5d52b; text-shadow:0 0 6px rgba(197, 213, 42, 0.5); } div#mws-searchbox input.mws-search-submit, .mws-panel .mws-panel-header .mws-collapse-button span, div.dataTables_wrapper .dataTables_paginate .paginate_disabled_previous, div.dataTables_wrapper .dataTables_paginate .paginate_enabled_previous, div.dataTables_wrapper .dataTables_paginate .paginate_disabled_next, div.dataTables_wrapper .dataTables_paginate .paginate_enabled_next, div.dataTables_wrapper .dataTables_paginate .paginate_active, .mws-table tbody tr.odd:hover td, .mws-table tbody tr.even:hover td, .fc-state-highlight, .ui-slider-horizontal .ui-slider-range, .ui-slider-vertical .ui-slider-range, .ui-progressbar .ui-progressbar-value, .ui-datepicker td.ui-datepicker-current-day, .ui-datepicker .ui-datepicker-prev .ui-icon, .ui-datepicker .ui-datepicker-next .ui-icon, .ui-accordion-header .ui-icon, .ui-dialog-titlebar-close .ui-icon { background-color:#c5d52b; }/* * MWS Admin v1.5 - Table Stylesheet * This file is part of MWS Admin, an Admin template build for sale at ThemeForest. * All copyright to this file is hold by Mairel Theafila <maimairel@yahoo.com> a.k.a nagaemas on ThemeForest. * Last Updated: * April 29, 2012 * * Table of Contents * ================================================== * * 1. General Table Styling * 2. Data Table Styling * */ /* (1) General Table Styling ================================================== */ table.mws-table { width:100%; margin:0; border:0; border-collapse:collapse; } table.mws-table thead tr { background:url(../../images/core/mws-table-header.png) repeat-x left bottom #f5f5f5; } table.mws-table thead tr th:first-child { border-left:none; } table.mws-table thead tr th { padding:10px 16px; border-bottom:1px solid #cccccc; border-left:1px solid #cccccc; } table.mws-table tbody td, table.mws-table tfoot td { padding:8px 16px; border-left-width:1px; border-left-style:dotted; border-left-color:#bebebe !important; } table.mws-table tbody td:first-child, table.mws-table tfoot td:first-child { border-left:none; } table.mws-table tbody tr.odd { background-color:#f2f2f2; } table.mws-table tbody tr.even { background-color:#fafafa; } table.mws-table tbody tr.odd td.sorting_1 { background-color:#cccccc; } table.mws-table tbody tr.even td.sorting_1 { background-color:#e1e1e1; } /* (2) Data Table Styling ================================================== */ div.dataTables_wrapper { background:#444444; } .dataTables_wrapper table thead th.sorting, .dataTables_wrapper table thead th.sorting_asc, .dataTables_wrapper table thead th.sorting_desc { cursor:pointer; } .dataTables_wrapper table thead th.sorting_asc, .dataTables_wrapper table thead th.sorting_desc, .dataTables_wrapper table thead th.sorting { background-position:12px center; background-repeat:no-repeat; padding-left:30px; } .dataTables_wrapper table thead th.sorting { background-image:url(../../images/core/sort.png); } .dataTables_wrapper table thead th.sorting_asc { background-image:url(../../images/core/sort_asc.png); } .dataTables_wrapper table thead th.sorting_desc { background-image:url(../../images/core/sort_desc.png); } div.dataTables_wrapper:before, div.dataTables_wrapper:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } div.dataTables_wrapper:after { clear: both; } div.dataTables_wrapper { zoom: 1; } div.dataTables_wrapper .dataTables_length, div.dataTables_wrapper .dataTables_filter, div.dataTables_wrapper .dataTables_info, div.dataTables_wrapper .dataTables_paginate { padding:8px; } div.dataTables_wrapper .dataTables_length { float:left; } div.dataTables_wrapper .dataTables_filter { background-color:#cccccc; text-align:right; border-bottom:1px solid #aaaaaa; } div.dataTables_wrapper .dataTables_info { color:#ffffff; float:left; margin-top:2px; display:block; } div.dataTables_wrapper .dataTables_paginate { color:#ffffff; float:right; padding:2px; margin:10px 8px 10px 0; background-repeat:repeat; background-image:url(../../images/core/mws-inset.png); /* CSS 3 */ -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; -khtml-border-radius:4px; border-radius:4px; -webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.15), inset 0px 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.15), inset 0px 1px 2px rgba(0, 0, 0, 0.5); -o-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.15), inset 0px 1px 2px rgba(0, 0, 0, 0.5); -khtml-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.15), inset 0px 1px 2px rgba(0, 0, 0, 0.5); box-shadow:0px 1px 0px rgba(255, 255, 255, 0.15), inset 0px 1px 2px rgba(0, 0, 0, 0.5); } div.dataTables_wrapper .dataTables_paginate .paginate_disabled_previous, div.dataTables_wrapper .dataTables_paginate .paginate_enabled_previous, div.dataTables_wrapper .dataTables_paginate .paginate_disabled_next, div.dataTables_wrapper .dataTables_paginate .paginate_enabled_next { width:20px; height:20px; text-indent:-9999px; float:left; display:block; cursor:pointer; outline:none; } div.dataTables_wrapper .dataTables_paginate .paginate_disabled_previous, div.dataTables_wrapper .dataTables_paginate .paginate_enabled_previous { background-image:url(../../images/core/arrow-left.png); background-repeat: no-repeat; background-position: center center; margin-right:1px; -webkit-border-radius:4px 0 0 4px; -moz-border-radius:4px 0 0 4px; -o-border-radius:4px 0 0 4px; -khtml-border-radius:4px 0 0 4px; border-radius:4px 0 0 4px; } div.dataTables_wrapper .dataTables_paginate .paginate_disabled_next, div.dataTables_wrapper .dataTables_paginate .paginate_disabled_previous { opacity:.35; filter:Alpha(35); cursor:auto; } div.dataTables_wrapper .dataTables_paginate .paginate_disabled_next, div.dataTables_wrapper .dataTables_paginate .paginate_enabled_next { background-image:url(../../images/core/arrow-right.png); background-repeat: no-repeat; background-position: center center; -webkit-border-radius:0 4px 4px 0; -moz-border-radius:0 4px 4px 0; -o-border-radius:0 4px 4px 0; -khtml-border-radius:0 4px 4px 0; border-radius:0 4px 4px 0; } div.dataTables_wrapper .dataTables_paginate .first { -webkit-border-radius:2px 0 0 2px; -moz-border-radius:2px 0 0 2px; -o-border-radius:2px 0 0 2px; -khtml-border-radius:2px 0 0 2px; border-radius:2px 0 0 2px; } div.dataTables_wrapper .dataTables_paginate .last { -webkit-border-radius:0 2px 2px 0; -moz-border-radius:0 2px 2px 0; -o-border-radius:0 2px 2px 0; -khtml-border-radius:0 2px 2px 0; border-radius:0 2px 2px 0; } div.dataTables_wrapper .dataTables_paginate .paginate_button, div.dataTables_wrapper .dataTables_paginate .paginate_active { float:left; height:20px; padding:0 10px; display:block; font-size:12px; line-height:20px; text-align:center; cursor:pointer; outline:none; background-color:#444444; border-right:1px solid #232323; border-left:1px solid #666666; border-right:1px solid rgba(0, 0, 0, 0.5); border-left:1px solid rgba(255, 255, 255, 0.15); -webkit-box-shadow:0px 1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.15); -o-box-shadow:0px 1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.15); -moz-box-shadow:0px 1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.15); -khtml-box-shadow:0px 1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.15); box-shadow:0px 1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.15); } div.dataTables_wrapper .dataTables_paginate .paginate_button:first-child { border-left:0; } div.dataTables_wrapper .dataTables_paginate .paginate_button:last-child { border-right:0; } div.dataTables_wrapper .dataTables_paginate .paginate_button_disabled { color:#666666; cursor:default; } div.dataTables_wrapper .dataTables_paginate .paginate_active { color:#323232; border:none; background-image:none; -webkit-box-shadow:inset 0px 0px 4px rgba(0, 0, 0, 0.25); -moz-box-shadow:inset 0px 0px 4px rgba(0, 0, 0, 0.25); -o-box-shadow:inset 0px 0px 4px rgba(0, 0, 0, 0.25); -khtml-box-shadow:inset 0px 0px 4px rgba(0, 0, 0, 0.25); box-shadow:inset 0px 0px 4px rgba(0, 0, 0, 0.25); }
É isso, espero que possa me ajudar!!
-
Amigo,
Acredito que o problema não seja o HTML nem o CSS mas sim o JS, pq? No seu layout você está utilizando o plugin Jquery.DATABLE que faz a tabela ficar bonitinha. Esse código é chamado no arquivo "demo.js", estou utilizando como referência o código do template que você compro. Nesse arquivo você vai encontrar a linha:
$(".mws-datatable").dataTable();Essa linha como você pode ver, aplica o plugin na sua tabela ele faz isso assim que a página termina de carregar, como você está utilizando o UPDATEPANEL ele vai dar problema pq no momento que ele dispara o plugin a sua tabela não está disponível então da MERDA!
Como resolver?
Aconselho a colocar dentro do UPDATEPANEL um bloco de SCRIPT e adicionar o código que eu citei.<script>$(".mws-datatable").dataTable();</script>Espero ter ajudado e boa sorte!
Não esqueça de marcar como útil uma resposta que te ajude.
"A diversão é a alma do negócio" -
-
Lucas,
Sua dica não deu certo, mas me ajudou no caminho das pedras.
1º - Eu não consegui executar o script simplesmente colocando ele dentro do updatepanel, para isso tive que executar o código abaixo no onload da página:
ScriptManager.RegisterStartupScript( UpdatePanel, this.GetType(), "AtualizaTabela", "atualizaTabela();", //Nome da função javascript criada na masterpage true);
2º - A função javascript que eu tinha que chamar era diferente da que você informou.
Mesmo saindo um pouco do que vc sugeriu, se não fosse sua dica eu não chegaria à solulção.
- Marcado como Resposta Gustavo28 quarta-feira, 18 de julho de 2012 01:23
-
Que bom que tudo deu certo amigo...parabéns por não ter apenas copiado e colado o código, entender a possível solução faz toda diferença!!
Boa sorte e sucesso!
Não esqueça de marcar como útil uma resposta que te ajude.
"A diversão é a alma do negócio"
