Passing data from window to parent object.

4 posts, 0 answers
  1. Satish
    Satish avatar
    10 posts
    Member since:
    Sep 2011

    Posted 06 Mar 2012 Link to this post

    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">
    <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?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 08 Mar 2012 Link to this post

    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!
  3. John
    John avatar
    12 posts
    Member since:
    Apr 2011

    Posted 01 Mar 2018 in reply to Alexander Valchev Link to this post

    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 />
            <br />
     
     
            <!-- Modal -->
     
            <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
  4. Ianko
    Admin
    Ianko avatar
    1940 posts

    Posted 06 Mar 2018 Link to this post

    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.
Back to Top