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

ListView and RadDatapager not working

1 Answer 203 Views

ListView

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

Rajeev asked on 04 Jan 2013, 05:33 PM

My Listview and RadDatapager is not working. I am doing development in sitefinity. It is a Control (ASCX Page)
Searching for events. Search is working fine. I am stuck on two things, Datapager and the first result is always expanded in Radlistview.

I am showing my results using this example
http://demos.telerik.com/aspnet-ajax/listview/examples/appearancestyling/customlayouts/defaultcs.aspx

I implemented the telerik:RadDataPager. The Pager works fine for the first set of records. When i click NEXT no records are displayed and the RadDataPager also disappears. I tried to Rebind the Listview in PreRender but still it is not working.

My second question is When ever the results come back the first result is always expanded. Which i don't want. I know you can control this in RadGrid with the Expandable column(RadGrid.ExpandCollapseCommandName).
I am not able to do it in Radlistview.

Here is my Code

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Events.ascx.cs" Inherits="SitefinityWebApp.UserControls.Events" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<head>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function pageLoad(sender, args) {

var productsTable = $get("products");

var firstRow;

if (productsTable.tBodies) {

firstRow = productsTable.tBodies[0].rows[0];

}

else {

firstRow = productsTable.rows[0];

}

var expandImg = firstRow.cells[0].getElementsByTagName("IMG")[0];

if (expandImg.src.indexOf("Plus") > -1) {

toggleOrderDetails(expandImg);

}

function toggleOrderDetails(sender) {

var thisRow = sender.parentNode.parentNode;

var nextRow = getNextRowSibling(thisRow);

if (nextRow && nextRow.className == "orders") {

if (nextRow.style.display == "none") {

nextRow.style.display = "";

sender.src = sender.src.replace("Plus", "Minus");

thisRow.className = "expanded";

}

else {

nextRow.style.display = "none";

sender.src = sender.src.replace("Minus", "Plus");

thisRow.className = "";

}

function getNextRowSibling(row) {

var ret = row;

do {

ret = ret.nextSibling;

} while (ret && ret.tagName != "TR");

return ret;

}

</script>

</telerik:RadCodeBlock>

<style type="text/css">

.wrapper

{

width: 608px;

border: 1px solid #5D8CC9;

font-family: "segoe ui" ,arial,sans-serif;

font-size: 12px;

line-height: 16px;

}

.products

{

empty-cells: show;

table-layout: fixed;

border-collapse: collapse;

width: 100%;

}

.products th

{

background-color: #C3D8F1;

padding: 5px;

border-bottom: 1px solid #5D8CC9;

color: #00156E;

text-align: left;

width: 130px;

}

.products td

{

border: 1px solid #D0D7E5;

border-style: none none solid none;

padding: 4px 7px 3px 7px;

}

.products th.expand, .products td.expand

{

width: 20px;

padding: 0 0 0 3px;

}

.products tr td.expand

{

border-color: #ECF4FF;

}

.products tr.expanded td, .orders td.expand

{

background-color: #ECF4FF;

}

.products tr td.expand img

{

cursor: pointer;

}

.orders td

{

padding: 0;

width: auto;

}

.orders table

{

table-layout: fixed;

border-collapse: collapse;

width: 100%;

}

.orders table td

{

width: 130px;

padding: 4px 7px 3px 7px;

padding: 3px 3px 3px 7px;

}

.orders table tr:last-child td

{

border-bottom: none;

}

</style>

</head>

<body>

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All"

EnableRoundedCorners="false" />

<div style="width: 610px;">

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black">

</telerik:RadAjaxLoadingPanel>

<div>

<table>

<tr>

<td>

Location

</td>

<td>

Event Type

</td>

<td>

Start Date

</td>

<td>

End Date

</td>

</tr>

<tr>

<td>

<telerik:RadListBox ID="citySelector" runat="server">

</telerik:RadListBox>

</td>

<td>

<telerik:RadListBox ID="tagSelector" runat="server">

</telerik:RadListBox>

</td>

<td>

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">

<Calendar ID="Calendar1" runat="server" EnableKeyboardNavigation="true">

</Calendar>

<DateInput ID="DateInput2" ToolTip="Date input" runat="server">

</DateInput>

</telerik:RadDatePicker>

</td>

<td>

<telerik:RadDatePicker ID="RadDatePicker2" runat="server">

<Calendar ID="Calendar2" runat="server" EnableKeyboardNavigation="true" />

<DateInput ID="DateInput1" ToolTip="Date input" runat="server" />

</telerik:RadDatePicker>

<telerik:RadButton ID="Submit" runat="server" Text="Search" OnClick="Submit_Click" />

</td>

</tr>

</table>

<br />

<telerik:RadListView ID="RadListView1" runat="server" ItemPlaceholderID="ProductTitlePlaceHolder" OnPreRender="Pager_Pre" OnPagePropertiesChanging="listItems_PagePropertiesChanging"

AllowPaging="True">

<LayoutTemplate>

<fieldset style="width: 900px">

<legend>Events</legend>

<asp:PlaceHolder ID="EmployeesContainer" runat="server" />

</fieldset>

<asp:Panel ID="HierarchyPanel" runat="server" CssClass="wrapper">

<table id="products" class="products">

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr id="ProductTitlePlaceHolder" runat="server">

</tr>

</tbody>

</table>

</asp:Panel>

<table cellpadding="0" cellspacing="0" width="100%;" style="clear: both;">

<tr>

<td>

<telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1" OnPreRender="Pager_Pre"

PageSize="2" Visible='<%# Container.PageCount != 1%>'>

<Fields>

<telerik:RadDataPagerButtonField FieldType="FirstPrev" />

<telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="5" />

<telerik:RadDataPagerButtonField FieldType="NextLast" />

<telerik:RadDataPagerTemplatePageField>

<PagerTemplate>

<div style="float: right">

<b>Items

<asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />

to

<asp:Label runat="server" ID="TotalPagesLabel"

Text="<%# Container.Owner.TotalRowCount > (Container.Owner.StartRowIndex+Container.Owner.PageSize) ? Container.Owner.StartRowIndex+Container.Owner.PageSize : Container.Owner.TotalRowCount %>" />

of

<asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />

<br />

</b>

</div>

</PagerTemplate>

</telerik:RadDataPagerTemplatePageField>

</Fields>

</telerik:RadDataPager><br /><br />

</td>

</tr>

</table>

</LayoutTemplate>

<ItemTemplate>

<tr>

<td class="expand">

<img src="../Images/Default%20Images/SinglePlus.gif" alt="Plus" onclick="toggleOrderDetails(this)" />

</td>

<td colspan="4">

<b>Title:</b> <asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' /><br />

<br />

</td>

</tr>

<tr class="orders" style="display: none;">

<td class="expand">

</td>

<td colspan="4">

<telerik:RadListView ID="RadListView2" runat="server" ItemPlaceholderID="OrderDetailsPlaceHolder"

EnableViewState="false">

<LayoutTemplate>

<table>

<asp:PlaceHolder ID="OrderDetailsPlaceHolder" runat="server"></asp:PlaceHolder>

</table>

</LayoutTemplate>

<ItemTemplate>

<tr>

<td>

<b>Date Start:</b>

<%#Eval("EventStart")%>

</td>

</tr>

<tr>

<td>

<b>Date End</b>

<%#Eval("EventEnd")%>

</td>

</tr>

<tr>

<td>

<b>Street</b>

<%#Eval("Street")%>

</td>

</tr>

<tr>

<td>

<b>City:</b>

<%# Eval("City") %>

</td>

</tr>

<tr>

<td>

<b>Content</b>

<%#Eval("Content")%>

</td>

</tr>

<tr>

<td>

<b>Summary</b>

<%#Eval("Summary")%>

</td>

</tr>

</ItemTemplate>

</telerik:RadListView>

</td>

</tr>

</ItemTemplate>

</telerik:RadListView>

</div>

</body>

Here is my CodeBehind

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Sitefinity.Events.Model;

using Telerik.Sitefinity.GenericContent.Model;

using Telerik.Sitefinity.Modules.Events;

using Telerik.Sitefinity.Taxonomies;

using Telerik.Web.UI;

namespace SitefinityWebApp.UserControls

{

public partial class Events : System.Web.UI.UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Pager_Pre(object sender, System.EventArgs e)

{

}

protected void listItems_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)

{

}

protected void Page_Init(object sender, System.EventArgs e)

{

LoadData();

}

protected void LoadData()

{

TaxonomyManager taxMan = TaxonomyManager.GetManager();

var tags = taxMan.GetTaxonomy(TaxonomyManager.TagsTaxonomyId).Taxa;

tagSelector.DataTextField = "Title";

tagSelector.DataValueField = "Id";

tagSelector.DataSource = tags;

tagSelector.DataBind();

EventsManager eventsMan = EventsManager.GetManager();

var cities = eventsMan.GetEvents().Select(evt => evt.City.ToString()).ToList().Distinct();

citySelector.DataSource = cities;

citySelector.DataBind();

}

protected void Submit_Click(object sender, EventArgs e)

{

EventsManager eventsMan = EventsManager.GetManager();

string tagId;

if (tagSelector.SelectedIndex == -1)

{

tagId = "";

}

else

{

tagId = tagSelector.SelectedValue;

}

string city;

if (citySelector.SelectedIndex == -1)

{

city = "";

}

else

{

city = citySelector.SelectedItem.Text;

}

int? totalCount = -1;

IQueryable<Event> events = null;

if (!tagId.IsNullOrWhitespace())

{

events = eventsMan.Provider.GetItemsByTaxon(

new Guid(tagId),

false,

"Tags",

typeof(Event),

"Status = Master", "",

0, 100, ref totalCount).Cast<Event>().AsQueryable();

}

else

{

events = eventsMan.GetEvents()

.Where(evt => evt.Status == ContentLifecycleStatus.Master)

.Skip(0)

.Take(100);

}

if (!city.IsNullOrWhitespace())

events = events.Where(evt => evt.City == city);

if (RadDatePicker1.SelectedDate != null)

events = events.Where(evt => evt.EventStart >= RadDatePicker1.SelectedDate);

if (RadDatePicker2.SelectedDate != null)

events = events.Where(evt => evt.EventStart <= RadDatePicker2.SelectedDate);

RadListView1.DataSource = events;

RadListView1.DataBind();

LoadData();

foreach (RadListViewDataItem item in RadListView1.Items)

{

Label TitleLabel = (Label)item.FindControl("TitleLabel");

RadListView lb = (RadListView)item.FindControl("RadListView2");

string test = TitleLabel.Text;

IQueryable<Event> Subevents = null;

Subevents = eventsMan.GetEvents().Where(evt => (evt.Title == test && evt.Status == ContentLifecycleStatus.Live));

lb.DataSource = Subevents;

lb.DataBind();

}

1 Answer, 1 is accepted

answered on 09 Jan 2013, 02:10 PM

Hello Rajeev,

In order to prevent the first item to expand on load you have to remove this code from the JavaScript pageLoad:

if (expandImg.src.indexOf("Plus") > -1) {

toggleOrderDetails(expandImg);

}

The paging problem comes from the use of simple data binding. When using this kind of binding you will need to assign data-source and rebind the list view after each paging. If you use advanced data binding the problem should be resolved automatically. To get a more clear view over the differences in data-binding please review this help article.

Kind regards,
Angel Petrov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.