Jquery UI Dialog Important Points

This post is regarding JQuery UI Dialog,  with this post every one get some basic knowledge on Jquery UI Dialog . And you are in the position  to explain about Jquery UI Dialog. And clarify all 3W's (What,where,When) and 1H(How).


1. What is Jquery Dialog?

     It is a Jquery UI dialog plugin which is similar to ajax modal popup control. We add the dialog code at <script> tag

2. Syntax
               $(id).dialog({
                       
                  //Properties
                   
               });


3. Pros & cons

   Pros : Nested popup's (i.e., parent-child relationship)


4. Diff b/w Ajax Modalpopup & Jquery Dialog?

   In ajax Modalpopup - Nested popup is not possible

   In Jquery Dialog : It is possible.

5. Important Features

   5.1 : Open dialog in two ways
          5.1.1 :
                $('#<%=pnlId.ClientID %>').dialog('open')
         
          5.1.2 :  $("#<%=pnlId.ClientID %>").dialog({
                       
                        //Properties
                 
                });

   5.2 : Remove existing styles as per our requirement
   Ex :   // Removing and hiding Jquery Dialog classes
                $(".ui-corner-all").removeClass("ui-dialog-titlebar ui-widget-header ui-draggable-handle");
                $('button[title=Close]').removeClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close");
                $('button[title=Close]').hide();
                $(".ui-dialog-title").hide();
                // End

   5.3 : Add dialog to form
          open: function (type, data) {
                        $(this).parent().appendTo("form");
                    }
          If not added to form events are not firing
   5.4 : Properties
          5.4.1 : Set resizable either true or false Ex : resizable:false
          5.4.2 : Set draggable either true or false Ex : draggable :false
          5.4.3 : Set width and height and many more.

   5.5 : Close the dialog
            $('#<%=pnlId.ClientID %>').dialog('close');

   5.6 : Destroy the values in popup
         $('#<%=pnlId.ClientID %>').dialog('destroy');

   5.7 : Even Jquery UI Dialog call from Gridview row command event using ScriptManager,ClientScript at code behind.


I hope this article help you to reduce the time for finding Jquery UI Dialog solution.

Happy Coding :)