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

Telerik Editor/Display Template Best Practices?

3 Answers 180 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Shane Milton
Top achievements
Rank 2
Shane Milton asked on 09 Aug 2010, 09:04 PM
What are some best practices to follow when creating editor templates from Telerik controls?

Here are a few scenarios I can think of:

  1. "DatePicker.ascx" as the standard Editor Template for Date properties (where you only want a date and not a time)
  2. "ProductPicker.ascx" as the standard Editor Template for binding to an Order.LineItem.Product property. This could use a ComboBox with AJAX/JSON query to populate it on demand, and perhaps using type-ahead functionality to search from millions of products.
  3. "ProductList.ascx" as the standard Display Template for a collection of products. This could use a grid with sorting/paging/filtering functionality and apply to an Order.Products property.
  4. etc...

So some (I'm sure there are many more) of the concerns here that I'd like to make sure we handled were:
  1. Efficient javascript without naming collisions (i.e. we don't have N copies of every OnChange handler)
  2. Reusable editor templates without naming collisions for the various elements
  3. Reusable editor templates where I can hook into common clientside events (onchange, specifically, and get the selected value)

I'd love to start building a good UI framework of reusable components where the reusable components' implementation is based on Telerik's components, but I'm not quite understanding how. If we were still with ASP.NET, I'd simply create a user control with custom properties and events and this would be easy. Not so much with MVC editor templates, though.

Thanks!
-Shane

3 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 10 Aug 2010, 09:24 AM
Hi Shane Milton,

I am not 100% sure I understand your question. Still I will try to answer it.

Avoiding JavaScript duplication:

As with ASPX user controls you can define all JavaScript handlers in external JS file. You just need to wire up the event handler - it should provide all required data.

Avoiding name clashes
Perhaps you are asking what happens if two objects have a property with the same name and a different Editor/Display template is required. This is easily solvable by using the UIHint attribute to specify the name of the template. For example:
public class Person
{
    [UIHint("Person_Address")]
    public Address Address
    {
       get;
       set;
    }
}
 
public class Building
{
    [UIHint("Building_Address")]
    public Address Address
    {
       get;
       set;
    }
}

There is one important catch though. ASP.NET MVC does not properly propagate templates of nested complex objects - you can check this blog post for a workaround and a detailed description of the problem.

I hope this answers your questions. If not - do let me know. On a side note make sure you have checked the excellent blog post series on ASP.NET MVC templates. This is the definite guide to look in.

I hope this helps,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
quentinjs
Top achievements
Rank 1
answered on 08 Sep 2010, 06:02 AM
I think that concept of edit templates and display templates is exactly where he was going with his questions.  In the documentation is an example for working with grids, but I didn't see how to use it for dropdowns.  I hope I am not stealing this topic but I want to use the telerik ComboBox and here is my edit template.  It works with the built in Html.DropDown(...).  I have tried a variety of approaches but always get an Entry point was not found. Exception.

<%
@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%= Html.Telerik()
       .ComboBox()
       .BindTo(new SelectList( (IEnumerable) ViewData["Users"], "Value""Text", Model.ToString()))
%>       
<!--
< %= Html.DropDownList(null, 
                       new SelectList( (IEnumerable) ViewData["Users"], "Value", "Text", Model.ToString()))
-->

I believe the original author was looking for approaches for the list of examples he listed.
0
Jigar
Top achievements
Rank 1
answered on 08 Sep 2010, 09:03 AM
Hi Shane,

I guess I understand What you want to achieve. I am facing the same problem;

For Example:

I have 3 combo-box; On the basis of selection dependent combo-box populates. If I select first one, on the basis of the selected value second combo-box will be populated, and on the selection of second combo-box, third combo box will be populated.

Now for this scenario, I have created only one ComboBox.ascx; and wire OnChange event. For component naming I have used template info so that's not a problem, But in javascript I am not able to know which component is calling it for that I need to know component name in javascript. If I know it I can solve the problem. And may be you can achieve your goal upto some extent.

thanks & regards,

Jigar.
Tags
General Discussions
Asked by
Shane Milton
Top achievements
Rank 2
Answers by
Atanas Korchev
Telerik team
quentinjs
Top achievements
Rank 1
Jigar
Top achievements
Rank 1
Share this question
or