I was interested in displaying a list of testimonials on the bottom of a home page, but I didn't want all the testimonials, only a few with a link to see more.

I discovered that the ListView control doesn't have a property in the Basic or Advanced to allow this.

I found Ivan Dimitrov's forum entry  about blogs and modify it for my purpose.

Here are the specific steps to implement a ListView with a limited number of visible items:

• Created a new directory in the root of my website: ~/CustomTemplates
• Created a subdirectory for the ListView: ~/CustomTemplates/Lists
• Copied the default list view control: ~/Sitefinity/ControlTemplates/Lists/ExpandedListView.ascx to ~/CustomTemplates/Lists/ShortExpandedList.ascx

   

• Edited the custom user control
• Added Javascript to the top of the custom control (see below) to hide all list items beyond the hardcoded 'pagesize' value.
• Modified the 'pagesize' variable in the javascript to set the # of list items to display (ex. 3 most recent items displayed out of 50)
• Made aesthetic changes to the control for a good visual separation of the items
• Then in Sitefinity, I edited the page I wanted this custom ListView control on
• Dropped a ListView control on page (Expand the 'Lists' group, drag and drop the ListView control into the page)
• Clicked to Edit the ListView control
• Selected Expanded List mode
• Clicked on the Advanced tab and expanded the Appearance section
• Pasted in the template path for this custom control: ~/CustomTemplates/Lists/ShortExpandedList.ascx
• Saved the changes
• Tested it out and tweaked the styles

Below is the custom control I created from the Sitefinity default ExpandedListView control.  Note: this is a Sitefinity v3.7 version of their control, you may have to modify it for future versions (or come back here for an update :) )

<!--Control Language="C#"-->
<telerik:CssFileLink id="CssFileLink1" runat="server" Media="screen" EmbeddedFileName="Telerik.Lists.Resources.ControlTemplates.Frontend.listsCommonLayout.css"></telerik:CssFileLink>
<script src="http://code.jquery.com/jquery-latest.min.js" originalAttribute="src" originalPath="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">

function pageLoad()
{
var itemsSize = ($('li.items').length);
var pagesize = 3;
var itemsToShow = itemsSize / pagesize;
if (itemsSize > itemsToShow)
{
hideItems(pagesize);
}
}

function hideItems(pagesize)
{

$('li.items').each(function() {
if (($(this).index() + 1) > pagesize) {
$(this).hide();
}
})

}

function showItems()
{
$('li.items').each(function()
{
$(this).show();
});

}

</script>

<asp:Repeater id="lists" runat="server">
<itemtemplate />


<h1 class="sf_listTitle"><asp:Literal id="listTitle" runat="server"></asp:Literal></h1>


<asp:Repeater id="listItems" runat="server">
<headertemplate />
<ul class="sf_expandedList" style="list-style-type: none;">

<itemtemplate />
<li class="items"><hr />

<h3 class="sf_listItemTitle"><asp:Literal id="headline" runat="server"></asp:Literal></h3>
<div class="sf_listItemBody"><asp:Literal id="content" runat="server"></asp:Literal></div>

</li>

<footertemplate />
</ul>

</asp:Repeater>

</asp:Repeater>


<hr />