kendo window render as full page after submit

Question

I am opening a kendo.window containing a partial view. When I click OK, I want to save my modified data, close the window and reload the base page. For some reason, it doesn't work. It opens the partial view as a full page.

How can I fix this? What should I make my partial view return for it not to open as a page?

Thanks,

Here is what I have so far.

Base page:

<div id="windowBadgeIMGDiv" class="k-content">
    <div id="windowBadgeIMG" style="display:none">
</div>

<script type="text/javascript">
    function editDetails(id) {
        var windowBadgeIMG = $("#windowBadgeIMG");
        windowBadgeIMG.kendoWindow({
            modal: true,
            width: "950px",
            title: "Modify badge picture",
            content: {
                url: "/Home/BadgePicture",
                data: { id: id }
            },
            deactivate: function () {
            }
        });

        windowBadgeIMG.data("kendoWindow").center();
        windowBadgeIMG.closest(".k-window").css({ top: 100 });
        windowBadgeIMG.data("kendoWindow").open();
    }
</script>

Partial view:

<%using (Html.BeginForm("BadgePicture", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "ImgForm", name = "ImgForm" }))
{ %>
    <input type="hidden" name="hdnBadgeId" id="hdnBadgeId" value="<%= Model.Id%>" />
    <table>
        <!--My editable fields go here-->
        <tr>
            <td style="padding-top: 20px;" align="center" colspan="4">
                <button id="btnSubmit" type="submit"><asp:Label runat="server" Text="<%$ Resources:Global, Update %>" /></button>
            </td>
        </tr>
    </table>
<%} %>

Controller

    [HttpPost]
    public PartialViewResult BadgePicture(string[] hdnBadgeId, HttpPostedFileWrapper Image1)
    {
        //Do some work with the data
        return PartialView(model);
    }

UPDATE: My solution

Replace modal: true, by iframe: true, with content: "/Home/BadgePicture/" + id, and use a View instead of PartialView. To close the window on submit: Close Window from within External Content

You should post your answer as an answer, and accept that instead! Right now, your solution is lost inside your question, and the accepted answer doesn't actually solve your problem. — Hannele, Jun 12 '14 at 14:23

score 3 · Accepted Answer · answered Nov 06 '13 at 00:00

Do you mean that after clicking the save button, the result is that the data is posted then the response is rendered as the full page? Reading the code, it looks like that is what would happen because of the form post.

The browser will replace the view with the result of the post. You might want to try making the kendo window use an iframe so that the result of the post is constrained to the iframe. However, if you do that, then your partial should be a full HTML page instead of a partial since it will be rendered in its own iframe. http://docs.kendoui.com/api/web/window#configuration-iframe

Or, you would have to AJAX post your window data instead of using a form post, then replace the contents of the kendo window.

Thanks for your answer. I was under the impression that I couldn't AJAX Post a file upload (never made it work, anyway). And was hopping to avoid the iframe, but I guess there is no way around it? — GaZ, Nov 06 '13 at 15:56
I hadn't seen that kendo had iframe property for kendo window. I works. NOW how can I make the window close itself when I click submit? — GaZ, Nov 06 '13 at 16:31

score 0 · Answer 2 · edited May 23 '17 at 11:50

It may not be exactly the same problem, but for me this was actually a manifestation of this issue - the Kendo window AJAX request was actually being cancelled, and it was following a link URL instead. Difficult to trace, as the kendo window error event also wasn't being called in this instance, and I hadn't actually set up the link to which the browser was being navigated.

In my case, I was creating the window from a custom grid toolbar button:

@(Html.Kendo().Grid<SomeViewModel>()
    .Name("grid")
    .ToolBar(t =>
    {
        t.Custom().Text("Add Item").HtmlAttributes(new { id = "AddItem" });
        // would also get the current page as a default URL
    })

    ...
)

Then binding it via javascript:

$("#AddItem").click(function (e) {
    openNewKendoWindow(); // would open link URL in whole page
});

The fix was to add e.preventDefault(); to the click handler, although apparently return false; would work just as well:

$("#AddItem").click(function (e) {
    openNewKendoWindow();
    e.preventDefault();
});

This allows the Kendo window to open, while ignoring anything in the href attribute.

kendo window render as full page after submit

2 Answers2