Kendo window modal overlay not dissappearing on close....

[Terry]

Hi,

Im launching a modal from a kendo grid button, using kendo window.

It opens and displays its content fine, but when I click close, the overlay over the parent remains and I cant do anything.

Heres my code -

Parent View where grid exists -

<tbody>
        @(Html.Kendo().Grid<OriginGreen.Models.CompanySearchGridViewModel.CompanyModel>()
            .Name("CompaniesGrid")
            .Columns(columns =>
            {
                columns.Bound(c => c.Name).ClientTemplate("<a href='" + Url.Action("ManageCompanies") + "/#= CompanyId #'" + ">#= Name #</a>").Title("Name").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(100); //.Filterable(filterable => filterable.UI("nameFilter"));
                columns.Bound(c => c.Plan_Version).Title("Version").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(75);
                columns.Bound(c => c.Duration).Title("Duration").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(80);
                columns.Bound(c => c.Period).Title("Period").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(100);
                columns.Bound(c => c.Annual_Review_Year).Title("AR Year").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(75);
                columns.Bound(c => c.New_Legacy_Plan).Title("New").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(75);
                columns.Bound(c => c.Next_AR_Due_Date).Format("{0:dd/MM/yyyy}").Title("AR Date").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(75).Filterable(f => f.UI("DateFilter")).ClientTemplate(
                     "# if (Next_AR_Due_Date == null) { #" +
                        " N/A " +
                    "# } else { #" +
                      " #=kendo.toString(Next_AR_Due_Date, 'dd/MM/yyyy')# " +
                    "# } #"
                    );
                columns.Bound(c => c.Current_Status).Title("Status").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(100);
                columns.Bound(c => c.AssignedToUserName).Title("Assigned To").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(100);
                columns.Bound(c => c.BordBiaUserName).Title("BB Reviewer").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(100);
                columns.Bound(c => c.ThirdPartyUserName).Title("SGS Reviewer").HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).HtmlAttributes(new { @class = "customGridRowStyle" }).Width(100);
                columns.Command(command => command.Custom("Assign To User").Click("assignToUser")).HeaderHtmlAttributes(new { @class = "customHeaderStyle" }).Width(100);
                //columns.Template(x => { }).ClientTemplate("<a class='k-button k-button-icontext k-grid-EditSpecification sgs-ql-edit' title='Assign To User'  data-modal-title='Edit Specification' href='" + Url.Action("AssignToUser", "Search", new { id = "#= CompanyId #" }) + "'>Assign To User</a>").Width(100);
                //columns.Template(x => { }).ClientTemplate("<a class='k-button k-button-icontext k-grid-EditArticle' href='" + Url.Action("AssignToUser", "Search", new { id = "#= CompanyId #" }) + "'>Assign To User</a>").Width(100);
                //columns.Template(x => { }).ClientTemplate(@Html.ActionLink(Strings.QuickLinksAdd, "AssignToUser", "Search", new { id = "#= CompanyId #" }, new { data_popup_url = Url.Action("AssignToUser"), data_modal_title = "Assign Company to User" }).ToString()).Width(100);
            })
            .ToolBar(tools => tools.Excel())
            .Excel(excel => excel
            .FileName("Company_List_Admin.xlsx")
            .Filterable(true)
            .ProxyURL(Url.Action("Excel_Export_Save", "Plan"))
            .AllPages(true))
            .Events(e => e.DataBound("onRowBound"))
            .Pageable()
            .Sortable()
            .Scrollable()
            .Selectable()
            .Filterable(filterable => filterable
                .Extra(false)
                .Operators(operators => operators
                        .ForString(str => str.Clear()
                            .StartsWith("Starts with")
                            .IsEqualTo("Is equal to")
                            .IsNotEqualTo("Is not equal to")
                            .Contains("Contains")
                        )
                        .ForNumber(num => num.Clear()
                            .IsEqualTo("Is Equal To")
                            .IsNotEqualTo("Is Not Equal To")
                            .IsGreaterThan("Is Greater Than")
                            .IsLessThan("Is Less Than")
                        )
                        .ForDate(dt => dt.Clear()
                            .IsEqualTo("Is Equal To")
                            .IsNotEqualTo("Is Not Equal To")
                            .IsGreaterThan("Is Greater Than")
                            .IsLessThan("Is Less Than")

                        )
                    )
            )
            .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .ServerOperation(false)
                                    .PageSize(10)
                                    .Batch(true)
                                    .Model(model =>
                                    {
                                        model.Id(c => c.CompanyId);
                                    })
                                    .Read(read => read.Action("DisplayAdminSearchGrid", "Search").Type(HttpVerbs.Get))
                                )
        )


    </tbody>
    <div>

        @(Html.Kendo().Window()
            .Name("AssignToUser")
            .Title("AssignToUser")
            .Visible(false)
            .Actions(actions => actions
                .Close()
            )
            .Modal(true)
            .Draggable(true)
            .Width(500)
            .Height(250)
        )
    </div>

Script -

 

<script type="text/javascript">
    function assignToUser(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        var url = "/Portal/Search/AssignToUser/" + dataItem.id;
        var wnd = $("#AssignToUser").kendoWindow({
            title: "Assign To User",
            actions: ["Close"],
            content: url,
            visible: false,
            modal: true

        }).data("kendoWindow");
        wnd.center();
        wnd.open();
    }

    </script>

 

The view that displays in the modal is a partial view -

 

@model OriginGreen.Models.SearchAssignUserViewModel
@{
    ViewBag.Title = "AssignToUser";
}

@*<link href="~/Content/bootstrap.css" rel="stylesheet">
<link href="~/Content/custom_theme/jquery-ui.min.css" rel="stylesheet">
<link href="~/Scripts/Kendo_UI_2017_R2/styles/kendo.common-bootstrap.min.css" rel="stylesheet">
<link href="~/Scripts/Kendo_UI_2017_R2/styles/kendo.bootstrap.min.css" rel="stylesheet">*@

@using (Html.BeginForm("EditAssignedUsers", "Search", FormMethod.Post, new { enctype = "multipart/form-data", id = "formEditAssignedUser" }))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <div class="row">
            <div class="col-md-12">
                <h4>Assign To User</h4>
                <div>

                    Company ID : @Model.Id
                </div>
            </div>
        </div>
        <div class="row">
            @Html.LabelFor(model => model.BordBiaUsers, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4">
                @Html.DropDownListFor(model => model.BordBiaUserId,
                new SelectListItem[]
                {
                    new SelectListItem
                    {
                        Value = "",
                        Text = "Please Select...."
                    }
                }
                .Union(
                    Model.BordBiaUsers
                        .Select(i => new SelectListItem
                        {
                            Value = i.UserId.ToString(),
                            Text = i.FullName
                        })),
                new { @class = "form-control" })

            </div>
        </div>

        <div class="row">
            @Html.LabelFor(model => model.ThirdPartyUsers, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4">
                @Html.DropDownListFor(model => model.ThirdPartyUserId,
                new SelectListItem[]
                {
                    new SelectListItem
                    {
                        Value = "",
                        Text = "Please Select...."
                    }
                }
                .Union(
                    Model.BordBiaUsers
                        .Select(i => new SelectListItem
                        {
                            Value = i.UserId.ToString(),
                            Text = i.FullName
                        })),
                new { @class = "form-control" })

            </div>
        </div>
    </div>

    @Html.HiddenFor(model => model.Id)

    <div class="form-horizontal">
        <div>
            <div class="profilebuttons">
                <input type="submit" value="@Strings.SaveButton" class="btn btn-green btn-default" />
                @*<input type="button" value="@Strings.CancelButton" class="btn btn-green cancel-btn" data-action-url="@Url.Action("SearchAdmin")" />*@
                @Html.ActionLink(Strings.CancelButton, "Index", "Search", new { }, new { @class = "btn btn-green", id = "cancelProfile" })
            </div>
        </div>
    </div>
}

 

Any ideas on why the overlay remains when the modal closes?

Thanks.

[Veselin Tsvetanov]

Hi Terry,

The issue observed is caused by the fact that the Kendo Window is initialized twice. First, it is initialized by an HTML helper:

@(Html.Kendo().Window()
    .Name("AssignToUser")
    .Title("AssignToUser")
    .Visible(false)
    .Actions(actions => actions
        .Close()
    )
    .Modal(true)
    .Draggable(true)
    .Width(500)
    .Height(250)
)

Then it is re-initialized in JavaScript:

function assignToUser(e) {
    ..................
    var wnd = $("#AssignToUser").kendoWindow({
        title: "Assign To User",
        actions: ["Close"],
        content: url,
        visible: false,
        modal: true
    }).data("kendoWindow");
    ...............
}

What I would suggest you instead, is to get a reference to the already initialized Window and update its content using the refresh method. Thus, the assignToUser() will alter to:

function assignToUser(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var url = "/Portal/Search/AssignToUser/" + dataItem.id;

    var wnd = $("#AssignToUser").getKendoWindow();
    wnd.refresh({
        url: url
    });

    wnd.center();
    wnd.open();
}

Regards,
Veselin Tsvetanov
Progress Telerik

[Terry]

Thanks, that worked a treat, much appreciated.

Had a feeling it might be something like the wndow being initilaised more than once, but wasnt sure how to resolve it.

Terry.