Styling of First Item in ListView

5 posts, 0 answers
  1. Steven
    Steven avatar
    8 posts
    Member since:
    Mar 2012

    Posted 19 Jul 2012 Link to this post

    OK, not exactly a question on ListView per se, but spinning wheels for some reason on this guy.

    I have the following template and ListView on a page:
    $("#top3").kendoListView({
                    dataSource: dataSourceCustomers,
                    template: kendo.template($("#top3template").html())
    });
     
     
    <script type="text/x-kendo-tmpl" id="top3template" >
            <div class="top3item">
                <dl class="subtitle">
                    <dt><b>${CustomerName}</b></dt>
                    <dd>${kendo.toString(Value, "c")}</dd>
                </dl>
            </div>
         
    </script>

    What I'm looking for is a way for format the FIRST item on the list returned (bold, diff color, etc.).  It sounds simple enough I should be able to do it with jQuery alone, but its just not coming to me.  Any ideas on formatting the first item returned?  Thanks in advance for the help!
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 23 Jul 2012 Link to this post

    Hi Steven,

    I am not quite sure if I understand correctly your question, but if you want to style only the first item in the list you could use the following code snippet: 
    var getListView = $("#listView").data("kendoListView");
    var getFirst = getListView.items().first();
    getFirst.css("color", "red");

    In case you want to style every first element for all items you could use a template. For example: 
    <script type="text/x-kendo-tmpl" id="top3template" >
       <div class="top3item">
           <dl class="subtitle">
               <dt style="color: red;"><b>${CustomerName}</b></dt>
               <dd>${kendo.toString(Value, "c")}</dd>
           </dl>
       </div>
    </script>

    I hope this helps.

     

    Kind regards,
    Iliana Nikolova
    the Telerik team
    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. Steven
    Steven avatar
    8 posts
    Member since:
    Mar 2012

    Posted 23 Jul 2012 Link to this post

    That's exactly what I was looking for, thanks!
  5. mvbaffa
    mvbaffa avatar
    102 posts
    Member since:
    Dec 2006

    Posted 25 Jul 2012 Link to this post

    Hi,

    I have a similar problem. The diference is that I want to change the style when the mouse is over an element of the ListView.
    How can I receive the hover event of a ListView tem.

    Thanks
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 27 Jul 2012 Link to this post

    Hi Marcus,

    To achieve the desired behavior you could use the jQuery hover() method - such binds handlers to the matched elements which will be executed when the mouse is over an element.
     
    Kind regards,
    Iliana Nikolova
    the Telerik team
    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