Open modal dialog from code behind

Question

I have a grid where you can select items, a drop down and a button. You can select an action from the dropdown and the click the button to open the modal dialog. I need to put the id of the selected items in the Session first (IMPORTANT!), and then I need to open a Modal Dialog from code behind. I have tried a few solutions but the client code always get executed before the server code.

Thanks in advance,

UPDATE

This is the code in the aspx page

<script language="javascript" type="text/javascript">
function ShowLightBox(pageUrl, lightBoxTitle, moreOptions) {
    options = {
        url: pageUrl,
        autoSize: true,
        title: lightBoxTitle
    }
    SP.UI.ModalDialog.showModalDialog(options);
    yPos = $(window.parent.document).scrollTop() + 20;
    $(".ms-dlgContent", window.parent.document).css({ position: 'fixed', top: yPos });
}
</script>


<telerik:RadComboBox ID="rcActions" runat="server" 
            DataTextField="Key" DataValueField="Value">
        </telerik:RadComboBox>
        <asp:Button ID="btnGo" runat="server" Text="GO" OnClick="btnGo_OnClick" />

    <telerik:RadGrid ID="radGrid1" runat="server" AutoGenerateColumns="false" AllowPaging="true" OnNeedDataSource="radGrid1_OnNeedDataSource"    OnItemCommand="radGrid1_ItemCommand" OnColumnCreated="radGrid1_OnColumnCreated"
        OnItemDataBound="radGrid1_OnItemDataBound">
        <MasterTableView AutoGenerateColumns="false" NoMasterRecordsText="<%$Resources:GlobalResource, noRecords%>">
            <Columns>
                <telerik:GridBoundColumn DataField="Id" UniqueName="Id" Visible="false">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="UnitNumber" UniqueName="UnitNumber" Visible="false">
                </telerik:GridBoundColumn>
                <telerik:GridClientSelectColumn UniqueName="Selected">
                </telerik:GridClientSelectColumn>
            </Columns>
            <NestedViewSettings>
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="Id" MasterKeyField="Id" />
                </ParentTableRelation>
            </NestedViewSettings>
            <NestedViewTemplate>
                <asp:Panel runat="server" Visible="false" ID="InnerContainer">
                   <!-- Some code -->
                </asp:Panel>
            </NestedViewTemplate>
        </MasterTableView>
    </telerik:RadGrid>

This is the code behind

    protected void btnGo_OnClick(object sender, EventArgs e)
        {
            try
            {
                var unitNumbers = new List<string>();
                foreach (GridItem unit in radGrid1.SelectedItems)
                {
                     var gridInfo = new GridInfo(unit);
                     unitNumbers.Add(gridInfo.UnitNumberCell.Text);
                }
                if (Session["UnitNumbers"] != null)
                     Session.Add("UnitNumbers", unitNumbers);
                 else
                    Session["UnitNumbers"] = unitNumbers;

                  // Here is where I want to put the code to open the lightbox, instead of       redirecting.
                  Response.Redirect("../Pages/MaintenanceDetails.aspx");
            }
            catch (Exception ex)
            {

            }
        }

I have tried using ScriptManager.RegisterStartupScript(GetType(),"hwa","ShowLightBox(param);",true); and it does not find the function.

Any other suggestion?

Answer 1

I had a similar issue and resolved it by moving the showModalDialog function call inside of ExecuteOrDelayUntilScriptLoaded:

ExecuteOrDelayUntilScriptLoaded(function () {
    SP.UI.ModalDialog.showModalDialog(options);
    ...
}, "sp.js")

Answer 2

If you are hooking up the modal using jquery in $(document).ready it will fire before the postback occurs. Try to not-hook that specific set of buttons, and call the dialog opener function from the code behind using ScriptManager.RegisterClientScript.

For example: https://stackoverflow.com/questions/11425887/open-showmodaldialog-of-javascript-from-asp-net-code-behind (note the use of the deprecated ClientScript, you should now use ScriptManager).

https://stackoverflow.com/questions/9538600/how-to-display-jquery-dialog-from-codebehind

If this doesn't work, please give more details on what kind of dialog are you using.

Answer 3

try the following:

        //make modal dialog script.  
        string script =  
            @"  
var modalDialog;  
function ShowDialogTest() {  
    var options = {  
        url: '/Pages/MaintenanceDetails.aspx',  
        tite: 'Random Letter Details',  
        allowMaximize: false,  
        showClose: false,  
        width: 800,  
        height: 600 };  
    modalDialog = SP.UI.ModalDialog.showModalDialog(options);  
}";  
        //register the script.  
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), ClientID, script, true);  

so it should look somthing like this:

    protected void btnGo_OnClick(object sender, EventArgs e)        
    {        
        try        
        {        
            var unitNumbers = new List<string>();        
            foreach (GridItem unit in radGrid1.SelectedItems)        
            {        
                 var gridInfo = new GridInfo(unit);        
                 unitNumbers.Add(gridInfo.UnitNumberCell.Text);        
            }        
            if (Session["UnitNumbers"] != null)        
                 Session.Add("UnitNumbers", unitNumbers);        
             else        
                Session["UnitNumbers"] = unitNumbers; 

             ClientScript.RegisterStartupScript(this.Page, Page.GetType(), "ShowDialogTest()",true); 

    }        
    catch (Exception ex)        
    {        

    }        
}   

    protected void Page_Load(object sender, EventArgs e)   
    { 
             //make modal dialog script.  
             string script =  
              @"  
              var modalDialog;  
              function ShowDialogTest() {  
              var options = {  
              url: '/Pages/MaintenanceDetails.aspx',  
              tite: 'Random Letter Details',  
              allowMaximize: false,  
              showClose: false,  
              width: 800,  
              height: 600 };  
              modalDialog = SP.UI.ModalDialog.showModalDialog(options);  
              }";  

        //register the script.  
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), ClientID, script, true);
  }

You need to register the script first on the onload event and then call the function with the button onclick event :)

also have a look at this, http://sharepointdevelopertopics.blogspot.co.uk/2011/04/using-sharepoint-2010-modal-dialog-in.html

hope it helps!