Search code examples
asp.net-mvckendo-uidialogkendo-asp.net-mvc

How to send parameters to Html.Kendo().Dialog()?


I need to send a parameter to Html.Kendo().Dialog():

var diff = Num1 = Num2;
var msg = "The amiunt of " + diff + " will be subtracted" 

@(Html.Kendo().Dialog()
    .Title("Update")
    .Content("<p>" + msg + <p>")

However, that construct does not allow this, saying that "msg" does not exist in the current content

How can I do that?

Updated version:

if ((Math.abs(newAmount) < Math.abs(Amount)) && newAmount != 0) {


    $("#dialog").kendoDialog({
        width: "400px",
        title: "Split Ticket Confirmation",
        closable: true,
        modal: true,
        content: "<div style='text-align: center'>" + msg + "</div>",
        actions: [
            {
                text: 'OK',
                action: function (e) {
                    $('.modal-content').html('');
                    $('#modal-container').modal('hide');
                    SaveData();
                },
                primary: true
            },
            {
                text: "CANCEL",
                action: function (e) {
                    $('.modal-content').html('');
                    $('#modal-container').modal('hide');
                    return false;
                },
                primary: true
            }
        ]
    }).data("kendoDialog").open();
}
else {
    SaveData();
}

Solution

  • Using Razor HTML C# syntax, you can achieve it without errors by doing this:

    @{
         var msg = "The amiunt of " + diff + " will be subtracted";
    }
    

    Then just passing it regularly to the Content as you already did.

    If you are using JavaScript and really want to use that dialog inside script tags then you can do this:

    var dialog = $('#dialog'), undo = $("#undo");
    
    undo.click(function () {
        dialog.data("kendoDialog").open();
        undo.fadeOut();
    });
    
    function onClose() {
        undo.fadeIn();
    }
    var diff = Num1 = Num2;
    var msg = "The amiunt of " + diff + " will be subtracted";
    
    dialog.kendoDialog({
        width: "400px",
        title: "Update",
        closable: false,
        modal: false,
        content: "<p>" + msg + "<p>",
        actions: [
            {
                text: "OK",
                action: function(e){
                    // e.sender is a reference to the dialog widget object
                    // OK action was clicked
                    // Returning false will prevent the closing of the dialog
                    return false;
                },
                primary: true
            },
            { text: 'Action 2' },
            { text: 'Action 3', primary: true }
        ],
        close: onClose
    });
    

    To add another action per request, to the Html.Kendo.Dialog() construct you can do the following:

    @Html.Kendo.Dialog()
    .Actions(actions =>
    {
        actions.Add().Text("Ok").Action("onOkClick").Primary(true);
    })
    

    And inside your your script tag you create the JS method:

    function onOkClick(e)
    {
        //Do something
    }