[Solved] Grid Edit Mode Popup with User control - sizing

[Paul Mc]

 

Hi

We are starting to play with the Rad Grid and investigating the Popup settings with a user control for inserts/updates to the grid.  The grid is being created in code during page init.

        With grd
            .ID = "grdMyGrid"
            .AutoGenerateColumns = False
            .AllowMultiRowEdit = False
            .AllowPaging = True
            .AllowSorting = True

            .GridLines = GridLines.None
            .ShowStatusBar = True

            .MasterTableView.PageSize = 10
            .MasterTableView.AllowMultiColumnSorting = False
            .MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top
            .MasterTableView.DataKeyNames = New String() {"MySerialNo"}
            .MasterTableView.TableLayout = GridTableLayout.Fixed
            .MasterTableView.Width = New Unit(100, UnitType.Percentage)

            .MasterTableView.EditFormSettings.UserControlName = "MyUserControl.ascx"
            .MasterTableView.EditFormSettings.EditFormType = GridEditFormType.WebUserControl
            .MasterTableView.EditMode = GridEditMode.PopUp
            .MasterTableView.EditFormSettings.PopUpSettings.Modal = True
            '.MasterTableView.EditFormSettings.PopUpSettings.Width = New Unit(750, UnitType.Pixel)
            .MasterTableView.EditFormSettings.CaptionFormatString = "Popup Title"


            '... create columns ...

When the user clicks the edit button to display the edit control, the user control is being displayed as anticipated.  However, because we haven’t declared a width for the popup window, the window borders are being drawn behind the user control at a fixed width of 400px plus 2px of border because the user control is 750px wide.  Obviously I know that we can set the width in code, but I was wondering if there is any way to have the popup auto size its width like it does with the height.

 

 

Thanks in advance.

Paul

[Princy]

Hello Paul,

You can try resizing the Pop Up width based on its content width in the OnPopUpShowing client event of the grid as shown below:
js:

var popUp;
function PopUpShowing(sender, eventArgs)
{

   popUp = eventArgs.get_popUp();
   popUp.style.width = popUp.children[1].children[0].style.width + 20 ; // to access the content

}

Thanks
Princy.

[Paul Mc]

Hi Princy

Thanks for taking the time to reply to me and sorry for the slow reply.

I dont think 'children' is supported with FireFox, but I think it has set me off in the right direction.  I'm playing with a couple of ideas  at the moment, based on your solution, and will come back to you once I have more info.

Thanks once again.

Paul

[Paul Mc]

For anyone interested, I've managed to get working in all browsers using the follow:

Usercontrol Page:

<div id="PopupSurround">
    <asp:Table ID="tbl" runat="server">

        <%-- Table content  --%>

    </asp:Table>
</div>

Grid page code behind:

With grdOperators
            .ID = "grdOperations"

            'Other grid properties described in previous post

            .ClientSettings.ClientEvents.OnPopUpShowing = "ResizeGridPopupWindow"

Javascript function:

function ResizeGridPopupWindow(sender, eventArgs) {

    var popUp = eventArgs.get_popUp();

    window.setTimeout(function() {
        var popupWidth = document.getElementById("PopupSurround").offsetWidth;
        popUp.style.width = popupWidth + "px";
    }, 0);
}

Hope it helps somebody.

Paul