set_visible of RadDatePicker does not work in javascript

[João]

Hi, i have a RadGrid with the following columns:

            <Columns>
                <telerik:GridBoundColumn DataField="IDII" HeaderText="IDII" Display="False"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="IDGrupo" HeaderText="IDGrupo" Display="False"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Grupo" HeaderText="Grupo" Display="False"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="IDGrupoPai" HeaderText="IDGrupoPai" Display="False"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="IDIndicador" HeaderText="ID Indicador" Display="False" HeaderStyle-Width="75%"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Indicador" HeaderText="Indicador" ReadOnly="True"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="TipoValor" HeaderText="TipoValor" Display="False" UniqueName="TipoValor"></telerik:GridBoundColumn>
                <telerik:GridTemplateColumn DataField="Valor" HeaderText="Valor" UniqueName="Valor" HeaderStyle-Width="25%">
                    <ItemTemplate>
                        <asp:Label ID="lbValor" runat="server" Text='<%# Bind("Valor")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadDropDownList ID="boolValor" runat="server" >
                            <Items>
                                <telerik:DropDownListItem Text="Sim" Value="1" />
                                <telerik:DropDownListItem Text="Não" Value="0" Selected="True" />
                                <telerik:DropDownListItem Text="n/a" Value=""/>
                            </Items>
                        </telerik:RadDropDownList>
                        <telerik:RadTextBox ID="strValor" runat="server" ></telerik:RadTextBox>
                        <telerik:RadNumericTextBox ID="intValor" runat="server" NumberFormat-DecimalDigits="0" ></telerik:RadNumericTextBox>
                        <telerik:RadNumericTextBox ID="floatValor" runat="server" NumberFormat-DecimalDigits="2" ></telerik:RadNumericTextBox>
                        <telerik:RadDatePicker ID="dateValor" runat="server"></telerik:RadDatePicker>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>

I use the Batch Edit Mode and in function SetEditorValue() I hide all the controls first and show only a specific one, but the RadDatePicker does not hide, i have tried everything and does not work. Can you help me please!

   function SetEditorValue(sender, args) {
       if (args.get_columnUniqueName() === "Valor") {
           args.set_cancel(true);
           //Obtem o conteúdo pretendido
           var container = args.get_container(), editarValor = args.get_value();
           //Esconde todos os controladores existentes na celula
           var rddlValor = $telerik.findControl(container, "boolValor");
           rddlValor.set_visible(false);
           var rtbValor = $telerik.findControl(container, "strValor");
           rtbValor.set_visible(false);
           var rnitbValor = $telerik.findControl(container, "intValor");
           rnitbValor.set_visible(false);
           var rnftbValor = $telerik.findControl(container, "floatValor");
           rnftbValor.set_visible(false);
           var rdpValor = $telerik.findControl(container, "dateValor");
           rdpValor.set_visible(false);
           //Obtem o ID do TipoValor
           var celulaTipoValor = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(), "TipoValor");
           var IDTipoValor = sender.get_batchEditingManager().getCellValue(celulaTipoValor);
           //Passa o valor para o respetivo controlador
           switch (IDTipoValor) {
               case "1":
                   rddlValor.set_visible(true);
                   if (editarValor === "Sim")
                       rddlValor.findItemByValue("1").select();
                   break;
               case "2":
                   rtbValor.set_visible(true);
                   rtbValor.set_value(editarValor);
                   rtbValor.focus();
                   break;
               case "3":
                   rnitbValor.set_visible(true);
                   rnitbValor.set_value(editarValor);
                   rnitbValor.focus();
                   break;
               case "4":
                   rnftbValor.set_visible(true);
                   floatValor = (editarValor !== null) ? editarValor.toString().replace(".", ",") : "";
                   rnftbValor.set_value(floatValor);
                   rnftbValor.focus();
                   break;
               case "5":
                   rdpValor.set_visible(true);
                   dataValor = (editarValor !== null) ? new Date(editarValor.replace(/(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3")) : "";
                   rdpValor.set_selectedDate(dataValor);
                   rdpValor.get_dateInput().focus();
                   break;
               default:
                   break;
           }
       }
   }

Best regards,
João

[Antonio Stoilkov]

Hi João,

In order to achieve your scenario you could use the code below for showing and hiding the picker. The idea is to use the RadDatePicker wrapper element and hide id using the style.display.

// hiding
var rdpValor = $telerik.findElement(container, "dateValor_wrapper");
rdpValor.style.display = "none";

// showing
var rdpValor = $telerik.findElement(container, "dateValor_wrapper");
rdpValor.style.display = "";

Regards,
Antonio Stoilkov
Telerik

 

 

[João]

Thank you Antonio it worked perfectly.