This is a migrated thread and some comments may be shown as answers.

Passing data from window to parent object.

3 Answers 1528 Views

Window

This is a migrated thread and some comments may be shown as answers.

Satish asked on 06 Mar 2012, 09:50 PM

I have a window with a list box and on the window close I'm trying to move the data from that list into a list in the parent window.

Here is the html snippet for the window content

<div id="selectcontactwindow" class="k-content">

<script type="text/javascript">

$(document).ready(function () {

$("#parent").val("Select an Agency Contact");

$("#contactselect").kendoComboBox([

{ text: "Contact 1", value: 1 },

{ text: "Contact 2", value: 2}]);

$("#add").click(function () {

var obj = $("#contactselect option:selected");

if ($("#selectedcontacts option[value="+obj.val()+"]").length == 0) {

$("#selectedcontacts")

.append($("<option></option>")

.prop("value", obj.val())

.text(obj.text()));

}

});

$("#remove").click(function () {

$("#selectedcontacts option:selected").remove();

});

</script>

<table>

<tr>

<td>

<label for="parent" class="k-label">Parent</label>

</td>

<td>

<input id="parent" disabled="disabled" type="text" class="k-textbox"/>

</td>

</tr>

<tr>

<td>

<label for="contactselect" class="k-label">Select a Contact</label>

</td>

<td>

<select id="contactselect" class="k-combobox" placeholder="Please select a contact" >

</select>

</td>

</tr>

<tr>

<td>

<label for="selectedcontacts" class="k-label">Selected Contacts</label>

</td>

<td>

<select id="selectedcontacts" multiple="multiple" class="k-list-container" style="width: 100%">

<option value="11">Contact 11</option>

<option value="12">Contact 12</option>

</select>

</td>

</tr>

<tr>

<td></td>

<td>

<button id="add" class="k-button">Add</button>

<button id="remove" class="k-button">Remove</button>

</td>

</tr>

</table>

</div>

Here is the code for the parent window.
     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title></title>
    <link href="../Styles/kendo.common.min.css" type="text/css" rel="stylesheet"/>
    <link href="../Styles/kendo.metro.min.css" type="text/css" rel="stylesheet"/>
    <script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/kendo.all.min.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <script type="text/javascript">
            $(document).ready(function () {
                var window = $("#window");
                $("#openwindow").click(function () {
                    window.data("kendoWindow").open().center();
                });
                if (!window.data("kendoWindow")) {
                    window.kendoWindow({
                        content: "selectcontact.htm",
                        title: "Select a Contact",
                        actions: ["Refresh", "Close"],
                        visible: false,
                        modal: true,
                        close: onClose
                    });
                }
                function onClose(e) {
                    $("#selectedcontacts option").each(function() {
                        $("#returnedcontacts")
                            .append("<option></option>")
                            .prop("value", $(this).val())
                            .text($(this).text());
                    });}
            });
        </script>
        <p id="window"></p>
        <button id="openwindow" class="k-button">Open Window</button>
        <br/>
        <select id="returnedcontacts" multiple="multiple" ></select>
    </div>
</body>
</html>

Any idea why the code in my onClose event isn't doing anything?

3 Answers, 1 is accepted

answered on 08 Mar 2012, 03:15 PM

Passing-data.zip

Hello Satish,

The reason for the problem is that the append method returns the parent element ( #returnedcontacts in your case), not the appended element ( <option> ). I suggest to change the onClose function in the following way:

function onClose(e) {

var options = $("#selectedcontacts option"); // stores all the options

$("#returnedcontacts").append(options); // appends the options to the container

}

For convenience I am attaching the modified project.

Greetings,
Alexander Valchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 01 Mar 2018, 09:35 PM

I am trying to pass data back from a Kendo window to the parent page but its not working. Here is my code. Any help would be appreciated

Any help resolving this would be appreciated. Everything works except the grid on the parent page is not getting populated. Javascript is crashing when it tries to populate the parent pages grid.

<h5 class="bold"><a name="associates"></a>Known Associates</h5>

<div id="GridMessage_Associate" style="display: none;"></div>

@(Html.Kendo().Grid<PeopleSearchResultDO>()

.Name("AssociateGrid")

.AutoBind(false)

.HtmlAttributes(new { style = "display:none;" })

.Columns(columns =>

{

columns.Bound(p => p.PersonId).ClientTemplate("#= PersonId #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].PersonId' value='#= PersonId #' />");

columns.Bound(p => p.FirstName).ClientTemplate("#= FirstName #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].FirstName' value='#= FirstName #' />");

columns.Bound(p => p.MiddleName).ClientTemplate("#= MiddleName #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].MiddleName' value='#= MiddleName #' />");

columns.Bound(p => p.LastName).ClientTemplate("#= LastName #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].LastName' value='#= LastName #' />");

columns.Bound(p => p.DOB).ClientTemplate("#= DOB #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].DOB' value='#= DOB #' />");

columns.Bound(p => p.Age).ClientTemplate("#= Age #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].Age' value='#= Age #' />");

columns.Bound(p => p.LastFourOfSSN).ClientTemplate("#= LastFourOfSSN #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].LastFourOfSSN' value='#= LastFourOfSSN #' />");

columns.Bound(p => p.AddressLine1).ClientTemplate("#= AddressLine1 #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].AddressLine1' value='#= AddressLine1 #' />");

columns.Bound(p => p.CityOther).ClientTemplate("#= CityOther #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].CityOther' value='#= CityOther #' />");

columns.Bound(p => p.GenderShortName).ClientTemplate("#= GenderShortName #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].GenderShortName' value='#= GenderShortName #' />");

columns.Bound(p => p.RaceShortName).ClientTemplate("#= RaceShortName #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].RaceShortName' value='#= RaceSHortName #' />");

}

)

.DataSource(

dataSource => dataSource

.Ajax()

.ServerOperation(false)

)

<br />

<input id="openassociates" value="Search for an Associate" class="btn btn-default btn-lg" />

@(Html.Kendo().Window()

.Name("associatewindow")

.Width(1400)

.Height(500)

.Draggable()

.Resizable()

.Title("Add New Person")

.Visible(false)

.Modal(true)

.Actions(actions => actions

.Minimize()

.Maximize()

.Close().Refresh()

)

.Content("loading associates ...")

.LoadContentFrom("LoadAssociatesForm", "Person")

.Events(ev => ev.Close("onClose"))

)

<div class="responsive-message"></div>

<script>

function onClose() {

$("#openassociates").show();

}

$(document).ready(function () {

$("#openassociates").bind("click", function () {

$("#associatewindow").data("kendoWindow").open();

$("#openassociates").hide();

});

</script>

<p>

<input type="submit" id="btnPersonSave" value="Save" class="btn btn-lg btn-primary" />

</p>

}

</div>

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

function indexAssociate(dataItem) {

var data = $("#AssociateGrid").data("kendoGrid").dataSource.data();

return data.indexOf(dataItem);

}

**Here is the popup Window content**

@(Html.Kendo().Grid<PeopleSearchResultDO>()

.Name("AssociateResultsGrid")

.AutoBind(false)

.HtmlAttributes(new { style = "display:none;" })

.Columns(columns =>

{

columns.Select().Width(50);

columns.Bound(p => p.PersonId).Hidden(true);

columns.Bound(p => p.FirstName).ClientTemplate("<strong>#: FirstName #</strong>");

columns.Bound(p => p.MiddleName).ClientTemplate("<strong>#: MiddleName #</strong>");

columns.Bound(p => p.LastName).ClientTemplate("<strong>#: LastName #</strong>");

columns.Bound(p => p.DOB);

columns.Bound(p => p.Age);

columns.Bound(p => p.LastFourOfSSN);

columns.Bound(p => p.AddressLine1);

columns.Bound(p => p.CityOther);

columns.Bound(p => p.GenderShortName);

columns.Bound(p => p.RaceShortName);

})

//there is a bug with persisting right now. We want to persist the selected rows even after paging or sorting.

//.PersistSelection()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Read(read =>

read.Action("AssociatesSearchResults", "Person")

.Data("getPeopleSearchCriteria").Type(HttpVerbs.Post)

)

//we are disabling paging and sorting until the issue with persisitng is resolved

//.PageSize(10)

//.Sortable()

)

.NoRecords(n => n.Template("<div class='alert alert-danger'><h3 class='text-danger bold'>No records returned!</h3></div>"))

//.Scrollable(s => s.Height("auto"))

.Scrollable(s => s.Height("400px"))

//.Pageable(p => p.PageSizes(new int[] { 5, 10, 20, 50, 100 }))

)

<p> <input type="button" id="btnAddAssociate" value="Add Selected Associate(s)" class="btn btn-default bold" style="display: none;" />

</p>

<script type="text/javascript">

$("#btnAddAssociate").click(function () {

$("#GridMessage_Associate").css("display", "none");

var entityGrid = $("#AssociateResultsGrid").data("kendoGrid");

var rows = entityGrid.select();

//finally close modal window

var myxxWindow = $("#associatewindow");

myxxWindow.data("kendoWindow").close();

if (rows !== undefined) {

rows.each(function (index, row) {

var selectedItem = entityGrid.dataItem(row);

// selectedItem has EntityVersionId and the rest of your model

var assogrid = $("#AssociateGrid").data("KendoGrid");

assogrid.dataSource.add(

{

PersonId: selectedItem.PersonId,

FirstName: selectedItem.FirstName,

MiddleName: selectedItem.MiddleName,

LastName: selectedItem.LastName,

DOB: selectedItem.DOB,

Age: selectedItem.Age,

LastFourOfSSN: selectedItem.LastFourOfSSN,

AddressLine1: selectedItem.AddressLine1,

CityOther: selectedItem.CityOther,

GenderShortName: selectedItem.GenderShortName,

RaceShortName: selectedItem.RaceShortName

});

$("#AssociateGrid").css("display", "block");

//clear selected items in parent grid

});

}

else {

$("#AssociateGrid").css("display", "none");

}

})

</script>

model-view-controller kendo-ui kendo-window

answered on 06 Mar 2018, 11:09 AM

Hi John,

The situation seems to be more complex than the one discussed here. Also it seems to be more related to using Kendo Grid and DataSource instead of Kendo Window. Plus, it is not clear what exactly is the error that you are getting.

I suggest you to open a new support ticket with more details on the case and, if possible, provide a locally runnable example that demonstrates the issue so that we examine it better.

Regards,
Ianko
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.