[Solved] date picker in MVC grid

[Ajeesh]

hi
how can i add date picker in telerik grid.and how to get the date picker control value to the controller class file

[John DeVight]

Hi Ajeesh,

I have used the telerik editor templates for this.  You can read about them at: Display And Editor Templates

I've attached a sample application that demonstrates using an editor template to display a DatePicker.  In the sample application, I have a model called Person with a property called Birthday.  The Birthday property has a UIHint attribute:

using System;
using System.ComponentModel.DataAnnotations;

namespace TelerikMvcGridEditingDropdown.Models
{
    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }

        /// <summary>
        /// Since HairColor is to be displayed as a dropdownlist in the grid,
        /// the UIHint attribute is required.
        /// </summary>
        [UIHint("HairColor")]
        public string HairColor { get; set; }

        /// <summary>
        /// Since Birthday is to be displayed as a datepicker in the grid,
        /// the UIHint attribute is required.
        /// </summary>
        [UIHint("Birthday")]
        public DateTime Birthday { get; set; }
    }
}

Since the grid is rendered in the /Views/Home/Index.cshtml, I have added a folder called EditorTemplates with a partial view called Birthday.cshtml at: /Views/Home/EditorTemplates/Birthday.cshtml.  The Birthday.cshtml has the following code:

@model DateTime

@(
    Html.Telerik().DatePicker().Value(Model)
)

Here is the grid that is defined in the /Views/Home/Index.cshtml:

@{
    Html.Telerik().Grid(Model)
        .Name("PeopleGrid")
        .DataKeys(keys => keys.Add(m => m.Id))
        .Columns(columns =>
        {
            columns.Bound(m => m.Name);
            columns.Bound(m => m.HairColor);
            columns.Bound(m => m.Birthday);
            columns.Command(cmd => cmd.Edit());
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Update("UpdatePerson", "Home"))
        .Render();
}

Since I am updating the person by making an AJAX call to the UpdatePerson action method in the Home controller, the UpdatePerson action method will recieve a Person object containing the updated values sent from the grid.  The UpdatePerson action method would be defined as:

[GridAction]
public ActionResult UpdatePerson(Person updatedPerson)
{
    // Your code goes here.
}

Hope this helps.

Regards,

John DeVight

[Ajeesh]

Hi John DeVight
Thanks for your replay.Now in this you filled the drop using string[]={"value1","value2"}.Instead of that can u give an exmple to fill the combox from database using the model variables

Thanks in advance

Regards
Ajeesh