Hi,

I Have Scenario, First IGGrid showing all records its working fine for me and  if  I select Particualr row in First IGGrid  to Bind Second IGGrid using MVC. 

First IGGrid Bind Code:

<script>

function EditRow(contactID) {
if (!contactID) { return; }
id = '@Url.Action("TeamTaskView", "TeamTaskScreen", new { Area = "" })' + '?contactID=' + contactID + '&type=internal';
window.open(url, "_blank", 'toolbar=0,location=0,menubar=0,scrollbars=1,resizable=1');
}

function initClientClaimsGrid(clientClaimsList) {
var $grid = $('#clinicalreview-clienttab-clientclaim-grid');
$grid.igGrid({
dataSource: clientClaimsList,
primaryKey: "contactID",
autoCommit: true,
autoAdjustHeight: true,
autoCommit: true,
columns: [
{ key: "contactID", hidden: true },
{ headerText: "Assigine", key: "Assiginee",width:"20%" },
{ headerText: "Description", key: "Description", width: "15%" },
{ headerText: "Status", key: "status", width: "5%" },
{ headerText: "StartDate", key: "StartDate", width: "10%" },
{ headerText: "EndDate", key: "EndDate", width: "15%" },
{ headerText: "Patient", key: "Patient", width: "20%" },
{ headerText: "Client", key: "Client", width: "15%" },
{ headerText: "ProviderName", key: "ProviderName", width: "10%" },
{ headerText: "PreScreen", key: "PreScreen", width: "15%" },
{ headerText: "ForensicDueDate", key: "ForensicDueDate", width: "15%" },
{ headerText: "Priority", key: "Priority", width: "10%" },

{
headerText: "", key: "Edit", dataType: "string", width: "10%", unbound: true, allowFiltering: false,
template: "{{if ${Assiginee} }}<input type='button' onclick='EditRow(${contactID})' value='Edit' class='delete-button'/>{{/if}}"
},

{
headerText: "", key: "Comment", dataType: "string", width: "10%", unbound: true, allowFiltering: false,
template: "{{if ${Assiginee} }}<input type='button' onclick='CommentRow(${contactID})' value='Comment' class='delete-button'/>{{/if}}"
},

],
autoGenerateColumns: false,
features: [
{
name: 'Updating',
editMode: 'none',
enableAddRow: false,
enableDeleteRow: false
},
{
name: 'Selection',
mode: 'row',
multipleSelection: false,
activation: false,
//rowSelectionChanged: showDetails
},
{
name: 'Sorting',
columnSettings: [{
columnKey: 'contactID',
allowSorting: false
}, {
columnKey: 'Assiginee',
currentSortDirection: 'ascending'
}]
},
{
name: 'Filtering',
columnSettings: [{
columnKey: 'contactID',
allowFiltering: false
}]
},
{
name: 'Paging',
pageSize: 10,
showPageSizeDropDown: false
}, {
name: 'Resizing'
}],
});
};
(function ($, ko) {
var $container = $('#clinicalreview-clienttab-clientclaim-container');
var id = "@id";

var ClientClaimsModel = function () {
var self = this;

$.ajax({
url: "@Url.Action("TeamTaskSearch", "TeamTaskScreen", new { Area = "" })",

data: { contactID: id }
}).done(function (data) {
initClientClaimsGrid(data);
}).fail(function (jqXHR) {
alert(jqXHR.responseText);
}).always(function () {
//$container.spin(false);
});
};

$.ajax({
url: "",
data: null
}).done(function (data) {
var viewModel = new ClientClaimsModel(data);
var part = document.getElementById("clinicalreview-clienttab-clientclaim-container");
ko.applyBindings(viewModel, part);
});

})(window.jQuery, window.ko);
</script>

First IGGrid Bind Controller :

public async Task<JsonResult> TeamTaskSearch()
{
var TeamTask = await this.handsService.GetTeamTask();

if (TeamTask.Data != null)
{
var jsonResult = this.Json(TeamTask.Data, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;

return jsonResult;

}
else
{
this.Response.StatusCode = (int)HttpStatusCode.InternalServerError;
return null;
}
}

Second IGGrid Bind code:

<script>

function initClientClaimsGrid(clientClaimsList) {
var $grid = $('#clinicalreview-clienttab-clientclaim-grid');
$grid.igGrid({
dataSource: clientClaimsList,
primaryKey: "contactID",
autoCommit: true,
autoAdjustHeight: true,
autoCommit: true,
columns: [
{ key: "contactID", hidden: true },
{ headerText: "Creator", key: "Assiginee",width:"20%" },
{ headerText: "Created", key: "Assiginee", width: "15%" },
{ headerText: "Due", key: "ForensicDueDate", width: "5%" },
{ headerText: "Started", key: "StartDate", width: "10%" },
{ headerText: "Ended", key: "EndDate", width: "15%" },
{ headerText: "Assigned To", key: "Patient", width: "20%" },
{ headerText: "Priority", key: "Client", width: "15%" },

],
autoGenerateColumns: false,
features: [
{
name: 'Updating',
editMode: 'none',
enableAddRow: false,
enableDeleteRow: false
},
{
name: 'Selection',
mode: 'row',
multipleSelection: false,
activation: false,
//rowSelectionChanged: showDetails
},
{
name: 'Sorting',
columnSettings: [{
columnKey: 'contactID',
allowSorting: false
}, {
columnKey: 'Assiginee',
currentSortDirection: 'ascending'
}]
},
{
name: 'Filtering',
columnSettings: [{
columnKey: 'contactID',
allowFiltering: false
}]
},
{
name: 'Paging',
pageSize: 10,
showPageSizeDropDown: false
}, {
name: 'Resizing'
}],
});
};
(function ($, ko) {
var $container = $('#clinicalreview-clienttab-clientclaim-container');
var id = "@id";

var ClientClaimsModel = function () {
var self = this;

$.ajax({
url: "@Url.Action("TeamTaskView", "TeamTaskScreen", new { Area = "" })",

data: { contactID: id }
}).done(function (data) {
initClientClaimsGrid(data);
}).fail(function (jqXHR) {
alert(jqXHR.responseText);
}).always(function () {
//$container.spin(false);
});
};

$.ajax({
url: "",
data: null
}).done(function (data) {
var viewModel = new ClientClaimsModel(data);
var part = document.getElementById("clinicalreview-clienttab-clientclaim-container");
ko.applyBindings(viewModel, part);
});

})(window.jQuery, window.ko);
</script>

Controller:

[HttpGet]
public async Task<ActionResult> TeamTaskView()
{

return this.View("_TeamTask_View");
}

Please help it.