Question

I have an ASP.NET page which includes markup and 3rd party controls (in this particular case Telerik controls) e.g.

<h1>Hello</h1>

<telerik:RadToolBar ID="toolbarCAD" runat="server" Skin="Web20" Height="30px" Width="300px" OnClientButtonClicked="OnClientButtonClicked">
    <Items>
      <telerik:RadToolBarButton runat="server" Text="Zoom In" ImageUrl="~/images/zoom_in.png" Value="cadZoomIn">
                    </telerik:RadToolBarButton>
    </Items>
</telerik:RadToolBar>

I only want to display this if an ActiveX control is installed. From another question I have a Javascript function (ActiveXOrNull) which successfully detects this so now I have replaced the above in my markup with:

<script type="text/javascript">
    var obj = ActiveXOrNull('CADViewX');
    if (obj == null) {
        WHAT DO I DO HERE
    }
</script>

How do I include the original markup in the Javascript function? Can I “include” another page or is there another method available?

Answer 1

If you put the control in a <div> tag

<div id="telerickControl">
    <telerik:RadToolBar.........
    </telerick:RadToolBar>
</div>

Then inside the javacript function you can put

    var obj = ActiveXOrNull('CADViewX');
    if (obj == null) {
        document.getElementById("telerickControl").style.display = "block";
    }

By Default, set the div to be display: none and then show it to the user if they have the ActiveX object.

This will hide the element of the page through the style property display. However, this will still render the control on the page, so the control will still be rendered.

EDIT

Updated answer suggested by Stilgar.