Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Hide / show div (Javascript) within RadPageView according to the value of RadioButtonList

1 Answer 773 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Lau
Top achievements
Rank 1
Lau asked on 23 Apr 2019, 07:17 AM

Hi all,

I have a div with Id="divColor". I want the div hide/shows according to the value of RadioButtonList with ID="rblColor"

div:

01.<div id="divColor" runat="server">
02.    <tr>
03.        <td align="right">
04.            <asp:Label runat="server" ID="Label11"></asp:Label>
05.        </td>
06.        <td>
07.            <telerik:RadColorPicker ID="color" runat="server" Enabled="true" SelectedColor='<%#System.Drawing.ColorTranslator.FromHtml(Eval("Color").ToString())%>'
08.                PaletteModes="HSV" CurrentColorText="(Color : {0})">
09.            </telerik:RadColorPicker>
10.        </td>
11.    </tr>
12.</div>

 

RadioButtonList:

1.<asp:RadioButtonList ID="rblColor" runat="server">
2.    <asp:ListItem Text="Del Tipo" Value="tipo" />
3.    <asp:ListItem Text="Personalizado" Value="perso" />
4.</asp:RadioButtonList>

 

If value=tipo the div is hide, else is show. I want to do in Javascript.

I've tried it in many ways, but it hasn't worked.

I leave the complete code below.

001.<telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="3600">
002.    <Scripts>
003.        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
004.        </asp:ScriptReference>
005.        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
006.        </asp:ScriptReference>
007.        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
008.        </asp:ScriptReference>
009.    </Scripts>
010.</telerik:RadScriptManager>
011.<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
012.</telerik:RadAjaxLoadingPanel>
013.<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
014.    <AjaxSettings>
015.        <telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">
016.            <UpdatedControls>
017.                <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
018.            </UpdatedControls>
019.        </telerik:AjaxSetting>
020.    </AjaxSettings>
021.</telerik:RadAjaxManager>
022.<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" AutoTooltipify="true">
023.</telerik:RadToolTipManager>
024.<telerik:RadWindow runat="server" ID="RadWindow_ContentTemplateDeleteNode" RestrictionZoneID="ContentTemplateZone" Modal="true"
025.    Width="500" Height="150" Title="Causa del borrado">
026.    <ContentTemplate>
027.        <asp:Label ID="Label9" runat="server" Text="Motivo del borrado:"></asp:Label>
028.        <br />
029.        <asp:TextBox ID="lmotivo" runat="server" Text="" Width="450" MaxLength="50"></asp:TextBox>
030.        <br />
031.        <br />
032.        <telerik:RadButton runat="server" ID="RadButton4" Text="Eliminar" OnClientClicking="DeleteNode">
033.        </telerik:RadButton>
034.        <telerik:RadButton ID="RadButton5" runat="server" Text="Cancelar" OnClientClicked="closeDeleteNode">
035.        </telerik:RadButton>
036.    </ContentTemplate>
037.</telerik:RadWindow>
038.<telerik:RadWindowManager runat="server" ID="RadWindowManager1">
039.</telerik:RadWindowManager>
040.<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
041.    <asp:PlaceHolder ID="placeholder" runat="server"></asp:PlaceHolder>
042.    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" OnTabClick="RadTabStrip1_TabClick">
043.        <Tabs>
044.            <telerik:RadTab Text="Datos generales" PageViewID="datosGenerales" Selected="True">
045.            </telerik:RadTab>
046.            <telerik:RadTab Text="Datos InHalt" PageViewID="datosInHalt">
047.            </telerik:RadTab>
048.            <telerik:RadTab Text="Nodos asociados" PageViewID="viewSubnodes">
049.            </telerik:RadTab>
050.            <telerik:RadTab Text="Zonas asociadas" PageViewID="viewZones">
051.            </telerik:RadTab>
052.            <telerik:RadTab Text="Traducciones del nombre" PageViewID="viewNombres">
053.            </telerik:RadTab>
054.            <telerik:RadTab Text="Datos de parada" PageViewID="viewStop" Enabled="False">
055.            </telerik:RadTab>
056.            <telerik:RadTab Text="Datos del display" PageViewID="viewDisplay" Enabled="False">
057.            </telerik:RadTab>
058.            <telerik:RadTab Text="Datos del Integrador" PageViewID="viewIntegrador" Enabled="False">
059.            </telerik:RadTab>
060.            <telerik:RadTab Text="Datos de sistema de comunicación" PageViewID="viewCom" Enabled="False">
061.            </telerik:RadTab>
062.            <telerik:RadTab Text="Macrolíneas" PageViewID="viewMacrolineas">
063.            </telerik:RadTab>
064.            <telerik:RadTab Text="Líneas" PageViewID="viewlineas">
065.            </telerik:RadTab>
066.        </Tabs>
067.    </telerik:RadTabStrip>
068.    <asp:Button runat="server" ID="btnDel" OnClick="DelClick" Style="display: none" />
069.    <asp:Button runat="server" ID="btn1" OnClick="actualizarPanel" Style="display: none" />
070.    <asp:Button runat="server" ID="btn2" OnClick="refrescarPanel" Style="display: none" />
071.    <asp:Button runat="server" ID="btnReZona" OnClick="SobreescribirZona" Style="display: none" />
072.    <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" Width="100%">
073.        <telerik:RadPageView runat="server" ID="datosGenerales">
074.            <asp:FormView runat="server" ID="Detalles">
075.                <ItemTemplate>
076.                    <table class="style1">
077.                        <tr>
078.                            <td align="right">
079.                                <asp:Label runat="server" Text="ID único"></asp:Label>
080.                            </td>
081.                            <td>
082.                                <b>
083.                                        <asp:Label ID="id" runat="server" Text='<%# Eval("Id") %>' locIgnore></asp:Label>
084.                                    </b>
085.                            </td>
086.                        </tr>
087.                        <tr>
088.                            <td align="right">
089.                                <asp:Label runat="server" Text="Nodo"></asp:Label>
090.                            </td>
091.                            <td>
092.                                <b>
093.                                        <asp:Label ID="num" runat="server" Text='<%# Eval("NodeId.Num") %>' locIgnore></asp:Label>
094.                                    </b>
095.                            </td>
096.                        </tr>
097.                        <tr>
098.                            <td align="right">
099.                                <asp:Label runat="server" Text="Tipo"></asp:Label>
100.                            </td>
101.                            <td>
102.                                <b>
103.                                        <asp:Label ID="tipo" runat="server" Text='<%# Eval("TipoNodo.Description") %>' locIgnore></asp:Label>
104.                                    </b>
105.                            </td>
106.                        </tr>
107.                        <tr>
108.                            <td align="right">
109.                                <asp:Label runat="server" Text="Nombre"></asp:Label>
110.                            </td>
111.                            <td>
112.                                <b>
113.                                        <asp:Label ID="nombre" runat="server" Text='<%# Eval("Nombre") %>' locIgnore></asp:Label>
114.                                    </b>
115.                            </td>
116.                        </tr>
117.                        <tr>
118.                            <td align="right">
119.                                <asp:Label runat="server" Text="Etiqueta"></asp:Label>
120.                            </td>
121.                            <td>
122.                                <b>
123.                                        <asp:Label ID="label" runat="server" Text='<%# Eval("Label") %>' locIgnore></asp:Label>
124.                                    </b>
125.                            </td>
126.                        </tr>
127.                        <tr>
128.                            <td align="right">
129.                                <asp:Label runat="server" Text="UTM Coord X"></asp:Label>
130.                            </td>
131.                            <td>
132.                                <b>
133.                                        <asp:Label ID="label1" runat="server" Text='<%# Eval("Punto.X") %>' locIgnore></asp:Label></b>
134.                            </td>
135.                        </tr>
136.                        <tr>
137.                            <td align="right">
138.                                <asp:Label runat="server" Text="UTM Coord Y"></asp:Label>
139.                            </td>
140.                            <td>
141.                                <b>
142.                                        <asp:Label ID="label2" runat="server" Text='<%# Eval("Punto.Y") %>' locIgnore></asp:Label></b>
143.                            </td>
144.                        </tr>
145.                        <tr>
146.                            <td align="right">
147.                                <asp:Label ID="lblColor" runat="server" Text="Color"></asp:Label>
148.                            </td>
149.                            <div id="divTextColor" runat="server">
150.                                <td>
151.                                    <asp:TextBox ID="TextBox1" runat="server" BackColor='<%#System.Drawing.ColorTranslator.FromHtml(Eval("Color").ToString())%>'
152.                                        Enabled="false" CssClass="bold"></asp:TextBox>
153.                                </td>
154.                            </div>
155.                            <div id="divLabelColor" runat="server">
156.                                <td>
157.                                    <asp:Label ID="lblColorTipo" runat="server" Text="El del Tipo" CssClass="bold"></asp:Label>
158.                                </td>
159.                            </div>
160.                        </tr>
161.                        <tr>
162.                            <td colspan="2" align="left" style="font-weight: bold">
163.                                <asp:Button ID="btnEdit" runat="server" CommandName="edit" Text="Modificar" Visible='<%# usuario().getPermiso(DatoSae3.code.PERMISO.NODOS,DatoSae3.code.ACCESS.WRITE) && visible %>'
164.                                />
165.                                <asp:Button ID="btnDelete" runat="server" CommandName="delete" Text="Eliminar nodo" Visible='<%# usuario().getPermiso(DatoSae3.code.PERMISO.NODOS,DatoSae3.code.ACCESS.WRITE) && visible%>'
166.                                    OnClientClick="return confirmCallbackFunctionDeleteNode()" />
167.                                <%--<ajax:ConfirmButtonExtender ID="fffff" runat="server" ConfirmText="Esto eliminará completamente el nodo. ¿Está seguro?"
168.                                        Enabled="True" TargetControlID="btnDelete" />--%>
169.                                    <br />
170.                                    <asp:Button ID="btnPosicion" runat="server" Text="Establecer Posición" Visible='<%# usuario().getPermiso(DatoSae3.code.PERMISO.NODOS,DatoSae3.code.ACCESS.WRITE) && visible%>'
171.                                        OnClick="btnPosicion_Click" />  
172.                                    <asp:CheckBox ID="chkPropagar" Checked="true" runat="server" Text="Propagar cambio a posiciones en ramales" ToolTip="Si marca este checkbox, se recalculará la posición del nodo en todas los ramales, secciones y rutas. Esto puede provocar que se modifique mucha información en Base de datos, pero mantiene la consistencia en las posiciones de los nodos"
173.                                    />
174.                                    <br />
175.                                    <asp:Button ID="btnNodosZona" runat="server" OnClick="btnNodosZona_Click" Visible='<%# usuario().getPermiso(DatoSae3.code.PERMISO.NODOS,DatoSae3.code.ACCESS.WRITE) && visible%>'
176.                                        Text="Seleccionar nodos de zona" />
177.                                    <br />
178.                                    <asp:Button ID="btnPuntos" runat="server" Text="Definir area" OnClick="btnPuntos_Click" Visible='<%# usuario().getPermiso(DatoSae3.code.PERMISO.NODOS,DatoSae3.code.ACCESS.WRITE) && visible && ((Convert.ToInt32(Eval("TipoNodo.Type")) == 5) || (Convert.ToInt32(Eval("TipoNodo.Type")) == 8)) %>'
179.                                    />
180.                            </td>
181.                    </table>
182.                </ItemTemplate>
183.                <EditItemTemplate>
184.                    <table class="style1">
185.                        <tr>
186.                            <td align="right">
187.                                <asp:Label runat="server" Text="ID único"></asp:Label>
188.                            </td>
189.                            <td>
190.                                <b>
191.                                        <asp:Label ID="id" runat="server" Text='<%# Eval("Id") %>' locIgnore></asp:Label>
192.                                    </b>
193.                            </td>
194.                        </tr>
195.                        <tr>
196.                            <td align="right">
197.                                <asp:Label runat="server" Text="Nodo"></asp:Label>
198.                            </td>
199.                            <td>
200.                                <asp:TextBox ID="Num" runat="server" MaxLength="10" Text='<%# Eval("NodeId.Num") %>' CssClass="bold"></asp:TextBox>
201.                                <b>
202.                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="num"
203.                                            ErrorMessage="*"></asp:RequiredFieldValidator>
204.                                        <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="num" ErrorMessage="1..65535"
205.                                            MaximumValue="65535" ForeColor="Red" MinimumValue="1" Type="Integer"></asp:RangeValidator>
206.                                    </b>
207.                            </td>
208.                        </tr>
209.                        <tr>
210.                            <td align="right">
211.                                <asp:Label runat="server" Text="Tipo"></asp:Label>
212.                            </td>
213.                            <td>
214.                                <b>
215.                                        <asp:Label ID="tipo" runat="server" Text='<%# Eval("TipoNodo.Description") %>' locIgnore></asp:Label>
216.                                    </b>
217.                            </td>
218.                        </tr>
219.                        <tr>
220.                            <td align="right">
221.                                <asp:Label runat="server" Text="Nombre"></asp:Label>
222.                            </td>
223.                            <td>
224.                                <asp:TextBox ID="nombre" runat="server" Text='<%# Eval("Nombre") %>' MaxLength="60" CssClass="bold"></asp:TextBox>
225.                                <b>
226.                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="nombre"
227.                                            ErrorMessage="*"></asp:RequiredFieldValidator>
228.                                    </b>
229.                            </td>
230.                        </tr>
231.                        <tr>
232.                            <td align="right" class="style2">
233.                                <asp:Label runat="server" Text="Etiqueta"></asp:Label>
234.                            </td>
235.                            <td class="style2">
236.                                <asp:TextBox ID="label" runat="server" Text='<%# Eval("Label") %>' MaxLength="10" CssClass="bold"></asp:TextBox>
237.                                <b>
238.                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="label"
239.                                            ErrorMessage="*"></asp:RequiredFieldValidator>
240.                                    </b>
241.                            </td>
242.                        </tr>
243.                        <tr>
244.                            <td align="right">
245.                                <asp:Label runat="server" ID="labX" Text="UTM Coord X</td>"></asp:Label>
246.                                <td>
247.                                    <asp:TextBox ID="X" runat="server" MaxLength="25" Text='<%# Eval("Punto.X") %>' CssClass="bold"></asp:TextBox>
248.                                    <b>
249.                                            <asp:RequiredFieldValidator ID="XReqValidator" runat="server" ControlToValidate="X"
250.                                                ForeColor="Red" ErrorMessage="*"></asp:RequiredFieldValidator>
251.                                            <asp:RangeValidator ID="XRangeValidator" runat="server" ControlToValidate="X" ErrorMessage="0..1207959551"
252.                                                ForeColor="Red" MaximumValue="1207959551" MinimumValue="0" Type="Double"></asp:RangeValidator>
253.                                            <asp:RegularExpressionValidator ID="XRegExpValidator" runat="server" ControlToValidate="X"
254.                                                ErrorMessage="X°X'X''" ForeColor="Red" ValidationExpression="^[-]*\d+[°º]\s*\d+['´`]\s*\d+[,.]?\d*['`´]{2}\s*$"
255.                                                Enabled="false"></asp:RegularExpressionValidator>
256.                                        </b>
257.                                </td>
258.                        </tr>
259.                        <tr>
260.                            <td align="right">
261.                                <asp:Label runat="server" ID="labY" Text="UTM Coord Y"></asp:Label>
262.                            </td>
263.                            <td>
264.                                <asp:TextBox ID="Y" runat="server" MaxLength="25" Text='<%# Eval("Punto.Y") %>' CssClass="bold"></asp:TextBox>
265.                                <b>
266.                                        <asp:RequiredFieldValidator ID="YReqValidator" runat="server" ControlToValidate="Y"
267.                                            ForeColor="Red" ErrorMessage="*"></asp:RequiredFieldValidator>
268.                                        <asp:RangeValidator ID="YRangeValidator" runat="server" ControlToValidate="Y" ErrorMessage="0..1207959551"
269.                                            ForeColor="Red" MaximumValue="1207959551" MinimumValue="0" Type="Double"></asp:RangeValidator>
270.                                        <asp:RegularExpressionValidator ID="YRegExpValidator" runat="server" ControlToValidate="X"
271.                                            ErrorMessage="X°X'X''" ForeColor="Red" ValidationExpression="^[-]*\d+[°º]\s*\d+['´`]\s*\d+[,.]?\d*['`´]{2}\s*$"
272.                                            Enabled="false"></asp:RegularExpressionValidator>
273.                                    </b>
274.                            </td>
275.                        </tr>
276.                        <tr>
277.                            <td align="right">
278.                                <asp:Label runat="server" ID="Label12" Text="Color"></asp:Label>
279.                            </td>
280.                            <td align="right">
281.                                <asp:RadioButtonList ID="rblColor" runat="server">
282.                                    <asp:ListItem Text="Del Tipo" Value="tipo" />
283.                                    <asp:ListItem Text="Personalizado" Value="perso" />
284.                                </asp:RadioButtonList>
285.                            </td>
286.                        </tr>
287.                        <div id="divColor" runat="server">
288.                            <tr>
289.                                <td align="right">
290.                                    <asp:Label runat="server" ID="Label11"></asp:Label>
291.                                </td>
292.                                <td>
293.                                    <telerik:RadColorPicker ID="color" runat="server" Enabled="true" SelectedColor='<%#System.Drawing.ColorTranslator.FromHtml(Eval("Color").ToString())%>'
294.                                        PaletteModes="HSV" CurrentColorText="(Color : {0})">
295.                                    </telerik:RadColorPicker>
296.                                </td>
297.                            </tr>
298.                        </div>
299.                        <tr>
300.                            <td colspan="2" align="left" style="font-weight: bold">
301.                                <asp:CheckBox ID="chkdegr" runat="server" Text="Ver Coordenadas en grados, minutos, segundos" OnCheckedChanged="chkdegr_changed"
302.                                    AutoPostBack="true" />
303.                            </td>
304.                        </tr>
305.                        <tr>
306.                            <td colspan="2" align="left" style="font-weight: bold">
307.                                <asp:Button ID="btnupdate" runat="server" Text="Guardar cambios" CommandName="update" />
308.                                <asp:Button ID="btncancel" runat="server" Text="Cancelar" CommandName="cancel" />
309.                            </td>
310.                        </tr>
311.                    </table>
312.                </EditItemTemplate>
313.            </asp:FormView>
314.        </telerik:RadPageView>

              ......

 

 

Many thanks in advance.

 

 

 

 

 

 

kaiwjwj

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 25 Apr 2019, 11:50 AM
Hello Lau,

You can check the following blog post that shows a possible way to attach to the change event of the RadioButtonList: https://juristr.com/blog/2008/06/attaching-client-side-event-handler-to/

Then you can use the Telerik Static Client Library to find the element and the jQuery shipped with Telerik to show/hide the div: 

function toggleDivVisibility(shouldShow) {
    var multipage = $find("<%= RadMultiPage1.ClientID %>");
    var pageviewElement = multipage.findPageViewByID("RadPageView1").get_element();
    var div = $telerik.findElement(pageviewElement, "divColor");
    var $div = $telerik.$(div);

    if (shouldShow) {
        $div.show();
    } else {
        $div.hide();
    }
}

<asp:RadioButtonList ID="rblColor" runat="server">
    <asp:ListItem Text="Del Tipo" Value="tipo" OnClick="toggleDivVisibility(true)" />
    <asp:ListItem Text="Personalizado" Value="perso" OnClick="toggleDivVisibility(false)" />
</asp:RadioButtonList>
 
<telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1">
    <Tabs>
        <telerik:RadTab Text="Tab 1"></telerik:RadTab>
        <telerik:RadTab Text="Tab 2"></telerik:RadTab>
        <telerik:RadTab Text="Tab 3"></telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
    <telerik:RadPageView ID="RadPageView1" runat="server">
        Page 1
         
         <div id="divColor" runat="server">
             <h2>some content</h2>
         </div>
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView2" runat="server">
        Page 2
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView3" runat="server">
        Page 3
    </telerik:RadPageView>
</telerik:RadMultiPage>


Additionally, you can add some custom script that on load checks the selected value and sets the visibility.

Regards,
Peter Milchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TabStrip
Asked by
Lau
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Share this question
or