ListView and RadDatapager not working

2 posts, 0 answers
  1. Rajeev
    Rajeev avatar
    9 posts
    Member since:
    Nov 2012

    Posted 04 Jan 2013 Link to this post

    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 />
                    <br />
                    <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>
                </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();
     
                  
                }
            }
        }
    }
  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 09 Jan 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top