Two column template string with one right aligned

[Robert Madrian]

Hello,

what is the best TemplateString and ValueTemplateString for the dropdownlist that I have two columns where one is right aligned (see picture)

regards robert

[Robert Madrian]

No response?

[Alexander]

Hi Robert,

Thank you for reaching out.

In general, the sole aim of the templates is to integrate any arbitrary HTML markup that lets you to further control the rendering of the component. Thus, there is no best practice for both styling the Template and ValueTemplate of the DropDownList, as it is up to the developer to modify and style the templates as per his requirements.  

That being said, for your scenario, in order to display the items in a column-like manner a possible approach would be to:

• Within both the Value Template and Template configuration store both the "DataText" and "DataValue" fields in separate span elements with decorated classes:
  

@(Html.Kendo().DropDownList()
      .Name("color")
       ...
      .Template("<span class='column-text'>#=data.Text#</span> <span class='column-value'>(#=data.Value#)</span>")
      .ValueTemplate("<span class='column-text'>#=data.Text#</span> <span class='column-value'>(#=data.Value#)</span>")
)

• Set the span element that wraps the template’s total width to 100% of its containing block by accessing it through the generated classes by Kendo:
  

<style>
    #{id of dropdownlist}-list .k-list-item-text {
        min-width:100%
    }
</style> 

• Right align the value span by applying the "float:right" CSS Rule for the previously decorated class - (highlighted in orange):
  

<style>
    .column-value{
        float:right;
    }
</style>    

For your convenience, here is a Telerik REPL that tackles the mentioned above. Feel free to further customize it as per your requirements:

• Telerik REPL for ASP.NET Core Example

To elaborate more, I have undertaken this approach due to the current DropDownList structure. Notice, that by design, both the Value and Template elements will be wrapped within a span element. You can verify this by inspecting the created HTML markup for the DropDownList upon the DOM's rendering:

We also have a dedicated demo that illustrates how templates can further be customized which could prove helpful as well:

• DropDownList Customizing Templates Demo - open the "View Source" tab to observe the utilized configuration.

I hope this helps.

Kind Regards,
Alexander
Progress Telerik

[Robert Madrian]

Thanks a lot!

Robert