Wednesday, February 1, 2012

Modal Dialog in SharePoint 2010

Modal dialog is new feature provided by SharePoint 2010. SharePoint 2010 uses modal dialog box for add and update items, perform administrator tasks without redirect current page.


To use modal dialog box you have to include client library SP.UI.ModalDialog. syntax for calling modal dialog box is shown below

SP.UI.ModalDialog.showModalDialog({
    url: "Url Of Page",
    title: "Title of Page",
    allowMaximize: true/false,
    showClose: true/false,
    width: in pixel e.g 800,
    height: in pixel e.g 600,
    dialogReturnValueCallback: callbackfunction
    });

Modal dialog box also takes SP.UI.DialogOptions as optional structure, syntax with structure is shown below

var Dialogoptions = SP.UI.$create_DialogOptions();

options.title = "PageTitle";
options.width = 600;
options.height = 800;
options.url = "PageUrl";
dialogReturnValueCallback: callbackfunction ;

SP.UI.ModalDialog.showModalDialog(options);

or you send options using simple generic object 

var genericoptions = {
    title: "PageTitle";,
    width: 800,
    height: 600,
   dialogReturnValueCallback: callbackfunction ,
    url: "PageUrl";};

SP.UI.ModalDialog.showModalDialog(options);


//Call back function syntax
function callbackfunction (dialogResult, returnValue) {

 }