[Solved] MVC Grid Master / Detail Ajax problem

[christopher collinson]

Hi, 

I am aware that many people have had the very same issue I am having, but none (sorry if I missed this) seem to have spelled out the actual problem very well.

Scenario. Load the grid by Calling Grid(Model) on the top level and then have child tables display on demand. The problem is that so far, this method creates lots of master / detail table rows. On the ajax version these detail rows (with a class of t-detail-row) are missing until you click the expand button.

Where the data is populated via the Grid(Model) method, the rows are there as a result of the server side rendering. Clicking the expand button just toggles the display style. The row expands and is empty. The ajax call doesnt fire at all. Verified via Chrome's Network monitoring.

If you then say Sort the grid  or page the data for example (anything to trigger an ajax reload of top level data). The detail rows are now missing and clicking on expand works as expected. If you do not populate the grid using Grid(Model) and instead just tell it the type data via Grid<MyModelClass>. This causes the grid to fire an ajax request and load the initial data. Sure enough, expanding works fine. In other words, until the top level data has been populated via a grid ajax event, master / detail will not work. 

The problem is that the grid on appearances only seems to support ajax client side master / detail views if ajax loaded the data originally. I need a kind of hybrid version where I populate server side and then use ajax to on demand load the detail views. Paging / Sorting / Filtering etc all work fine this way and it only (so far) appears to be the master / detail bit that doesnt support it.

I did try using jquery to remove the detail rows hoping this would help. It didnt. My assumption is the expand link is not binding correctly. 

This in my opinion is where most of the issues people are having are coming from. Your example page (client side) doesnt do an initial populate of the grid, you rely on the grid to fire an ajax request to load it. So example works just fine but people who populate get nothing working.

Please help.

Regards
Chris Collinson

[christopher collinson]

Having done some more digging. It is because the data item for the grid is undefined.

It first fails here.
if (this.detail && !$tr.next().hasClass('t-detail-row')) {
                var colSpan = 0;
                $.each(this.columns, function(){ if(!this.hidden){ colSpan++; } });

Because populating it with Grid(Model) causes the t-detail-row rows to be generated.

If I add jquery to remove the detail rows, it gets a little further and led me to the issue.

This line in the grid js file is where it is failing.

.cat(this.displayDetails(this.dataItem($tr)))

When it calls the "this.dataItem" function, it gets the index correctly, but as data is undefined, there is nothing for it to look up.

dataItem: function (tr) {
            return this.data[this.$tbody.find('> tr:not(.t-grouping-row,.t-detail-row,.t-grid-new-row,.t-group-footer)').index($(tr))];
        },

I am assuming the reason ajax loading version works is because it gets the JSON object from the server and stores this in (assuming) the jquery data store.

Short of "altering" the JS file to look up in the dom and create a JSON object from the row, I am not sure how to proceed.