将数据从Kendo窗口选定的行传递到父网格

时间:2018-03-01 21:32:37

标签: model-view-controller kendo-ui kendo-window

我正在尝试将数据从Kendo窗口传回父页面,但它无法正常工作。这是我的代码。任何帮助将不胜感激

任何帮助解决这个问题将不胜感激。一切正常,但父页面上的网格没有填充。 Javascript在尝试填充父页面网格时崩溃。

 <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**

    <script type="text/javascript">

function getPeopleSearchCriteria() {

    var searchInput = {
        FirstName: $("#PeopleSearchForm").find("#PeopleSearchInput_FirstName").val(),
        MiddleName: $("#PeopleSearchForm").find("#PeopleSearchInput_MiddleName").val(),
        LastName: $("#PeopleSearchForm").find("#PeopleSearchInput_LastName").val(),
        LegalFullName: $("#PeopleSearchForm").find("#PeopleSearchInput_LegalFullName").val(),
        Address1: $("#PeopleSearchForm").find("#PeopleSearchInput_Address1").val(),
        Address2: null,
        Address3: null,
        StateId: $("#PeopleSearchForm").find("#PeopleSearchInput_StateId").val(),
        PostalCode: $("#PeopleSearchForm").find("#PeopleSearchInput_PostalCode").val(),
        PhoneNumber: $("#PeopleSearchForm").find("#PeopleSearchInput_PhoneNumber").val(),
        DateOfBirthStart: $("#PeopleSearchForm").find("#PeopleSearchInput_DateOfBirthStart").val(),
        DateOfBirthEnd: $("#PeopleSearchForm").find("#PeopleSearchInput_DateOfBirthEnd").val(),
        GenderId: $("#PeopleSearchForm").find("#PeopleSearchInput_GenderId").val(),
        EthnicityId: null,
        LastFourOfSsn: $("#PeopleSearchForm").find("#PeopleSearchInput_LastFourOfSSN").val(),
        RaceId: $("#PeopleSearchForm").find("#PeopleSearchInput_RaceId").val(),
        CaseId: $("#PeopleSearchForm").find("#PeopleSearchInput_CaseId").val(),
        DocketNumber: $("#PeopleSearchForm").find("#PeopleSearchInput_DocketNumber").val(),
        CaseOpenStartDate: $("#PeopleSearchForm").find("#PeopleSearchInput_CaseOpenStartDate").val(),
        CaseOpenEndDate: $("#PeopleSearchForm").find("#PeopleSearchInput_CaseOpenEndDate").val(),
        CasePersonTypeId: $("#PeopleSearchForm").find("#PeopleSearchInput_CasePersonTypeId").val(),

    }

    var model = {
        PeopleSearchInput: searchInput
    }

    return model;
}

@(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>

1 个答案:

答案 0 :(得分:0)

问题在于拼写错误和区分大小写。例如,我使用了.data("KendoGrid")而不是.data("kendoGrid")。我也有一个拼写错误

var selectedItem = entityAssociateGrid.dataItem(row)

应该是

var selectedItem = entityAssociateGridDS.dataItem(row)