Error while using Kendo Multi Select dropdrown in bootbox dialog in MVC

Question

I am trying to use MultiSelect dropdown in bootbox dialog in MVC but it is not working for me. I have tried putting the following code in bootbox.dialog in message

@(Html.Kendo().MultiSelect().Name("userRoles").DataTextField("RoleName").DataValueField("RoleID").Enable(true).BindTo(new SelectList(ViewBag.Roles, "RoleID", "RoleName")))

I know for multiselect dropdown the following code will work but i need to use the kendo multiselect and i have noticed that outside the bootbox dialog it is working but errors out when used inside

@Html.ListBox("userRoles", new SelectList(ViewBag.Roles, "RoleID", "RoleName"), new { @class = "form-control" })

It doesn't give any compile time error. Error given below :

"Uncaught SyntaxError: Unexpected end of input at eval ()"

Answer 1

As far I understand you need to render Kendo dropdown in the bootbox popup. You can do it as below:

Razor C#:

@{
    string htmlstring = "";
    htmlstring += "<select id='userRoles'>";
    foreach (Role role in ViewBag.Roles)
    {
        htmlstring += "<option value='" + role.RoleID + "'>" + role.RoleName + "</option>";
    }
    htmlstring += "</select>";
}

Script:

    <script>
        var renderString = "@Html.Raw(htmlstring)";
        var dialog = bootbox.dialog({
            title: 'A custom dialog with init',
            message: renderString
        });

        var required = $("#userRoles").kendoMultiSelect().data("kendoMultiSelect");

    </script>

Shown as: