Styling of First Item in ListView

[Steven]

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!

[Iliana Dyankova]

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

[Steven]

That's exactly what I was looking for, thanks!

[mvbaffa]

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

[Iliana Dyankova]

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