Passing a Parameter Dynamically to a Dialog Action Button

Environment

Product	Telerik UI for ASP.NET Core Dialog
Progress Telerik UI for ASP.NET Core 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.

   Razor

       @(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)
       )

   Razor

       @addTagHelper *, Kendo.Mvc
   
       <kendo-button name="openDialogBtn" on-click="onClick">
           Open Dialog
       </kendo-button>
   
       <kendo-dialog name="dialog" title="Confirm Remove User" width="400" modal="true" visible="false">
           <actions>            
               <action text="Cancel"></action>
               <action text="Confirm" primary="true" action="onConfirmRemoveUser"></action>
           </actions>
           <content>
               <p>Are you sure you want to Remove this User?</p>
           </content>
       </kendo-dialog>

   Html

       <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 following REPL samples:

• Sample code with the Dialog HtmlHelper
• Sample code with the Dialog TagHelper

More ASP.NET Core Dialog Resources

• ASP.NET Core Dialog Documentation

• ASP.NET Core Dialog Demos

• ASP.NET Core Dialog Product Page

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

• Telerik UI for ASP.NET Core Forums

See Also

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

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

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

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base