Kendo mvc joined text in dropdown list

Question

I got a few dropdowns in Kendo which are filters. I got LogLevel(Typ after translate) which is Enum, on a grid I display this as icons and I can read the title when I'm mouseover:

Column LogLevel code:

columns.Bound(c => c.LogLevel)
       .ClientTemplate(@"<span #
       if (LogLevel == " + (int)EActivityLogLevel.Default + ") { # style='color: \\#000000' class='fas fa-info' title='Default' # } " +
       "else if (LogLevel == " + (int)EActivityLogLevel.Information + ") { # style='color: \\#1BA1E2' class='fas fa-info-circle' title='Information' # } " +
       "else if (LogLevel == " + (int)EActivityLogLevel.Success + ") { # style='color: \\#00FF33' class='fas fa-check-circle' title='Success' # } " +
       "else if (LogLevel == " + (int)EActivityLogLevel.ContentChange + ") { # style='color: \\#6666CC' class='fas fa-exchange-alt' title='Content change' # }" +
       "else if (LogLevel == " + (int)EActivityLogLevel.Warning + ") { # style='color: \\#FFCC00' class='fas fa-exclamation-triangle' title='Warning' # } " +
       "else if (LogLevel == " + (int)EActivityLogLevel.Error + ") { # style='color: \\#E51400' class='fas fa-exclamation-circle' title='Error' # } " +
       "else if (LogLevel == " + (int)EActivityLogLevel.CriticalError + ") { # style='color: \\#990033' class='fas fa-exclamation-circle' title='Critical error' # }" +
       "#></span>")
       .Width(100)
       .HtmlAttributes(new { @class = "text-center" });

My filter dropdown is on the top of the page and looks like:

I'm making dropdown in controller like this:

var logLevelList = Enum.GetValues(typeof(EActivityLogLevel)).Cast<EActivityLogLevel>();
filterVM.AvailableLogLevel = logLevelList
            .Select(i => new SelectListItem
            {
                Text = T(i.GetDisplayName()),
                Value = ((int)i).ToString()
            }).ToList();

Is there any possibilities to set Text in dropdown like in a grid (i mean icon and text)? In the grid, I can use clientTemplate but don't know how can I do this while I'm creating a list for dropdown

DontVoteMeDown DontVoteMeDown · Accepted Answer · 2018-07-25T18:59:09

Sure, you can try using Template, FooterTemplate or HeaderTemplate as in this Demo, or ValueTemplate as in that other reference. I can't test them right now, but I'm sure one of them will work for you.

Kendo mvc joined text in dropdown list

1 Answers