Select ListView: what is a good kendo style

[Phil H.]

Hi:

I have  a selection list that I would like to apply a kendo style.

<select id="listView" size="10" style="width: 150px;"></select>
<script>
    $("#listView").kendoListView({
        dataSource: [
          { id: 1, name: "Apples" },
          { id: 2, name: "Oranges" },
          { id: 3, name: "Grapes" },
          { id: 4, name: "Bananas" }
        ],
        template: '<option value="#: id #">#: name # (#: id #)</option>',
        dataTextField: "name",
        dataValueField: "id"
    });
</script>

What class?

Phil

[Kiril Nikolov]

Hello Phil,

The ListView does not have specific styling that is applied automatically when the items are bound. If you check the online ListView demos click on edit this example and remove all the custom CSS styles that are included you will see that the ListView displays the items without any specific 'Kendo UI' styling. So in order to style it in any specific way that you want you will need to add some custom CSS rules that will handle it.

Regards,
Kiril Nikolov
Telerik

 

 

[Phil H.]

Hi:

My intention is for the control to look native to kendo.  As a solution, I have been trying to apply style to straight html as follows;

<ul class="k-widget k-select k-list k-reset">
    <li class="k-item">1 - One</li>
    <li class="k-item">2 - Two</li>
    <li class="k-item">3 - Three</li>
    <li class="k-item">4 - Four</li>
</ul>

The l-reset removes the bullets for a li element, but that is all the above seem to do.  I would expect the above to look more like the dropdown part of a combobox.

Phil

[Phil H.]

Hi:
This looks OK:

<ul class="k-list-container k-select k-list k-reset" style="height: auto; line-height: normal; font-family: Times New Roman; font-size: 20px; font-style: normal; font-weight: 400;">
    <li class="k-item">1 - One</li>
    <li class="k-item k-state-focused k-state-selected">2 - Two</li>
    <li class="k-item">3 - Three</li>
    <li class="k-item">4 - Four</li>
</ul>

Phil

[Kiril Nikolov]

Hello Phil,

If you like the output from the combination of the Kendo UI specific styles that you have applied to your ListView then I do not see a reason why not to use in production, as the classes that you used are part of the core Kendo UI styling.

Regards,
Kiril Nikolov
Telerik