[Solved] Combo Box in Grid

[Daryl Shenner]

Hi. Team,

I've a functionality where I need to have a combo box column in my Grid. The below are my code that I use to have a combo column
 

columns.Template(o => Html.ActionLink(o.Description !=

 

string.Empty ? o.Description : "No Description", "ContactView", new { OpportunityID = o.OpportunityID })).Title("Description").Width(200);

columns.Bound(o => o.DueDate).Title(

 

"DueDate").Width(70);

columns.Bound(o => o.PriorityName).Title(

 

"Priority").Width(60);

columns.Bound(o => o.TypeName).ClientTemplate(Html.Telerik().DropDownList().Name(

 

"Type").BindTo(new SelectList((IEnumerable)SessionHandler.CRMTasksType, "Value", "Text")).ToHtmlString()).Title("Type").Width(60);

columns.Bound(o => o.StatusName).ClientTemplate(Html.Telerik().DropDownList().Name(

 

"StatusName").BindTo(new SelectList((IEnumerable)SessionHandler.CRMTasksStatus, "Value", "Text")).ToHtmlString()).Title("Status").Width(60);

columns.Bound(o => o.Comments).Title(

 

"Comments").Width(130);

}).ClientEvents(events => events.OnEdit(

 

"onEdit")).Editable(editing => editing.Mode(GridEditMode.InCell).DefaultDataItem(new HomeFrontCRM.Web.UI.Models.OpportunityTaskModels { DueDate = DateTime.Today })).Pageable().Sortable().Scrollable(scrolling => scrolling.Height(100)).Reorderable(reorder => reorder.Columns(true)).Resizable(resizing => resizing.Columns(true)).HtmlAttributes(new { style = " font-family:arial; font-size: .7em;" }).Render();

The Problem is, I'm able to see the Combo Box but when I click on the cell, it changes to a Text Box. Can you one suggest on this ?

[John DeVight]

Hi Daryl,

When I need to use a ComboBox in the grid, I have used an EditorTemplate as described in Telerik's documentation at:Display And Editor Templates

The editor template is placed in a folder "EditorTemplates" and the name of the parital view matches the name of the property that should be rendered as a combobox.  In your code below, the property that should be rendered as a combobox is "TypeName", so the name of the editor template would be TypeName.cshtml.  The ClientTemplate would pass in a string.  Something like this:

ClientTemplate("<#= TypeName #>")

The model used by your grid would need the UIHint attribute for the TypeName property.  Something like this:

[UIHint("TypeName")]
public string TypeName { get; set; }

Let me know if a sample application would help...

Regards,

John DeVight

[John DeVight]

Hey Daryl,

I've put together a sample app for you.  In the sample app, I have a Person model.  I display a list of people in a grid.  When I edit a person in the grid, I display the Person.HairColor as a Telerik DropDownList.  Here is the code for the Person model:

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; }
    }
}

Since the grid is displayed in the /View/Home/Index.cshtml view, I created a new folder called EditorTemplates under the /View/Home folder.  In the EditorTemplates folder, I created a partial view called HairColor.cshtml.  Here is the code for it:

@model string

@(
    // Render the Telerik DropDownList that is to be used in the Grid found on the Index.cshtml view.
    // The DropDownList gets the list of items to display from ViewBag.HairColors which is set in the
    // HomeController, Index action method.
    // Note: The name of this file, "HairColor.cshtml" matches the name of the property in the Person
    // model that is displayed as a DropDownList in the grid.
    Html.Telerik().DropDownListFor(e => e).BindTo(new SelectList(ViewBag.HairColors))
)

The DropDownList gets the list of items to display from ViewBag.HairColors.  That gets set in the HomeController, Index action method.  Here is the code:

namespace TelerikMvcGridEditingDropdown.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            // Initialize the list of items to be displayed in the dropdown.
            // Store the items in the ViewBag so that the editor template
            // located at: /Views/Home/EditorTemplates/HairColor.cshtml
            // can retrieve the list of items and display it in the dropdown.
            ViewBag.HairColors = new string[] { "Brown", "Black", "Red", "Blonde" };

            // Display the Index.cshtml view and pass in a list of people
            // to be displayed in the grid.
            return View(GetPeople());
        }
    }
}

Hope it helps.

Regards,

John DeVight

[Alan]

Hi,
May I ask how one can set the dropdown list so that is shows a description but its values is actually a code (i.e. "Black","BLK"). Thanks!