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

Styling of First Item in ListView

4 Answers 140 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 19 Jul 2012, 05:21 PM
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!

4 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 23 Jul 2012, 03:15 PM
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!
0
Steven
Top achievements
Rank 1
answered on 23 Jul 2012, 03:21 PM
That's exactly what I was looking for, thanks!
0
mvbaffa
Top achievements
Rank 1
answered on 25 Jul 2012, 07:56 PM
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
0
Iliana Nikolova
Telerik team
answered on 27 Jul 2012, 07:43 PM
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!
Tags
ListView
Asked by
Steven
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Steven
Top achievements
Rank 1
mvbaffa
Top achievements
Rank 1
Share this question
or