This is a migrated thread and some comments may be shown as answers.

[Solved] Strongly typed ViewModels for ViewPage vs Telerik Grid

19 Answers 300 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Carl asked on 28 Apr 2011, 09:02 PM

I have encountered some difficulties exposing model properties using the .ClientTemplate() with AJAX binding of the Telerik Grid which have led me to ask the following question:

Must the strongly typed model passed to the ViewPage be the same strongly typed model that is passed to the Telerik Grid in Html.Telerik().Grid<GridDataModel>() ?

Or can they be different? For example, can a custom-shaped ViewModel, say CustomViewModel, be passed to the ViewPage where then the CustomViewModel has a bunch of different properties one of which is a complex property, say GridDataModel, representing the row data for the Telerik Grid. Now in this case, is it possible in the .ClientTemplate() to access other properties of the CustomViewModel or only the properties of the GridDataModel?

I can, of course, access properties of the GridDataModel in .ClientTemplate() but I have not yet been able to access any of the other properties from the CustomViewModel. So I'm wondering what should or should not be possible with the current design of the Telerik Grid?

19 Answers, 1 is accepted

answered on 03 May 2011, 09:03 PM

Thanks.

I have been able to access strongly-typed MVC ViewPage model properties in addition to the Telerik MVC Grid model properties. For example, here is a Telerik grid column .ClientTemplate() where I am able to access both:

.ClientTemplate("<span id='ReqRel_<#= ResourceIidKey #>'><a href='#' class='t-button' onclick='OnRequestReleaseResourceButtonClick(<#= ResourceIidKey#>)'> <#= ((RecordManagedByAgentIidRef == " + Model.PRC.PRO.PdsAgentIid.ToString() + ") ? 'Release' : 'Request' ) #> </a></span>");

Note that I have wrapped the <a> tag for the custom command button in a <span> tag so that on successful return from the AJAX post request I can modify the contents of the column to display appropriate feedback and remove the <a> tag button. Perhaps there is a more convenient way of doing this with fewer context changes...

However, my more important question concerns how to access both strongly-typed MVC ViewPage model properties in addition to Telerik MVC Grid model property in a column .EditorTemplateName("MyDropDownListTemplate") that contains a @Html.Telerik().DropDownList() ??? Despite trying various different approaches, I have not been successful using any strongly-typed ViewPage model properties passed to the .EditorTemplateName() file for the DropDownList(). I have been successful using a dynamic ViewBag approach, but the goal here is to be able to use a strongly-typed model approach. So any help with how to do so would be appreciated.

Meanwhile, in general, these issues raise the question about any Telerik MVC grid plans for custom columns analogous to those available for Telerik AJAX grid such as a custom column for dropdownlists, a custom column for hyperlinks, etc, etc, etc...

answered on 04 May 2011, 10:55 PM

Thanks. I'll try to restate the question.

Assume that there is a strongly typed ViewModel passed to the ViewPage called MyCustomViewModel with two complex properties called GridDataModel and AuxiliaryModel. Now, GridDataModel has properties corresponding to the columns of the grid called GridDataCol1, GridDataCol2, GridDataColX, etc, and AuxiliaryModel has various properties called AuxProp1, AuxProp2, AuxPropX, etc.

So MyCustomViewModel is passed into the page and MyCustomViewModel.GridDataModel is passed into the Telerik grid. I have already successfully demonstrated that I can use both a MyCustomViewModel.GridDataModel.GridDataColX and a MyCustomViewModel.AuxiliaryModel.AuxPropX in a Telerik grid column .ClientTemplate(), but I have NOT been able use both in a Telerik grid column .EditorTemplateName() file template. Is that possible using the strongly typed model approach, or only via a dynamic ViewBag approach?

answered on 08 Nov 2011, 12:58 AM

"The model of your editor template will be the model which the grid has been bound to. This means that you cannot access the model of the view page inside that editor template."

Correct, which introduces an inherent limitation of using EditorTemplates -- the inability to access other properties of the ViewModel. In both forms of Displaying -- Template() or ClientTemplate() -- I have access to other properties of the ViewModel (because I define the template right there in the View). However, when using a template for editing I do not (because I must go to a separate EditorTemplate file, outside of the scope of the View).

This can be quite frustrating when the EditorTemplate requires additional data to properly render. The best example that comes to mind is providing a DropDownList to the user. Using an EditorTemplate, I only have access to the current value, I do not have access to the possible options to select from. Examples given for handling DropDown editors require either Ajax binding (which is ridiculous if the list doesn't depend on user input) or slapping data onto the ViewData/ViewBag, which breaks any kind of strongly-typed ViewModel management. ASP.NET MVC introduced the ability to pass additional ViewData to an EditorTemplate (I think in v2), but there's no way in the Telerik API to do this.

answered on 08 Nov 2011, 04:21 PM

Yes, you are using the ViewData/ViewBag to pass data to the EditorTemplate, but the data is attached to the ViewData/ViewBag in the controller, completely separate from the View's strongly-typed Model. I'm a bit of a stickler of having all data for a View in a ViewModel, but I can't have my DropDownList options on my ViewModel, because it's inaccessible from the EditorTemplate.

The direct API for MVC's EditorFor() functionality allows to pass additional view data to an EditorTemplate (http://msdn.microsoft.com/en-us/library/ff406462(v=VS.100).aspx). It's true the template accesses the data via the ViewData dictionary, but at least I can hand off the data from my ViewModel at the calling location. Something like this would work perfectly:

cols.Bound(vm => vm.PersonID).EditorTemplateName("Person", new { peopleOptions = Model.PeopleOptions });

Where I can pass additional data to the editor template from my Model object, instead of via weakly-typed ViewData data assigned directly in the Controller.

I know it's a bit nit-picky, but I've been thoroughly impressed with the Telerik MVC controls thus far and this jumped out at me.

answered on 09 Nov 2011, 08:23 AM

Hello

Carl, there seems to be a misunderstanding. Strongly-typed editor templates are supported even now. What is not supported is passing additional data to the template the way Kenneth suggests. It is possible to pass it if you set in the controller beforehand:

ViewData["peopleOptions"] = model.PeopleOptions;

Kenneth, I see your point and it makes a lot of sense. Perhaps we should provide this data via a different setting - something like EditorViewData etc. I am logging this as a feature request and we would try to squeeze it in the Q3 release since it is not a complex implementation. I have also updated your Telerik points.

Regards,
Atanas Korchev
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

answered on 09 Nov 2011, 05:41 PM

Hello,

Carl, I am not sure I fully understand you. Do you want to have a different type in the editor template than the one to which the grid is bound to? If yes then I would agree with Kenneth - this is not supported by ASP.NET MVC. If this is not what you mean please paste a few lines of code to illustrate your idea.

All the best,

Atanas Korchev
the Telerik team

answered on 10 Nov 2011, 06:17 PM

I think part of the problem here may be some differences of opinion about what a 3rd party tool/control company should or should not be doing. My opinion is that the whole purpose of the 3rd party company is (1) to do what Microsoft does not do, and (2) to do better what Microsoft does not do well enough.

So the question of whether something is "supported by ASP.NET MVC" to me seems to be an irrelevant question. Does it mean that Microsoft has not yet implemented it? If so, then Telerik should implement it if there are sufficient requests for the feature. Or does it mean that under no circumstances does a particular framework (in this case ASP.NET MVC) permit development of this or that feature? And if that's the case, then whatever happened to all the brilliant software engineers who like to believe that it's always possible to invent a work-around past the problem or deficiency?

Just some general discussion to express my opinion. I would argue that the 3rd party tools company should be building the tools that Microsoft does not. And the features added by the 3rd party company on top of the Microsoft features should be anything that makes the tools controls and framework faster to learn, easier to use, more productive for coding and debugging.

In the context of this forum thread, one of the problematic areas I continue to struggle with is how to use many different strongly typed view models in a complicated view page with multiple Telerik grids in a hierarchy of grids where each grid has its own view model, and each grid has its own client and editor templates. In an ideal development framework, I would have strongly typed view models in all senses (see previous definition in earlier post) for all the different models on the view page so that I could use IntelliSense and compile time checking/debugging (rather than have to defer to run time checking/debugging).

I am currently experimenting with my own work-arounds to inject strongly typed view models into the view page in addition to the main view model represented by the ASP.NET MVC property named "Model". Apparently, it is not possible to use constructor injection (at least not without a major re-write of many of the core MVC methods), so I am using property injection with view models injected into corresponding properties on a view page derived from a customized abstract ViewPageBase class where the properties are declared as protected virtual. At present, I am experimenting with so-called "poor-mans" dependency injection (see book by Mark Seeman) because I have not yet committed to the choice and use of a dependency container such as Unity or Ninject.

I welcome any opinions/recommendations on choice of a dependency container for use as explained in the situation described in this post, or more specifically, ASP.NET MVC 3 + Razor + Telerik MVC Grids plus the goal of using multiple different strongly typed view models throughout the view page, client templates, editor templates.

answered on 11 Nov 2011, 09:41 AM

Hello Carl,

The goal of Telerik Extensions for ASP.NET MVC is not to extend the core ASP.NET MVC framework and probably will never be. It is a set of UI components which are using the built-in ASP.NET MVC features as much as possible.

To be honest we are not experts in the internal implementation of ASP.NET MVC editor and display templates and we are not sure if it is even possible to extend it in the way you desire. What we know is that when you call Html.EditorForModel ASP.NET MVC looks for a partial view named after the model and passes a model instance of the same type. We are not aware of any way to intercept editor template initialization so we can replace one model for another.

I am asking you to paste a few lines of code which will help us and any other forum users to see what your requirements are. The different models/viewmodels as well as the editor template partial views would help tremendously. Perhaps there is a way to overcome those limitations.

All the best,
Atanas Korchev
the Telerik team

answered on 11 Nov 2011, 05:56 PM

Atanas,

Thanks for comments. I do not believe that your remarks are incompatible with mine, ie, "mutually exclusive". In other words, it is entirely possible for Telerik to maintain a position of "not extending the core of ASP.NET MVC" while at the same time providing "a set of UI components" that serve the goal of improving and enhancing what Microsoft has done for that particular UI component.

So if Microsoft provides an MVC grid UI component, then presumably Telerik's MVC grid UI component should be better (easier and more productive to use and with more feature enhancements). My way of building work-arounds for correcting deficiencies in Microsoft's core MVC methods is simply to build a wrapper around them with a Decorator pattern. I do not see any reason why Telerik cannot build its own wrappers to better serve the complexities of a grid UI component for use on a view page with multiple hierarchical grids for which each grid might have multiple models and templates.

I am continuing to experiment with a ViewPageBase wrapper method that makes it easier and more convenient for me to build complex hierarchical grids. I am attaching below the source code for my wrapper method. Note that the important stuff is property injection via the properties MainModel and AuxModel where MainModel is the primary model for the data in a grid and AuxModel is the auxiliary model for all the extra stuff needed for the UI that is not row-dependent data. Also note there are some extra convenience methods for setting site and page titles and page layout. For the latter, it is important to avoid recursions and snowballing errors (that are confusing and misleading and not related to real source of problem) by testing for and excluding any partial views including templates. All these latter files should have file names beginning with underscore, and I recommend that Telerik MVC extensions adhere to this convention for always using initial underscore on templates and partials. For more info, see StackOverflow at

http://stackoverflow.com/questions/4576548/why-does-razor-layout-cshtml-have-a-leading-underscore-in-file-name

In any event, here's the source code for my wrapper on my ViewPageBase, and I'll post more when I'm satisfied with what I've done for the EditorTemplates.

using System.Web.Mvc;

using GAS = GTG.Common.MvcAuthLib.Core.GtgAppSettings;

namespace GTG.Common.MvcAuthLib.Core

{

public abstract class GtgMvcViewPageBase : GtgMvcViewPageBase<dynamic, dynamic> { }

public abstract class GtgMvcViewPageBase<TMainModel> : GtgMvcViewPageBase<TMainModel, dynamic> { }

// System.Web.Mvc.WebViewPage is for Razor views

public abstract class GtgMvcViewPageBase<TMainModel, TAuxModel> : WebViewPage<TMainModel>

{

// ATTN: Constructor dependency injection NOT possible with WebViewPages

// must use property or method dependency injection!!!!

protected override void InitializePage()

{

base.InitializePage();

string vp = this.VirtualPath;

// TODO: refine this test with a more precise regex

// for excluding partial views and templates

// which should have file name beginning with "_"

if (!vp.Contains("_")) { Layout = PageLayout; }

}

private TMainModel mainModel;

protected TMainModel MainModel

{

get { return mainModel; }

set { mainModel = value; }

}

private TAuxModel auxModel;

protected TAuxModel AuxModel

{

get { return auxModel; }

set { auxModel = value; }

}

private string area;

protected string GtgMvcArea // do not use name "Area"

{

get

{

if (string.IsNullOrEmpty(area))

{ area = Html.ViewContext.RouteData.DataTokens["area"].ToString(); }

return area;

}

private string controller;

protected string GtgMvcController // do not use name "Controller"

{

get

{

if (string.IsNullOrEmpty(controller))

{ controller = Html.ViewContext.RouteData.Values["controller"].ToString(); }

return controller;

}

private string action;

protected string GtgMvcAction // do not use name "Action"

{

get

{

if (string.IsNullOrEmpty(action))

{ action = Html.ViewContext.RouteData.Values["action"].ToString(); }

return action;

}

private string pageLayout = "";

protected virtual string PageLayout

{

get

{

if (string.IsNullOrEmpty(pageLayout)) { return GAS.GetAppSetting.SiteDefaultLayout; }

else { return pageLayout; }

}

set { pageLayout = value; }

}

private string siteTitle = "";

protected virtual string SiteTitle

{

get

{

if (string.IsNullOrEmpty(siteTitle)) { return GAS.GetAppSetting.SiteDefaultTitle; }

else { return siteTitle; }

}

set { siteTitle = value; }

}

private string pageTitle = "";

protected virtual string PageTitle

{

get { return pageTitle; }

set { pageTitle = value; }

}

protected string FormatSiteTitle(string siteTitle)

{

if (!string.IsNullOrEmpty(siteTitle)) { SiteTitle = siteTitle; }

return FormatSiteTitle();

}

protected virtual string FormatSiteTitle()

{ return "<h1>" + SiteTitle + "</h1>"; }

protected string FormatPageTitle(string pageTitle)

{

if (!string.IsNullOrEmpty(pageTitle)) { PageTitle = pageTitle; }

return FormatPageTitle();

}

protected virtual string FormatPageTitle()

{ return "<h3>" + PageTitle + "</h3>"; }

protected virtual string FormatSiteAndPageTitle()

{ return SiteTitle + ": " + PageTitle; }

}

answered on 15 Nov 2011, 07:01 AM

I've done some more experimenting and have now found it most useful to consider 3 different models: the main model (the usual one that corresponds to the MVC property Model) and 2 auxiliary models where one is useful for each page and the other for the site. The declaration for the ViewPageBase now looks like this:

public abstract class GtgMvcViewPageBase : GtgMvcViewPageBase<dynamic, dynamic, dynamic> { }

public abstract class GtgMvcViewPageBase<TModel> : GtgMvcViewPageBase<TModel, dynamic, dynamic> { }

public abstract class GtgMvcViewPageBase<TModel, TAux1> : GtgMvcViewPageBase<TModel, TAux1, dynamic>

where TAux1 : class, new() { }

public abstract class GtgMvcViewPageBase<TModel, TAux1, TAux2> : WebViewPage<TModel>, IGtgMvcCntrlrViewPageBase<TAux1, TAux2>

where TAux1 : class, new()

where TAux2 : class, new()

where I used an interface as follows:

interface IGtgMvcCntrlrViewPageBase<TAux1Model, TAux2Model>

where TAux1Model : class, new()

where TAux2Model : class, new()

{

// string constants for property names must match in GtgMvcViewPageActivator

GtgTypedModelManager<TAux1Model> Aux1MdlMgr { get; set; }

GtgTypedModelManager<TAux2Model> Aux2MdlMgr { get; set; }

}

// Aux is short for Auxiliary

//

// AuxModel intended to be an auxiliary model

// used as a convenience to accompany the main model

// eg, in setting where the main model holds row record data for a grid,

// the auxiliary models can hold independent data for drop down lists

// and other features of the user interface for the grid

I imposed the requirement that I would only use the dependency injection methods already packaged with ASP.NET MVC (and avoid use of any more sophisticated dependency containers). So the actual property injection takes place in:

public class GtgMvcViewPageActivator : IViewPageActivator

{

// string constants must match property names in IGtgMvcCntrlrViewPageBase

private const string aux1PropName = "Aux1MdlMgr";

private const string aux2PropName = "Aux2MdlMgr";

public object Create(ControllerContext controllerContext, Type viewPageType)

{

var controller = controllerContext.Controller;

var viewPage = DependencyResolver.Current.GetService(viewPageType);

InjectProperty(controller, viewPage, aux1PropName);

InjectProperty(controller, viewPage, aux2PropName);

return viewPage;

}

private void InjectProperty(ControllerBase ctrl, object view, string propName)

{

PropertyInfo ctrlProp = ctrl.GetType().GetProperty(propName);

if (ctrlProp != null)

{

PropertyInfo viewProp = view.GetType().GetProperty(propName);

if ((viewProp != null) && (viewProp.PropertyType == ctrlProp.PropertyType))

{

var ctrlPropValue = ctrlProp.GetValue(ctrl, null);

if (ctrlPropValue != null)

{

viewProp.SetValue(view, ctrlPropValue, null);

}

and with a few more steps (including a custom ViewEngine wrapper around the RazorViewEngine), I have succeeded in getting everything to work including tests on the Telerik MVC grid editor templates!

That means I have strongly typed view models even in my editor templates which gives me IntelliSense, and enabled me to get rid of the ViewBag completely. And since the auxiliary models were done with generic typing, the whole approach works great no matter what I declare as the strongly typed view models for each of TAux1 and TAux2 (subject to the class and new() constraints on the interface).

So the answer to my own question is: Yes it is possible to build a flexible set of wrappers on the MVC methods to enable use of strongly typed view models with IntelliSense even on editor templates for the Telerik MVC Grid. I'll write up a more detailed explanation on my blog.

answered on 15 Nov 2011, 08:34 AM

Hello Carl,

Thank you for elaborating on the matter. I see now how you can inject other models in a view page. I couldn't understand how this would work for an editor template but I guess this is where extending the razor view engine comes into play.

It would be great if you share a blog post or even create a code library project so everyone can benefit from using this approach!

Regards,
Atanas Korchev
the Telerik team

answered on 15 Nov 2011, 04:54 PM

Sure! It is definitely a project assembly within my open source project (see www.portaldoors.org) so it will be available for anybody who wants it.

The custom view engine does not do much other than to inherit from the RazorViewEngine and then to assure that the custom ViewPageActivator is used (see GtgMvcViewPageActivator in my previous post). Here's the source for the custom view engine where you can note that the default constructor for GtgMvcViewEngine provides GtgMvcViewPageActivator as the default for IViewPageActivator :

public class GtgMvcViewEngine : RazorViewEngine

{

public GtgMvcViewEngine() : this(new GtgMvcViewPageActivator()) { }

public GtgMvcViewEngine(IViewPageActivator viewPageActivator)

{

this.viewPageActivator = viewPageActivator;

}

private readonly IViewPageActivator viewPageActivator;

protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)

{

string layoutPath = null;

bool runViewStartPages = false;

IEnumerable<string> viewStartFileExtensions = null;

var rv = new RazorView(controllerContext, partialPath, layoutPath, runViewStartPages, viewStartFileExtensions, viewPageActivator);

return rv;

}

protected override IView CreateView(ControllerContext controllerContext, string viewPath, string layoutPath)

{

bool runViewStartPages = true;

IEnumerable<string> viewStartFileExtensions = null;

var rv = new RazorView(controllerContext, viewPath, layoutPath, runViewStartPages, viewStartFileExtensions, viewPageActivator);

return rv;

}

Inside the methods the RazorViews were created as vars as an aid during development/debugging.