Why won't my JQuery (Kendo) Popup windows update the form controls?

Question

I have a KendoGrid/details setup that I am trying to get working. A button in the grid opens a popup window where edits are made, and saved. The window is opening, and the template is getting the data, but the "click" event that I have wired up to the [Update] link isn't working. Looking around on the interwebs, I see that there is a problem with the popup (JQuery) not opening within the form, but I don't know how to attach the "form.append" to it, since it's a KendoWindow (I am new to both).

<!--Update Link code (in the KendoTemplate)-->
<div><A href="#" ID="lnkUpdate_0858">Update</A></div>

/*Popup code*/
function showDetails(e) {
    e.preventDefault();

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

    wnd.center().open();
}

/*Code to wire up the onClick event to the "update" link*/
function lnkUpdate_0858_OnClick() {
    return $("#lnkUpdate_0858").click(function() {
        alert("lnkUpdate_0858_OnClick");
    });
}

To add a little background, I am researching the problem. Looking at the KG page on Telerik's site [http://docs.telerik.com/kendo-ui/getting-started/web/window/overview], I can see that I should be able to add a custom click to the [.data("kendoWindow")]. I have taken a look at this code. While it does work for the demo, it does NOT for my page. I think that it is failing on my page because I am using a template, and the ID of the link is not something that the ".wrapper.find" method can locate. Also, the page suggests making use of ".appendto" to attach it (the kendoWindow) to the current form, which I have also done.

I am able to connect to the link click, and retrieve the values from the form fields on the popup window using the following code.

function ClickButton(ButtonID) {
    var x = $("[id$='tbAlertID']").val;
    $("[id$='" + ButtonID + "']").click();
}

function PopulateASPDotNetForm() {
    $("[id$='tbAlertID']").val(tbAlertID);
        ClickButton("btnUpdateAlert2");
    alert("PopulateASPDotNetForm" + tbAlertID);
}

function LoadDataFromPopupForm(PopupForm) {
    tbAlertID = PopupForm.find('.tbAlertID').val();
}

$(document).on('mousedown', ".LinkButton", function() {
    PopupForm = $(this).parent().parent();
    LoadDataFromPopupForm(PopupForm);
    PopulateASPDotNetForm();
    return;
});

I am running into a problem with the click of the ASP.net button from JQuery. The click event fires, and I can catch it in the Visual Studio debugger. When I do, the value of the fields changed in the JQuery popup window are not visible to ASP.net, but the values of fields changed outside of the JQuery popup window are visible.

Rahsaan Pringle Rahsaan Pringle · Accepted Answer · 2014-04-22T01:28:29

It wouldn't update because I wasn't doing it right. The KendoGrid control comes with the ability to attach commands, like "edit", "update", and "destroy". Using these, can attach managed buttons that will automatically update what the user sees in the grid. You still have to attach methods to the save event to update it in the database, but it was a lot easier than what I was trying to do.

Why won't my JQuery (Kendo) Popup windows update the form controls?

1 Answers