This is a migrated thread and some comments may be shown as answers.

Dropdownlist using grouping template to have custom look

2 Answers 12 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Allen
Top achievements
Rank 1
Veteran
Allen asked on 12 Apr 2021, 09:40 PM

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

2 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 15 Apr 2021, 01:01 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Allen
Top achievements
Rank 1
Veteran
answered on 15 Apr 2021, 05:09 PM

Thanks Ivan, 

It works great. 

Allen

Tags
DropDownList
Asked by
Allen
Top achievements
Rank 1
Veteran
Answers by
Ivan Danchev
Telerik team
Allen
Top achievements
Rank 1
Veteran
Share this question
or