Wednesday, 2 October 2013

SP.UI.ModalDailog on Client and Server side in SharePoint 2010

1.Open Alert with SharePoint ~ SP.UI.ModalDialog.showModalDialog


.ascx page

   function OpenWindow(title, url) {

        var html = document.createElement('h1');
        html.innerHTML = 'Thanks for your valuable suggestion.';
        var options = {
            html: html,
            title: title
        };
        SP.UI.ModalDialog.showModalDialog(options);
        //return false;
    }   


 <asp:ImageButton OnClick="imgbtnSend_Click" ID="imgbtnSend" runat="server" ImageUrl="~/_layouts/AlumniFBAPortal/images/proSend.jpg" />


Server side

  protected void imgbtnSend_Click(object sender, ImageClickEventArgs e)
        {

            StringBuilder sb = new StringBuilder(); 
            sb.Append("ExecuteOrDelayUntilScriptLoaded(function () {");
            sb.Append(string.Format("OpenWindow('Suggestion','{0}');", url)); 
            sb.Append("}, \"sp.js\");"); 

            Page.ClientScript.RegisterStartupScript(this.GetType(), "keyOpenMonPopUp", sb.ToString(), true); 
}   



2. open ModalPopUp Dialog on server side in SharePoint 2010

 <script type="text/javascript">
 function OpenWebPage(title, url) {
var options = {url: url,
title: title,
width: 600,
height: 400,
dialogReturnValueCallback: DialogCallback
};
SP.UI.ModalDialog.showModalDialog(options);
}

function DialogCallback(dialogResult, returnValue) {meesageId = SP.UI.Notify.addNotification(returnValue,
false);}

</script>

<table width="901px" border="0" align="left" cellpadding="0" cellspacing="0" style="background-color: White;"><tr><td colspan="5" align="left" style="height: 5px;"><input type="button" value="Open Modal Popup Dialog"id="btnAddVendors" onclientclick="return OpenModalPopupDialog('Growth Remarks Page','/_Layouts/GrowthApp/MyPage.aspx');"/><asp:Button ID="btnAddVendors" runat="server" Text="Add Vendors" CausesValidation="false"ToolTip="Click here to Add Vendor" />
</td></tr></table>

on the class.cs file 

btnAddVendors.Attributes.Add("onclick""return OpenModalPopupDialog('Edit Vendor','/_Layouts/GrowthApp/MyPage.aspx'')");




3.Open model dialog onClientclick event i SharePoint 2010



4.Refresh parent page when model dialog page is opened

When you want to refresh the parent page when user clicks on OK button on dialog page that you open from the parent page then you can use SP.UI.ModalDialog.RefreshPage

Usually we write this code in dialogReturnCallBack function.


       dialogReturnValueCallback: function(dialogResult) 
        { 
          SP.UI.ModalDialog.RefreshPage(dialogResult) 
        }

No comments:

Post a Comment