Search code examples
asp.netvb.netuser-controlswpf-controlsresponsive

How to show the same user control in different divs in a ascx file for responsiveness?

I have a control from a library registered in my other user control .ascx file and I would like to dynamically show it according to the screen size in different places in the code.

The RadMenu1 is the control in question, I do not have the original code for the control and I was not able to find a way to show and hide it just by using JavaScript based on the screen size in order to make it responsive. I could create a copy of the control, but I do not want to create a new control just for the sake of doing this.

This is a control from the Telerik.Web.UI library.

Thanks.

<%@ Control Language="vb" AutoEventWireup="false" Inherits="Aptify.Framework.Web.eBusiness.NavBar"
    CodeFile="navbarNew.ascx.vb" %>
<%@ Register TagPrefix="rad" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="cc1" Namespace="Aptify.Framework.Web.eBusiness" Assembly="AptifyEBusinessUser" %>

<nav class="navbar navbar-light p-0 d-md-none">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="flex-md-column flex-lg-row collapse navbar-collapse text-md-center" id="navbarTogglerDemo03" style="min-width: 200px;">
        <rad:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="True" EnableShadows="True" OnItemClick="RadMenu1_click" RenderMode="Lightweight" Flow="Vertical"></rad:RadMenu>
    </div>
</nav>

<rad:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="True" EnableShadows="True" OnItemClick="RadMenu1_click" RenderMode="Lightweight"></rad:RadMenu>
<cc1:User ID="User1" runat="server" />

I know two controls cannot have the same ID, therefore the code above gives an error saying that there is already another control with the same ID as RadMenu1.

Solution

  • Just change the control ID for each one like so

    <rad:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="True" EnableShadows="True" OnItemClick="RadMenu1_click" RenderMode="Lightweight"></rad:RadMenu>

<rad:RadMenu ID="RadMenu2" runat="server" EnableRoundedCorners="True" EnableShadows="True" OnItemClick="RadMenu2_click" RenderMode="Lightweight"></rad:RadMenu>

<rad:RadMenu ID="RadMenu3" runat="server" EnableRoundedCorners="True" EnableShadows="True" OnItemClick="RadMenu3_click" RenderMode="Lightweight"></rad:RadMenu>