Passing data from Kendo window selected rows to parent grid - model-view-controller

Question

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

Answer 1

The problem was with typos and case-sensitivity. For example, I used .data("KendoGrid") instead of .data("kendoGrid"). I also had a typo in line
var selectedItem = entityAssociateGrid.dataItem(row)
it should have been
var selectedItem = entityAssociateGridDS.dataItem(row)