using the "DataTables hidden row details example" with Asp.Net MVC 4 and Razor

joeller

I am trying to build a table using Datatables that will open a sub-table under each row with a click. I am trying to use the "DataTables hidden row details example"

My model Req contains a property that represents an all the related FundDocs. Each FundDoc contains a property that represents all related FundDocLines. The top of the view shows the details of the specified Req. Then there is a table showing all of the FundDocs related to that Req.
I want to be able to click on each row of that table to expand it to show all of the FundDocLines related to each FundDoc. The code in the fnFormatDetails(oTable, nTr) function suggests that the Javascript is used to dynamically build a new table with rows related to the original rows. It appears to use the fnGetData function to get the data from the specified row of the table. However it refers to this data as aData[1], aData[2] etc.
I am not clear on what data the fnGetData is getting from the specified row of the table. Is it getting all of the data relating to the model as specified for that row of the table? How then would I get the array of related FundDocLines from the aData[i] values? Or is aData just an array of the contents of the fields of the table. Based on the example it appears to be the latter. So my question is then How can I use the model in Razor and fnGetData() to indicate from which row I need to get the rest of the model that was not shown on the initial row?

This is my mixed up code as far as I have been able to understand what I am doing
[code]
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '';
sOut += '';
sOut += '';
sOut += ' @Html.DisplayNameFor(model => model.RelatedFundDocs[0].RelatedFundDocLines[0].DoDIC) ';
sOut += '';
sOut += '';
sOut += ' @Html.DisplayNameFor(model => model.RelatedFundDocs[0].RelatedFundDocLines[0].LineItem) ';
sOut += '';
sOut += '';
sOut += ' @Html.DisplayNameFor(model => model.RelatedFundDocs[0].RelatedFundDocLines[0].OrigRDD) ';
sOut += '';
sOut += '';
sOut += ' @Html.DisplayNameFor(model => model.RelatedFundDocs[0].RelatedFundDocLines[0].FiscalYear) ';
sOut += '';
sOut += '';

@(item => Model.RelatedFundDocs[aData[0]] )
{
foreach( var innerItem in item.RelatedFundDocLines)
{ String sOut = "";
sOut+= "";
sOut+= @Html.DisplayFor(modelItem => innerItem.DoDIC) ;
sOut += "";
sOut += ""
sOut += @Html.DisplayFor(modelItem => innerItem.LineItem);
sOut += "";
sOut += @Html.DisplayFor(modelItem => innerItem.OrigRDD);
sOut += "";
sOut += "";
sOut += @Html.DisplayFor(modelItem => innerItem.FiscalYear);
sOut += " ";
}
sOut += '';
return sOut
}
sOut = sOut;
}
[/code]

I know it is very wrong but I am not clear how to fix it.

joeller

Instead of this I used the datatree JQuery UI plugin. But I was not able to get either the table or the sub tables to display as a data table. After a great deal of fiddling I found the fairly blatant error, fixed it, and all was right with the world and I was able to move on to other issues.

Now all of this was all done working from home during the winter storm. Today I zipped up my working project, copied it to disk, and brought it into work. I renamed the existing project, unzipped, the transported project and installed it in the projects folder. I again spent time working on further issues. However when I went back to run it I found that the code has lost all idea of how to render the dataTable/DataTree table.

There were no changes made to that view since it was working on Feb 14. Here is the Code
[code]

$(document).ready(function () {
$('#FundDocsView').dataTable({
"aaSorting" : []
});
$('#PRView').dataTable({
"aaSorting": []
});
$('#ContractsView').dataTable({
"aaSorting": []
});
$("#FundDocsView").treetable({ expandable: true });
$("#PRView").treetable({ expandable: true });
$("#ContractsView").treetable({ expandable: true });
});

[/code]

Here is a part of the view where the rendering fails.
[code]






@Html.DisplayNameFor(model => model.RelatedFundDocs[0].FundingDoc.FundDocNum)


@Html.DisplayNameFor(model => model.RelatedFundDocs[0].FundingDoc.Mod)


@Html.DisplayNameFor(model => model.RelatedFundDocs[0].FundingDoc.Type)


@Html.DisplayNameFor(model => model.RelatedFundDocs[0].FundingDoc.CCID)


@Html.DisplayNameFor(model => model.RelatedFundDocs[0].FundingDoc.CustomerID)






@foreach (var item in Model.RelatedFundDocs)
{


@Html.ActionLink(item.FundingDoc.FundDocNum.ToString(), "Details", "FundDocs", new { id=item.FundingDoc.FundDocID },null)


@Html.DisplayFor(modelItem => item.FundingDoc.Mod)


@Html.DisplayFor(modelItem => item.FundingDoc.Type)


@Html.DisplayFor(modelItem => item.FundingDoc.CCID)


@Html.DisplayFor(modelItem => item.FundingDoc.CustomerID)




@Html.DisplayNameFor(model => model.RelatedFundDocs[0].RelatedFundDocLines[0].DoDIC)


@Html.DisplayNameFor(model => model.RelatedFundDocs[0].RelatedFundDocLines[0].LineItem)


@Html.DisplayNameFor(model => model.RelatedFundDocs[0].RelatedFundDocLines[0].OrigRDD)


@Html.DisplayNameFor(model => model.RelatedFundDocs[0].RelatedFundDocLines[0].FiscalYear)


@Html.DisplayNameFor(model => model.RelatedFundDocs[0].RelatedFundDocLines[0].FMSCase)


foreach( var innerItem in item.RelatedFundDocLines)
{


@Html.DisplayFor(modelItem => innerItem.DoDIC)


@Html.DisplayFor(modelItem => innerItem.LineItem)


@Html.DisplayFor(modelItem => innerItem.OrigRDD)


@Html.DisplayFor(modelItem => innerItem.FiscalYear)


@Html.DisplayFor(modelItem => innerItem.FMSCase)


}
}



[/code]

I suspect there is some fairly simple explanation. If anyone could point it out to me I would be grateful.

joeller

After a week of work I simply deleted the entire project and reinstalled the one from home. This now works.