• Telerik Extensions for ASP.NET MVC - The Editor

    by Venkata Koppaka | Jan 19, 2011

    This is third in the series posts I am doing to cover Telerik Extensions for ASP.NET MVC.

    1. Getting Started with Telerik Extensions for ASP.NET MVC 
    2. Telerik Extensions for ASP.NET MVC - The Grid

    In today's post I will talk about using Telerik Extensions for ASP.NET - The Editor.

    I will start with a ASP.NET MVC2 application which is already configured to run Telerik Extensions, if you have not already done that, I encourage you to read my first post on getting started(link above).

    Let us create a new model for holding our data that we want to POST through the editor.

    For this demo let us add a Person Class with two properties.

        public class Person 
        { 
            public int Id { get; set; } 
            public string Name { get; set; } 
     
            public Person(int id, string name) 
            { 
                Id = id; 
                Name = name; 
            } 
        } 

    Now let us add a ActionMethod with just returns a View, let the View be strongly typed to the Person Class we created above.

    public ActionResult CreatePerson() 
            { 
                return View(); 
            } 
    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<TelerikEditor.Models.Person>" %> 

    Adding a Telerik Editor is simple and it allows adding properties to the Editor with the help of a Fluent API like other Telerik MVC controls.

    Let us look at basic markup needed to add the Editor.

    <% Html.Telerik().Editor().Name("PersonDescription") 
    .Render();%> 

    If we run the application adding the basic markup for the editor, you should see the editor -

    Let us look deeply into other properties that Editor offers

    <%  
                        Html.Telerik().EditorFor(model=>model.Name) 
                                      .Name("PersonDescription") 
                                      .HtmlAttributes(new { style = "height:200px" }) 
                                      .Value("Please enter your description here") 
                                      .Tools(tool => tool 
                                                    .Clear() 
                                                    .Bold() 
                                                    .Italic() 
                                                    .Underline() 
                                                    .Snippets(snippet=>snippet.Add("Greeting","<h1>Hello World</h1>"))) 
                                      .Render(); 
                    %> 

    Let us look in detail about each of these properties.

    EditorFor for strongly binding the property

    EditorFor is variant of Editor for strongly typing model properties. It takes in the model property in the form of Func<T> you want to type to.

    Name

    The property "Name" is the actual clean HTML id of the table(textarea is wrapped inside aHTML table) that will be used for this editor. After you run the application do a View Source from your browser, you will see a div with the Id you mentioned in this Name property.

    HtmlAttributes

    This property takes in an object of HTML attributes you can apply to the editor.

    Value

    This property is used to set the editor content, the value can be a plain string or a mix of HTML and plain text. If we add some HTML to the value like -

    .Value("<h1>Please enter your description here</h1>") 
    It will automatically be rendered when the editor loads.

    Tools

    There are lots of tools that the editor supports - like Bold, Italic, Underline etc.

    Clear() - clears the current toolbar of the editor and every tool you add after calling clear will appear as in the toolbar.

    Snippets() - Snippets lets you insert pre-configured HTML into the editor.

     

    ClientAPI

    There is a very good client API for the editor that lets you do certain tasks using the editor. To dig more into these I recommend you read Telerk Editor Client API documentation.

    That's it for this post, in the next post I will be talking about how to use the Menu control.

    Hope you found this useful.

    Cheers,

    Venkata

    Go comment!

  • Happy New Year 2011

    by Venkata Koppaka | Jan 02, 2011
    I wish you all a very Happy New Year 2011.
     
    Go comment!