RadGridView inside RadWindow

[Preeti]

Hi Team,

I have a requirement that
   1. we have placed a radgrid now which has 250 columns in it.
   2.we have a zoom-in /zoom-out functionality , when zoom-in we had used a radwindow were the radgrid that we are placing the usercontrol will appear in the radwindow, but we were not able to do any operation on that.
Following are the details that we were doing:

<telerik:radgrid id="" runat="server">
</telerik:radgrid>
<telerik:RadWindow ID="RadWindow2" runat="server" Modal="true" ReloadOnShow="false"
            Behaviors="Maximize,Pin" VisibleStatusbar="false" VisibleTitlebar="false" InitialBehaviors="Maximize,Pin"
            Left="0" Top="-10" Height="100%" Width="100%" OnClientShow="onRadWindowShow"
            AutoSize="true" AutoSizeBehaviors="Height,Width" BackColor="White" EnableEmbeddedBaseStylesheet="false"
            EnableEmbeddedSkins="false" KeepInScreenBounds="false">
            <ContentTemplate>
                <div id="popupdiv" style="left: 0; top: -10; size: auto; width: 100%; height: 100%;
                    background-color: White;">
                </div>
            </ContentTemplate>
        </telerik:RadWindow>
<asp:HiddenField ID="radWindowShowHide" runat="server" />

  function zoomInWindow()
    {                  
        var oWnd = $find("<%=RadWindow2.ClientID%>");
        var container = document.getElementById('griddiv');
        var content = document.getElementById('popupdiv');
        var dialog = document.getElementById('changediv');
        var table = document.getElementById('tablediv');
        table.style.display = 'none';
        dialog.removeChild(container);
        content.appendChild(container);
        oWnd.set_width(400);
        oWnd.set_height(630);
        oWnd.show();          
        var btn=document.getElementById('<%=ImageButton1.ClientID%>');
        var btn1=document.getElementById('<%=ImageButton2.ClientID%>');
        btn.style.display = 'none';
        btn1.style.display = 'block';
        var hdn1=document.getElementById('<%=radWindowShowHide.ClientID%>');
        hdn1.value="0";
    }
    
    function zoomOutWindow()
    {
        var oWnd = $find("<%=RadWindow2.ClientID%>");
        oWnd.Close();
        var btn=document.getElementById('<%=ImageButton2.ClientID%>');
        btn.style.display = 'none';
        var btn1=document.getElementById('<%=ImageButton1.ClientID%>');
        btn1.style.display = 'block';
        var container = document.getElementById('griddiv');
        var content = document.getElementById('popupdiv');
        var dialog = document.getElementById('changediv');
        var table = document.getElementById('tablediv');
        table.style.display = 'block';
        content.removeChild(container)
        dialog.appendChild(container);
        var hdn1=document.getElementById('<%=radWindowShowHide.ClientID%>');
        hdn1.value="1";        
    }
        
    function ShowHide()
    {
        var hdn1=document.getElementById('<%=radWindowShowHide.ClientID%>');
        var btn=document.getElementById('<%=ImageButton1.ClientID%>');
        var btn1=document.getElementById('<%=ImageButton2.ClientID%>');
        if(hdn1.value=="0")
        {
            btn.style.display = 'none';
            btn1.style.display = 'block';
        }
        else
        {

            btn.style.display = 'block';
            btn1.style.display = 'none';
        }
    }


Here when click on the image zoom-in only the radwindow was displaying grid just for view ,not able to do any save.
So we thought of putting the radgrid inside radwindow and when zoom-in only we have resize the radwindow.
but when we placed radgrid inside radwindow nothing displayed.
this radgrid is in usercontrol.
Please suggest on this, if you have any code snippet please do share.

Thank you,
Preeti

[Svetlina Anati]

Hi Preeti,

 I examined your  code but I am afraid I could not get your logic. In addition, there are missing parts of it, e.g other elements such as DIVs which you reference and use. What I see, however, is that you are moving elements in the DOM by referencing them by ID - if you want to manipulate RadWindow, please use its client API, e.g use set_contentElement instead of appendChild, etc.

If the problem persists, please prepare a fully runnable reproduction demo (there is no need to put database or 250 columns - put simply a fake proigrammatic datasource with a few columns, the RadWindow and the used configuration and javascript wired to the corresponding UI elements) and share the full working source code here along with very detailed reproduction instructions and some screenshots. Once I am able to build and debug a runnable demo on my side I will do my bets to help.

Regards,
Svetlina
the Telerik team