gene
gene

Reputation: 2108

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();
}

Upvotes: 1

Views: 5985

Answers (2)

Cef
Cef

Reputation: 929

What I am doing is writing a partial into the page on the event that opens the dialog:

function OpenDialog() {
        $.ajax({
            url: '@Url.Action("ItemSearch", "Invoice")',
            data: {
                PartNumber: dataItem.Id,
                AltPartNumber: 1,
                Description: 1,
                Application: 1
            },
            success: function (result) {
                $("#SearchDialogContainer").html(result);
            },
            error: function (result) {
                alert("An error occurred.");
            }
        });
    }
    
<div id="SearchDialogContainer"></div>

And in the partial:

@model ParameterModel

@(Html.Kendo().Dialog()
    .Name("SearchDialog")
    .Title("Choose An Item To Add")
    .Content("<div class='k-textbox k-space-right search-wrapper'><input id='employees-search' type='text'  placeholder='Search employees' value='@Model.Property'/></div>")
    .Width(400)
    .Modal(true)
    .Visible(false)
    .Actions(actions =>
    {
        actions.Add().Text("Add Item").Primary(true);
        actions.Add().Text("Cancel");
    })
)

<script>
    $(document).ready(function () {
      $('#SearchDialog').data("kendoDialog").open();
    });
</script>

Upvotes: 0

Rafael
Rafael

Reputation: 742

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
}

Upvotes: 3

Related Questions