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

Select ListView: what is a good kendo style

4 Answers 223 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Phil H.
Top achievements
Rank 2
Phil H. asked on 09 Jun 2014, 10:42 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 11 Jun 2014, 01:39 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Phil H.
Top achievements
Rank 2
answered on 14 Jun 2014, 08:30 PM
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
0
Phil H.
Top achievements
Rank 2
answered on 15 Jun 2014, 11:31 PM
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

0
Accepted
Kiril Nikolov
Telerik team
answered on 16 Jun 2014, 10:52 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ListView
Asked by
Phil H.
Top achievements
Rank 2
Answers by
Kiril Nikolov
Telerik team
Phil H.
Top achievements
Rank 2
Share this question
or