[Solved] Problems with grid in editor template in collections

[Victor]

Hi!
We have been trying to use a grid in an editortemplate that is used inside a collection. That is, we have a structure like:

public class CollectionViewModel {
   List<GridViewModel> GridsViewModel {get;set;}
}

public class GridViewModel {

  List<GridRowClass> GridRows {get; set;}

}

 

public class GridsRowClass {

  Guid Id {get; set;}

  String GridRowProperty {get; set;}

}


This means that we, having custom editor templates for everything and a popup editor, end up with id:s like

GridsViewModel[0]_Grids_GridRowProperty

That in itself was the first problem since Asp MVC 3 would not bind those when posted to a GridRowClass. After some creative scripting in the OnSave and OnUpdate events, we solved that though (and some more server-side for ModelMetaData).

After most things now has started working as expected, we have one problem left - the grid will not populate the popup with the correct values, but use default ones.

Are the problems with collections known / are there any workarounds / have we missed something? Thanks!

(Also, when setting the name of the grid using ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty) instead of ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty) the popup buttons does not work (they link to # without any javascript seemingly active - the X button does work though)

/Victor

[Atanas Korchev]

Hello Victor,

 I am not really sure what the exact scenario is. Is there a chance to provide more details - some sample code or even a runnable project?

Regards,
Atanas Korchev
the Telerik team

[Victor]

Hi and thanks for the reply.

I was probably unclear, I will try to clarify (updated the classes in the first post to avoid some confusion).

1. We have a page containing a collection of grids. Using the classes from the first post that page uses CollectionViewModel as its view model
2. That view model has been filled with data for a few grids, each having a few rows
3. When we render the main page (1), either using Html.EditorForModel or by looping through the collection everything is rendered recursively using editor templates (each GridViewModel has an editor template which renders the grid, each GridRowClass has an editor template which renders the popup)
4. Given this setup we have two problems:
5. Based on the id/name generation, the data is not bound as expected in Asp MVC (each fields name is posted as GridsViewModel[0]_Grids_GridRowProperty - posting it as GridRowProperty only gives the expected behaviour
6. When pressing edit in one of the grid, the popup is populated with default values, not correct ones from the grid

Thanks
/Victor

[Atanas Korchev]

Hi Victor,

 I am afraid I still don't fully understand your scenario. Still I will try to suggest some things to investigate.

The problem may be caused by the fact that you are using two nested partial views. The first is probably named "Grid". I think this is the reason the id contains _Grid_. This can be verified if you try using a regular <table> element in that view instead of the Telerik grid. If the prefix remains then this is probably some ASP.NET MVC quirk. You can check this stackoverflow question which deals with partial view prefixes.

Regards,

Atanas Korchev
the Telerik team

[Victor]

Thanks again for the reply, I realize now this is very hard to explain in text.

So - I edited the last internal build using the GridEditingAjax as base. Switching to Razor and going to that page you can see some of the problems I was describing. This time though the popup editor shows nothing, I'm not sure why that is.

Anyway - the attached demo is a decent representation of what we are trying to do, any help would be very much appreciated!


Thanks again
/Victor

[Atanas Korchev]

Hello Victor,

 Unfortunately we are not sure why the popup is empty as well. I've managed to reproduce similar behavior without the grid. I modified EditingAjax.html like this:

@model DummyGridsViewModel
           
@for (int i = 0; i < Model.DummyGrids.Count; i++)
{
    <h2>A Grid</h2>
    @Html.EditorFor(m => Model.DummyGrids[i])
}

This is basically what the grid is doing internally for the editor template. Yet no editor was displayed at all. 

Probably this is a different problem than the original one. Is it possible to provide a project which shows the behavior which you observe in your real project? You can open a support ticket if you don't want to disclose any sensitive information.

Kind regards,
Atanas Korchev
the Telerik team

[Victor]

Hi again!

I'd say the problem is exactly the same unfortunately. Given an editortemplate for the row class (EditableProduct) the issues are the same as in the original post:

• When pressing edit the popup is shown but with default values
• When adding a record the data is not databound due to prefixes in the id/name attributes of the input fields

I attach an example editor template for EditableProduct which when dropped into Areas/Razor/Views/Shared/EditorTemplates gives the described behaviour. Just tell me if you rather want the full solution again.


About the code snippet you sent it is the same (apart from some styles) as the one in the original solution, so supposedly something is missing?
Thanks again for looking into this!
/Victor

[Atanas Korchev]

Hello Victor,

 Thanks for the update. I think I found something. Our client-side code failed to set the values in this particular case - mapping ProductName to Grid[0].ProductName failed.

 Find attached a hotfix build which should address this problem.

Regards,
Atanas Korchev
the Telerik team

[Victor]

Thank you for that update, that indeed solves the main problem.

The databinding issue still remains though, but is due to the fact that the each property name (in the ajax post) is prefixed with ~ "DummyGrids[0]." Is there any "good" way to solve this? We first solved this by removing the prefix in javascript before post and on replies, but I suppose there is a better way? Right now I'm thinking that adding a hidden field (<input name="prefix" value="@(ViewData.TemplateInfo.HtmlFieldPrefix)" />) in every relevant model could be a decent workaround, can you see a better way to handle this?

Thanks again for the help!
/Victor

[Atanas Korchev]

Hi Victor,

 I am not sure what you mean by data binding. After applying the fix the popup editor should have been populated properly by the grid as if you were using server editing (which worked even before the hotfix). Is that working at your side?

Do you mean that model binding is not working? If yes you can try using the [Bind] attribute and specify a prefix which should be ignored. As a last resort you can manually bind the values from the form collection.

Regards,
Atanas Korchev
the Telerik team

[Victor]

Hi!

That is the issue (model binding) I am talking about. Since the action method is the same for all grids and they use different prefixes (DummyGrid[0].  .. DummyGrid[4].) I dont think the attribute will solve it however. Attached is the updated solution with breakpoints and comments before the TryUpdateModel clauses in the controller.

Also - the issue still remains that removing the editortemplate makes the popup empty. The reason for that is that the TemplateDepth is incorrectly set when pre-rendering the popup for ajax (it works server-side). Creating a custom Object.cshtml template and setting the permitted TemplateDepth to 2 shows the expected content, but is not a good solution of course. The attached solution shows this too (but has renamed the editor template for EditableProduct to .cshtml2 to make sure it is not used.

/Victor

[Atanas Korchev]

Hello Victor,

 Unfortunately I cannot suggest a solution apart from doing manual model binding using the posted form values. Yes you can specify a prefix in TryUpdateModel but you have to deal with lots of different prefixes in the same action method. You either need more than one action method or a way to pass the current prefix so you can use it with TryUpdateModel.

I would like to note that this seems to be a limitation of ASP.NET MVC (model binding with different prefixes) rather than the Telerik Grid for ASP.NET MVC. 

As for the second issue - I managed to reproduce the same in server editing as well. The popup remained empty. The same happens even when there is no grid involved. I just used this in DummyGrid.cshtml:
@{
   for (var i = 0; i < 3; i++)
   {
       @Html.EditorFor(m => Model.Rows[i]);
   }
}
Of course after using EditableProduct.cshtml everything was rendered as expected (in the grid and in the simpler code). I am sending the modified project.

Could it be the issue described in this blog post?

Regards,
Atanas Korchev
the Telerik team

[Victor]

Hi again,

For the prefix issue, we will render the prefix in the editor template as a hidden input, thus making it possible to know what prefix should be used server-side.

And for issue #2 - you are absolutely correct, I get the same behaviour both client and server side, I was probably confused when trying all different options.

As for the linked issue, that is absolutely the same as the one I stumbeled on here, the problem here is that at least I think that the TemplateDepth (nesting level) should be 0 for the popup, no matter the complexity leading to the rendering of the grid.

And the reason that the popup shows when there is an editor template is that instead of Object.cshtml being called (stopping recursive rendering of properties since TemplateDepth > 1 and reverting to ModelMetadata.SimpleText (which is "0")) a specific editor template is being called rendering the whole model correctly.

As for the issue being the same without the grid, that is of course true, but I am not sure that that is the expected behaviour anyway. I would at least expect the popup content to be rendered the same as a blank page calling @Html.EditorForModel() where the model is the row class...


Anyway - thanks a lot for the help tracking down the issues we were experiencing and also fixing the most important one! We will now be able to get the behaviour we had problems with before.

/Victor

[Atanas Korchev]

Hello Victor,

I am not sure if setting TemplateDepth to zero before rendering the popup would not introduce some breaking change. Such as to stop rendering something which it used to. I wish ASP.NET MVC teplates were better documented (check the documentation of TemplateDepth for example).

By the way I found this blog post which explains the prefixing thing.

All the best,
Atanas Korchev
the Telerik team

[Victor]

Thanks for that extra link. Solves it in a similair way as the one I suggested, but without using the prefix. The problem is that the way I see it, removing the prefix will give several inputs/forms/etc with the same id as each other, so probably the prefix has to be there.

About templatedepth, I unfortunately havent got much concrete to suggest, I'm only saying that there to me is a problem. Anyway - the most important thing is that the issue is known so that one can relate to it. Getting a "0" only in the popup is confusing to say the least :-)

/Victor