Select ListView: what is a good kendo style

5 posts, 2 answers
  1. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 09 Jun 2014 Link to this post

    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
  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 11 Jun 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 14 Jun 2014 in reply to Kiril Nikolov Link to this post

    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
  5. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 15 Jun 2014 in reply to Phil H. Link to this post

    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

  6. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 16 Jun 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready