Passing a Parameter Dynamically to a Dialog Action Button

Environment

Product	Telerik UI for ASP.NET MVC Dialog
Progress Telerik UI for ASP.NET MVC version	Created with the 2023.3.1010 version

Description

How can I pass a parameter dynamically to a specified action button of a Dialog before opening the Dialog?

Solution

1. Create a Button to open the Dialog when clicked.
2. Get a reference to the hidden Dialog within the Button's Click event handler.
3. Access the current actions configuration of the Dialog.
4. Set a new callback function of the Action and pass the desired parameter.
5. Call the setOptions() method to update the Dialog's actions settings.

6. Open the Dialog by using the open() method.

       @(Html.Kendo().Button()
           .Name("openDialogBtn")
           .Content("Open Dialog")
           .Events(ev=>ev.Click("onClick"))
       )
   
       @(Html.Kendo().Dialog()
           .Name("dialog")
           .Title("Confirm Remove User")
           .Content("<p>Are you sure you want to Remove this User?<p>")
           .Width(400)
           .Modal(true)
           .Actions(actions =>
           {
               actions.Add().Text("Cancel");
               actions.Add().Text("Confirm").Action("onConfirmRemoveUser").Primary(true);
           })
           .Visible(false)
       )
   

       <script>
           function onClick() {
               var customParam = "ABC123";
               var dialog = $('#dialog').data("kendoDialog");
               let dialogActions = dialog.options.actions;
               dialogActions[1].action = function() { // Update the callback function of the "Confirm" action.
                   return onConfirmRemoveUser(customParam);
               };
               dialog.setOptions({actions: dialogActions});
               dialog.open();
           }
   
           function onConfirmRemoveUser(idParam) {
               alert(idParam);
           }
       </script>
   

For a runnable example based on the code above, refer to the REPL example on passing a parameter dynamically to a specified action button of the Dialog.

More ASP.NET MVC Dialog Resources

• ASP.NET MVC Dialog Documentation

• ASP.NET MVC Dialog Demos

• ASP.NET MVC Dialog Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Dialog for ASP.NET MVC

• Server-Side API Reference of the Dialog for ASP.NET MVC

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base