Action Buttons

The Dialog widget provides the following action buttons.

  1. Close

  2. Maximize

  3. Minimize

  4. Pin/Unpin

  5. Collapse/Expand

You can display only the necessary buttons in the Dialog widget by configuring the actionButtons property.

  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module DialogComponent {
        $(function () {
            var dialogInstance = new ej.Dialog($("#dialog"), {
                    showOnInit: false,
                    actionButtons: ["close", "maximize", "minimize"]
                });
        });
    }

    Customizing Action Buttons

    We can customize the action buttons in dialog widget.

    You can add new action button in the dialog widget by configuring the actionButtonClick event.

  • javascript
  • //create dialog widget
                var dialogInstance = new ej.Dialog($("#dialog"), {
                    showOnInit: false,
                    actionButtons: ["close", "collapsible", "maximize", "minimize", "pin", "mediaplay", "search"],
    				actionButtonClick: "playMedia"
                });
                function playMedia(args)
    		    {
                   console.log(args.buttonID);
                }