Passing data to parent window from Kendo popup window

2 posts, 0 answers
  1. John
    John avatar
    12 posts
    Member since:
    Apr 2011

    Posted 02 Mar 2018 Link to this post

    I am trying to pass data back from a Kendo window to the parent page or at least get a reference back to the parent page; but its not working.

    Any help resolving this would be appreciated. Everything works except I cannot get a reference to the parent page to pass data to it. the grid on the parent page is not getting populated. 

    <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 #' />"); 
                   
                }
                )
                .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 content of the Kendo Window

    @(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>");   
                })
                .DataSource(dataSource => dataSource
                        .Ajax()
                        .ServerOperation(false)
                        .Read(read =>
                        read.Action("AssociatesSearchResults", "Person")
                        .Data("getPeopleSearchCriteria").Type(HttpVerbs.Post)
                    )
                        ) 
                .NoRecords(n => n.Template("<div class='alert alert-danger'><h3 class='text-danger bold'>No records returned!</h3></div>")) 
                .Scrollable(s => s.Height("400px"))

     
    <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();  
           
            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 

     //finally close modal window
            var myWindow = $("#associatewindow");
            myWindow.data("kendoWindow").close(); 
                });
            }
            else {               
                $("#AssociateGrid").css("display", "none");
            }  
        })   
    </script>

     

  2. John
    John avatar
    12 posts
    Member since:
    Apr 2011

    Posted 02 Mar 2018 Link to this post

    I fixed this. There were typos and case-sensitivity issues. Example:

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

    Should be var assogridDS = $("#AssociateGrid").data("kendoGrid");

    "kendoGrid" is case sensitive. There were also other typos which have been fixed.

    Thanks.

Back to Top