[Solved] Dropdown not getting displayed in a Telerik grid

[Rajesh]

Hi,
I am trying to add a custom drop down in a telerik grid. But till not no luck

Here is what I did:

View that displays my grid:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%= Html.Telerik().Grid<UserAccessMVC2Demo.ViewModels.PolicyDefaultGrid>()
                    .Name("PolicyDataGrid")
                    .Columns(columns =>
                    {
                        columns.Bound(m => m.Identifier).Width(150);
                        columns.Bound(m => m.InsuredName).Width(150);
                        columns.Bound(m => m.Action).Width(130);
                        columns.Bound(m => m.State).Width(30);
                        columns.Bound(m => m.Company).Width(250);
                        columns.Bound(m => m.Agency).Width(250);
                        columns.Bound(m => m.Status).Width(150);
                        columns.Bound(m => m.LOB).Width(150);
                        columns.Bound(m => m.EffToExp).Width(150);
                        columns.Bound(m => m.Premium).Width(80);
                        columns.Bound(m => m.Created).Width(150);
                    })
                    .DetailView(details => details.ClientTemplate(
                        Html.Telerik().TabStrip()
                                    .Name("TabStrip_<#= Identifier #>")
                                .SelectedIndex(0)
                                .Items(items =>
                                {
                                    items.Add().Text("Mid-Term Quotes").Content(
                                        Html.Telerik().Grid<UserAccessMVC2Demo.ViewModels.MTQDefaultGrid>()
                                       .Name("Quotes_<#= Identifier #>")
                                       .Columns(columns =>
                                       {
                                           columns.Bound(o => o.Quote).Width(80);
                                           columns.Bound(o => o.Change).Width(20);
                                           columns.Bound(o => o.Premium).Width(20);
                                           columns.Bound(o => o.ApplyQuote).ClientTemplate("<input type='button' value='Apply' />").Width(30).Title("");
                                       })
                                       .DataBinding(dataBinding => dataBinding.Ajax()
                                            .Select("MTQSearchResult", "UserAccess"))
                                       .Sortable()
                                       .Selectable()
                                       .Filterable()
                                       .ToHtmlString());
                                })
                                .ToHtmlString()
                ))
                .DataBinding(dataBinding => dataBinding.Ajax().Select("PolicySearchResult", "UserAccess"))
                .Pageable()
                .Sortable()
                .Selectable()
                .Groupable()
                .Filterable()

     %>

Binded the property ("Action") in my model "UserAccessMVC2Demo.ViewModels.PolicyDefaultGrid" to the Actions user control.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ServiceLayer.UserAccess.Policy;
using DTO.UserAccess.Policy.Request;
using DTO.UserAccess.Policy.Response;
using UserAccessMVC2Demo.Models;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace UserAccessMVC2Demo.ViewModels
{
    public class PolicyDefaultGrid
    {
        [DisplayName("Number")]
        public string Identifier { get; set; }

        [DisplayName("Named Insured")]
        public string InsuredName { get; set; }

        [UIHint("Actions"),Required]
        public Actions Action { get; set; }

        [DisplayName("State")]
        public string State { get; set; }

        [DisplayName("Company")]
        public string Company { get; set; }

        [DisplayName("Agency")]
        public string Agency { get; set; }

        [DisplayName("Status")]
        public string Status { get; set; }

        [DisplayName("LOB")]
        public string LOB { get; set; }

        [DisplayName("Eff-Exp")]
        public string EffToExp { get; set; }

        [DisplayName("Premium")]
        public decimal Premium { get; set; }

        [DisplayName("Created")]
        public string Created { get; set; }
    }

    public class PolicyDefaultGridList
    {
        public List<PolicyDefaultGrid> GetPolicyData(PolicySearchRequest request)
        {
            var policyDefaultGridList = new List<PolicyDefaultGrid>();

            var policyService = PolicyServiceFactory.getPolicyService();
            var policyDefaultGridData = policyService.getPolicyData(request);

            foreach (PolicySearchPolicy response in policyDefaultGridData.Policies)
            {
                var gridData = new PolicyDefaultGrid();

                gridData.Identifier = response.Identifier;
                gridData.InsuredName = response.InsuredName;
                gridData.State = response.State;
                gridData.Company = response.Company;
                gridData.Agency = response.Agency;
                gridData.Status = response.Status;
                gridData.LOB = response.LOB;
                gridData.EffToExp = response.EffToExp;
                gridData.Premium = response.Premium;
                gridData.Created = response.Created;

                policyDefaultGridList.Add(gridData);
            }

            return policyDefaultGridList;
        }
    }
}

Created the DisplayTemplates folder with Actions.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<UserAccessMVC2Demo.Models.Actions>" %>

<%= Html.Encode(Model.MTQActionText) %>

Created the EditorTemplates folder with Actions.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<UserAccessMVC2Demo.Models.Actions>" %>

<%= Html.Telerik().DropDownList()
                    .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
                    .BindTo(new SelectList(Model.ActionSelect,"MTQActionValue","MTQActionText",Model.MTQActionText))
%>

Actions (model)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace UserAccessMVC2Demo.Models
{
    public partial class Actions
    {
        public string MTQActionValue { get; set; }

        public string MTQActionText { get; set; }

        public override string ToString()
        {
            return MTQActionText;
        }

        public List<Actions> ActionSelect
        {
            get
            {
                var actions = new ActionsList();
                return actions.GetActions();
            }
        }
    }

    public class ActionsList
    {
        public List<Actions> GetActions()
        {
            var itemsMTQActions = new List<Actions>();

            var mtqActions = new Actions();

            mtqActions.MTQActionText = "";
            mtqActions.MTQActionValue = "";

            itemsMTQActions.Add(mtqActions);

            var mtqActions1 = new Actions();

            mtqActions1.MTQActionText = "Delete";
            mtqActions1.MTQActionValue = "Delete";

            itemsMTQActions.Add(mtqActions1);

            var mtqActions2 = new Actions();

            mtqActions2.MTQActionText = "Modify";
            mtqActions2.MTQActionValue = "Modify";

            itemsMTQActions.Add(mtqActions2);

            var mtqActions3 = new Actions();

            mtqActions3.MTQActionText = "Apply";
            mtqActions3.MTQActionValue = "Apply";

            itemsMTQActions.Add(mtqActions3);

            var mtqActions4 = new Actions();

            mtqActions4.MTQActionText = "View Endorsement Quote";
            mtqActions4.MTQActionValue = "View";

            itemsMTQActions.Add(mtqActions4);

            return itemsMTQActions;


        }
    }
}

There is no error, but the dropdown is not getting displayed with I run the application. The column in the grid is empty.
Please suggest?

[Atanas Korchev]

Hi Rajesh,

 Your code looks correct from first glance. Do you see any JavaScript errors when the page is loaded or when the grid enters edit mode? Is there a chance to send us a working subset of your project which we can test?

 You can also check our online demo and see what is different in your case.

Greetings,
Atanas Korchev
the Telerik team