DatePicker no Tabcontrol do metro-ui. ou DatePicker após postback. ou ainda DatePicker dentro do UpdatePanel - Delboni TI

About us

test banner

Breaking

Post Top Ad

Responsive Ads Here

Post Top Ad

Responsive Ads Here

sexta-feira, 2 de janeiro de 2015

DatePicker no Tabcontrol do metro-ui. ou DatePicker após postback. ou ainda DatePicker dentro do UpdatePanel

Atuando em um projeto antigo que está usando o sua interface utilizando o Metro-ui: http://metroui.org.ua/,
me deparei com um caso.
Na utilização do TabControl: http://metroui.org.ua/tab-control.html, o mesmo não permanece na mesma tab quando realiza o postback ( projeto desenvolvido em WebForms).

Mesmo utilizando jquery para adicionar certas classes css aos componentes necessarios para marcar a tab que eu queria como ativa, não tive sucesso.

Passei a usar para cada Tab, um controle UpdatePanel. Resolvido a solução do PostBack, mas agora porém, os controles textbox com DatePicker ( http://metroui.org.ua/datepicker.html )dentro do UpdatePanel pararam de funcionar.

Depois de muito buscar na internet, montei uma combinação de soluções, e ainda adaptei para funcionar corretamente o DatePicker.  Abaixo seguiremos com o que eu fiz para minha solução.

No inicio da pagina asp, eu criei uma função para ativar o DatePicker nas DIVs que mostrariam as datas. Porque div? no link do DatePicker do metro-ui acima, vocês entederam esse uso.

<script type="text/javascript">
          function IniciarDatepicker() {
             $("#Div2").datepicker();
             $("#Div3").datepicker();
             $("#Div4").datepicker();
             $("#Div6").datepicker();
                   }

   </script>

E adiciono as referencias de script necessarios para que funcionem dentro do UpdatePanel, no controle scripmanager da pagina:

<asp:ScriptManager ID="ScriptManager1" runat="Server" EnableScriptGlobalization="true">
    <Scripts>
     <asp:ScriptReference Path="Content/Metro/js/metro-datepicker.js" />
     <asp:ScriptReference Path="Content/Metro/js/jquery/jquery.min.js" />
     <asp:ScriptReference Path="Content/Metro/js/jquery/jquery.widget.min.js" />
     <asp:ScriptReference Path="Content/Metro/js/jquery/jquery.mousewheel.js" />
     <asp:ScriptReference Path="Content/Metro/js/jquery/metro.min.js" />
    </Scripts>

</asp:ScriptManager>

Faço essa chamada da função Jquery através do code-behind, no load da pagina

protected void Page_Load(object sender, EventArgs e)
{
  ScriptManager.RegisterStartupScript(this, this.GetType(), "teste", "IniciarDatepicker();", true);           

}

Explicação: UpdatePanel faz com que a ativação do DatePicker se perca após o postback. Por isso tenho uma chamada via code-behind no load da pagina a função que ativa o DatePicker na pagina.
E para o UpdatePanel entender que será executado dentro dele certas funções, tenho que instancia-las no ScriptManager.

Se alguem tiver soluções melhores, agradeceria nos comentarios e ou criticar.

Obrigado.

Nenhum comentário:

Postar um comentário

Post Top Ad

Responsive Ads Here