Action Buttons in EJ 1 ASP.NET MVC Dialog

8 Aug 2017 / 2 minutes to read

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.

  • razor
  • @{
        List<string> actionButtons = new List<string>();
        actionButtons.Add("close");
        actionButtons.Add("maximize");
        actionButtons.Add("minimize");
        }
    
        @{
            Html.EJ()
                .Dialog("dialog")
                .Title("Dialog")
                .ActionButtons(actionButtons)
                .ContentTemplate(@<p>This is a Dialog</p>)
                .Render();
        }

    Action Buttons

    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.

  • razor
  • @{
        List<string> actionButtons = new List<string>();
        actionButtons.Add("close");
        actionButtons.Add("maximize");
        actionButtons.Add("minimize");
    	actionButtons.Add("collapsible");
    	actionButtons.Add("pin");
    	actionButtons.Add("mediaplay");
    	actionButtons.Add("search");
        }
    
        @{
            Html.EJ()
                .Dialog("dialog")
                .Title("Dialog")
                .ActionButtons(actionButtons)
    			.ClientSideEvents(event =>event.ActionButtonClick("playMedia"))
                .ContentTemplate(@<p>This is a Dialog</p>)
                .Render();			
        }
  • javascript
  • function playMedia(args)
    		    {
                   console.log(args.buttonID);
                }

    Action Buttons