Dropdownlist using grouping template to have custom look

[Allen]

I am using Telerik MVC. Is there a way to have my own look when using grouping in a dropdownlist.

I would like to have different look in the grouping dropdownlist to sowh the group value on the right for each row in the selectbox. 

Is it a way to do it?

the attached file Current.png is what I have now. the HopeToHave.png is what I was asked to do. 

It seems I can not find any document on how to do it.

The code I have is

 @(Html.Kendo().DropDownListFor(m => m.CompetencyName)
                 DataValueField("CompetencyName")
                .DataTextField("CompetencyName")
                .OptionLabel("Select...")
                .DataSource(source =>  source
                    .Custom()
                    .Group(g => g.Add("CompetencyType", typeof(string)))
                    .Transport(transport => transport
                      .Read(read => read.Action("GetAllCompetencies", "Method", new { posTitle = ViewData["Title"] }).Type(HttpVerbs.Post))
                     )
                )
    )

 

Thanks.

Allen

[Ivan Danchev]

Hello Allen,

Such custom appearance can be achieved through using a template for the items.

1. Declare the template:

<script id="ddl-template" type="text/x-kendo-template">
	<div class="template-container">
    <span class="template-text">
      #:CompetencyName #
    </span>
    <span class="template-group">
      #:CompetencyType #
    </span>
  </div>
</script>

2. Pass id of the template to the DropDownList's TemplateId configuration:

.TemplateId("ddl-template")

3. Use CSS to space out the text and the group text:

<style>  
  .template-container { 
    display: flex; 
    justify-content: space-between;
  }
</style>

Give this a try and let us know how it goes.

Regards,
Ivan Danchev
Progress Telerik

[Allen]

Thanks Ivan, 

It works great. 

Allen