[Solved] how to display datepicker in grid without click edit button in grid

[Ajeesh]

HI

I need a sample to  display datepicker in grid without click edit button in grid.when am see the grid all the row of one of the column in grid should display as Datepicker

[John DeVight]

Hi Ajeesh,

You can use a display template for this.  You can read about them at: Display And Editor Templates

Here is an example:

If you have a Person model class that contains the property "Birthday" that you want to display as a DatePicker, the "Birthday" property would need to be defined with the UIHintAttribute like this:

using System;
using System.ComponentModel.DataAnnotations;

namespace TelerikMvcGridEditingDropdown.Models
{
    public class Person
    {
        public int Id { get; set; }
        public string Name { 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; }
    }
}

Next, you want to create a display template for the Birthday property.  The display template is defined in a child folder where the view exists with the grid to be displayed.  So, if I want to display the grid in the Index view for the Home controller, the view would be here:

/Views/Home/Index.cshtml

and the display template for the Birthday property would be here:

/Views/Home/DisplayTemplates/Birthday.cshtml

The Birthday display template would look like this:

@model DateTime

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

The grid that is defined in the Index.cshtml would be defined like this:

@{
    Html.Telerik().Grid(Model)
        .Name("PeopleGrid")
        .DataKeys(keys => keys.Add(m => m.Id))
        .Columns(columns =>
        {
            columns.Bound(m => m.Name);
            columns.Bound(m => m.Birthday);
        })
        .Render();
}

Let me know if you have any questions or would like for me to post a sample application.

Regards,

John DeVight

[Sakthivel]

Hi,
This is not working can you send me the sample application
Thanks and Regards,
sakthivel

[Ajeesh]

Hi
Can you give a sample code to display combobox in grid.The combobox have Value field and text field.and am using

editing.Mode(

 

GridEditMode.InCell)

 

[Sakthivel]

In View
@(Html.Telerik().Grid(Model)
         .Name("dgdLiabilityTranches")
         .DataKeys(keys => keys.Add(T => T.TrancheType))
         .NoRecordsTemplate(" ")
         .HtmlAttributes(new { style = "width:1550px;" })
         .Columns(columns =>
          {
            columns.Bound(T => T.TrancheType).Width(360).Title("Tranche Name").HtmlAttributes(new { style = "text-align:left;" })
          .HeaderHtmlAttributes(new { @class = "btnWidth" }).HeaderHtmlAttributes(new { style = "text-align:center" })
         .ClientTemplate(Html.DropDownList("drpTrancheName", (SelectList)(ViewData["SellerDescription"])).ToHtmlString()) 
     })
)

and in EditorTemplates 
@(Html.DropDownList("drpTrancheName", (SelectList)(ViewData["SellerDescription"])))

And in Controller
//tranche_type is the value field and tranche_name is the text field
 var querySellerDesc = (from TT in objEntity.abcp_tranche_types select TT);
 ViewData["SellerDescription"] = new SelectList(querySellerDesc.AsEnumerable().ToList(),
                                 "tranche_type","tranche_name");