none
UpdatePanel + css + table RRS feed

  • 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?

    segunda-feira, 16 de julho de 2012 00:26

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
    quarta-feira, 18 de julho de 2012 01:23

Todas as Respostas

  • Sim...mas eu preciso de uma parte do CSS e HTML para resolver seu problema, tem como?

    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    segunda-feira, 16 de julho de 2012 17:47
  • 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!!

    segunda-feira, 16 de julho de 2012 23:13
  • 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"

    terça-feira, 17 de julho de 2012 14:22
  • Valeu Lucas,

    Vou tentar implementar sua solução, espero que funcione pois estou sem alternativas. Não sei nem o que tentar.

    Hoje à noite ou amanhã de manhã eu posto o resultado aqui. 

    Abraço.

    terça-feira, 17 de julho de 2012 19:39
  • 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
    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"

    quarta-feira, 18 de julho de 2012 12:31