[Solved] Ajax Controller action not firing for Detail View

[Reid]

Hello all,

I wanted to first mention that I have many grids in this MVC 3 application that are working fine using Select,  Inserts, Updates, Deletes etc.

The grid in question is my first experience with implementing the master/detail grids or embedded grids in MVC.  The hierarchy of the relationship is Import File -> Payments that come from that import -> Claims against the payment(s). 

So currently the main grid shows the filenames and statistics as rows with a nested payments grid showing payments  that were generated as a result of the file's import. (currently not showing the payments) Eventually as I work through this point the nested claims under the payments will work, for now the problem is that the Ajax SELECT controller action of the nested payments grid is not being called.  The view is a Razor view and based on the following Telerik Demo : Hierarchy Grid Demo.  There is a Tabset on the view, separating two grids that are identical in structure, just filtered in different ways. 

I am going to attach the files rather than post a lot of code here.  The files are the markup, the model classes and the controller.  The markup for the attached view is actually a Razor user control template that is being loaded as a partial view from the main view where the search edit's exist.  The data is being stubbed in the controller so I can assure there is payment data.  Again the controller action for the nested Payments grid is not being called, that is the issue.

Any suggestions would be appreciated.

Thanks,

Reid

[Daniel]

Hello Reid,

The problem seems to be caused by the property used for the detail Grid ID. At lease in the controller you provided, the ImportFilename contains a dot("ce120103.019") which is not valid and so the child Grid can't be found and initialized. Using a unique property with an ID that doesn't have invalid characters should resolve the problem.

Greetings,
Daniel
the Telerik team

[Reid]

Hi Daniel,

Ok I will re-visit this and make sure the ID is unique.  Since this post I have implemented it as a server side view to get it working.  I now have a view showing showing three levels; The import files -> The payments resulting from the file import -> claims associated with the payment(s).

It was a bit complicated in that I had to fabricate a facade layer as the data or model for the top layer and adjust the models to cascade correctly.  So now I am using a series of @helper methods in the Razor view, for instance this renders the top view or grid.

@ImportFileViewTemplate(this, Model.SearchResults.PaymentsClaimsModels)

In that method it renders the Payments in the details template

• DetailView(detailView => detailView.Template(payments => PaymentsViewTemplate(this, payments.CurrentPayments, payments.ImportFilename)))

That method as above renders the claims in the detail template:

• DetailView(claimsDetailView => claimsDetailView.Template(c => PaymentsClaimsViewTemplate(this, c.Claims, c.PaymentID)))

The disadvantage of this design is that there is no Ajax, so actions in the grid (soon to come) will redraw the entire page.  So I will convert this to client side again and at that time I will as you advise pay attention to the ID of each Payments Grid.  Hopefully the embedded Ajax method will be called.

The project now has an added spec to show grids in the content of a Treeview.  So they now want a list of unique dates of payments to show under the Import filename (top layer) then when clicked show the payments grid below it under each date.

If you happen to have any links to projects you or your staff created that might do something similar with a treeview and nested grids based on hierarchy model I would appreciate that.

Thanks,

Reid

[Daniel]

Hi Reid,

I am not sure if I understand correctly the exact scenario for the TreeView and Grid hierarchy. If you want to set the content of a TreeViewItem to be a Grid showing the related data you could:

1. Bind the TreeView to the top level model.
2. Use the TreeViewItem Content property to render the Grid.

I attached a sample project which implements this scenario. I hope it helps.


Regards,
Daniel
the Telerik team

[Reid]

Thanks for this Daniel.  For an update I have it all working in Razor listing as they want it with 4 levels.  I intend to revisit the Treeview portion so that as they click links (dates) they get those payments underneath in the Content of node.  I spent over a day on this before looking at the client and data binding examples.  There is nothing really in the examples that show how to bind to a model, then propogate that model or parts of it down to the grids in the nodes.

Thanks for the demo.

Reid

[Reid]

Hi again Daniel,

I have kind of gone full circle on this view from an initial Client bound grid that I wanted nested in a Treeview, to a Server bound grid no Treeview and back now to a Client Bound grid.  I finished the view using the server bound grid but it lacks Ajax integration so that when the user is viewing a list of payments under a parent grid that lists dates, the user can page the Payment records or the Claims records nested under each.  Without the Ajax the page refreshes and it doesn't work.  So that is why I am back to the client design,

Your point about the filenames having illegal chars was spot on, nothing worked until I masked that value into the grid.
I also wanted to mention this is a partial Razor view being loaded from a parent aspx view. 

Html.RenderPartial("UserControls/_FundsManagementControl", Model);

I now have the the design loading the upper level Filenames, and the next level of File Dates (payment dates in the file) loading using Ajax. The problem is the Payments grid (nested at the 3rd layer) shows but the Ajax Controller action is never called, same problem as the original post. 

I have spent hours reviewing the code and comparing it to the demo online linked here and have no answer at this point why the template does not fire the Ajax SELECT method of the Payments Grid. http://demos.telerik.com/aspnet-mvc/razor/grid/hierarchyajax.  I can replace the parameter going to the controller with an invalid field name and watch it bomb, which should mean that it is wired correctly.

All the grids are being named uniquely with the exception of the top level grid (the filenames) that is only rendered once. To rule oout that is the issue I am using a new Guid.ToString() on the name of each grid.

If you can offer any more suggestions here I would greatly appreciate it.  I have attached the View and Controller code.  The Controller code has been shortened for brevity.

I also attached two screen shots.  Each capturing the status bar URL when hovering over the grid header to sort the file dates and it's nested payments.  I did this because it appears that the FileName param and Date param show up as "ImportFileName" and "Date" as literal text, not the values they should represent.  Although the Ajax action that renders the dates works fine, again the problem is the payments.  When you click the header of the empty payments grid it redraws the page with no Ajax postback.


Thanks,
Reid

[Reid]

Daniel,

I have since had good success working through the client model.  The problems were two fold, the Payments grids Ajax action was not being fired because the "PaymentDate" parameter was not formatted correctly as a date time.


Thanks,
Reid

[Daniel]

Hi Reid,

I am not sure if I understand correctly that the problem is resolved but using a Guid to generate the name will not work in Ajax binding. The detail is serialized once on the Server so each child Grid will have the same Guid appended to the name. If there isn't a unique property in your model without invalid characters, I can suggest to create one on the client either in the OnComplete or in the OnRowDataBound event(if you are already using it to expand the first row). For example:

Html.Telerik().Grid<MasterModel>()
    .Name("MasterGrid")
    .ClientEvents(events=> events.OnRowDataBound("onRowDataBound"))
    .DetailView(detail => detail.ClientTemplate(
        Html.Telerik().Grid<ChildModel>()
            .Name("ChildGridName<#= ChildGridID #>")
            ....

var id = 0;
function onRowDataBound(e) {
    //genertate a unique identifier which is not part of the model
    e.dataItem.ChildGridID = id++;
    var grid = $(this).data('tGrid');
    expandFirstRow(grid, e.row);
}

Greetings,
Daniel
the Telerik team

[Reid]

OK Daniel,

Thanks for the information about the serialization, I would have not considered that.  The Grids are all rendering now correctly using just the vars from the parent template.  I am in the process of adding the hyperlinks (ActionLinks) to each level using the client model.  Much easier using a Server template for sure when it comes to conditional column displays.  So if for instance you want the ActionLink to work one way or another based on a condition on a column  i.e. (OnHold = true) or (OnHoldPaymentCount > 0), in the Server template that is easy, here is how I was doing it.

Server Action Links

columns.Template
(
@<text>

@if ( item.NumberOfPaymentsOnHold > 0 )
{
@Html.ActionLink(
"Release",
"ReleaseImportFilePaymentsByFilename",
"FundsManagement",
new
{
importFileName = item.FileName
},
new { @style = "color:white;" }
)
}
else
{
@Html.ActionLink(
"Hold", // linkText
"HoldImportFilePaymentsByFilename",
"FundsManagement",
new
{
importFileName = item.FileName
},
null
)
}
</text>
).Width(20);

Similar constructs were in place for the child layer grids in the Server model that worked fine, so again I am in the process of working in the ActionLinks in the revised Client Template.  The complication is the need to evaluate a field in the client template to display the ActionLink apprropiately.  Using functions I have had success so far passing in the DataKeys and getting back a formatted string (The ActionLink). 

columns.Bound(importFile => importFile.NumberOfPaymentsOnHold).ClientTemplate(ConditionalFileHoldReleaseActionLink("<#= NumberOfPaymentsOnHold #>", "<#= FileName #>")).Title("").Width(75).Filterable(false);

string ConditionalFileHoldReleaseActionLink(string NumberOfPaymentsOnHold, string fileName)
{
int numOfPaymentsOnHold;
int.TryParse(NumberOfPaymentsOnHold, out numOfPaymentsOnHold);
if ( numOfPaymentsOnHold > 0 )
{
return Html.ActionLink("Release", "HoldImportFilePaymentsByFilename", "FundsManagement", new { importFileName = fileName }, null).ToHtmlString();
}
else
{
return Html.ActionLink("Hold", "ReleaseImportFilePaymentsByFilename", "FundsManagement", new { importFileName = fileName }, null).ToHtmlString();
}
}

I also found this last night that I am going to implement to make ActionLinks with respect to columns cleaner.  It uses the GridColumnFactory as a generic type.

http://gedgei.wordpress.com/2011/07/02/telerik-mvc-grid-actionlink-column/ 

So the markup would end up looking like this for a standard ActionLink.

columns.ActionLink("Hold", "HoldImportFilePaymentsByFilename", "FundsManagement", (link) => new { importFileName = link.FileName, param2 = param2, etc... });


Thanks for the help on this!

Reid