RadPanelBar panelItem paging?

[Karl]

I have a page that dynamically builds RadPanelItems and adds them to an empty RadPanelBar in my aspx page. the number of these RadPanelItems could be 5 or it could be 505 so I need a way to control how big my page gets.

Is there a way of paging the number of RadPanelItems that are shown in a RaadPanelBar? I've thought about creating a brand new RadPanelBar for each item and putting them in a grid, but what complicates matters is that each RadPanelItem has a dynamically created grid inside!

What I effectively need need is the following...

RadGrid (paged)
    row 
        RadPanelBar
            RadPanelItem (Dynamically created)
                RadGrid (Dynamically created)
    row
        RadPanelBar
            RadPanelItem (Dynamically created)
                RadGrid (Dynamically created)
    row
        RadPanelBar
            RadPanelItem (Dynamically created)
                RadGrid (Dynamically created)

etc.

It would be so much easier if I could just say on a single RadPanelBar "PageSize=10", but then I guess this isnt really what the panel bar was designed for.

Any suggestions?

[Nikolay Tsenkov]

Hello Karl,

Here is an idea:
 - Why don't you use the RadDataPager control instead the whole RadGrid? Since you only need this functionality, there is no need to use the entire Grid control.
Here is a demo of how well the DataPager can embed (one might want to say "be embedded-in") another controls: http://demos.telerik.com/aspnet-ajax/datapager/examples/raddatapagerintegration/defaultcs.aspx


Regards,
Nikolay Tsenkov
the Telerik team

[Karl]

After looking at the RadDataPager, it seems you can only bind enumerable data to it, so I'm not sure that would help.

I've drawn up some very crude image to try to highlight what I want to accomplish which I'm sure is very simple, but I can't see the wood for the trees at the moment...

Image 1 shows the page when the user first vists, and shows a grid with 5 rows. each row whould be a collapsed RadPanelBar/RadPanelItem.

Image 2 shows the grid after the user has clicked on the page 3 link

Image 3 shows the grid on page 3, with the 12th row expanded and another grid inside that row showing the sub data for it.

I mentioned that a pagesize on the RadPanelBar would be ideal, but thing about it, an expand/collapse option for grid rows would also be a great solution. Alas, neither of these are options. Perhaps you could put this forward to the dev team to implement in a future release?

[Karl]

I have just stumbled upon NestedViewTemplates and they sound like exactly what I need. I've been playing with them for the last hour or so but am having a trouble binding data to a RadGrid inside the NestedViewTemplate.

My DataSource for the OuterGrid is a list of objects, and the DataSource for the RadGrid inside the NestedVewTemplate (the InnerGrid) needs to be a property of the DataItem for each row in the OuterGrid, which is itself a list of objects.

I have set configured these methods to set the DataSource for each of the grids. The OuterGrid gets its data ok, but when I expand one of the rows in it, the InnerGrid's NeedsDataSource event doesn't fire and the row expands to reveal an empty grid. However, when I try to collapse the OuterGrid row, the event does fire (why does it need a DataSource when its collapsing?) but it cant find the DataItem for the OuterGrid's row so effectively theres no data to bind.

Can anyone spot what I'm doing wrong?

[Karl]

I've just found and commented on a similar issue here...

Of course the expand/collapse isn;t half as pretty as the RadPanelBar solution but it works. If some animation could be put on the grid expand and collaps that matches the RadPanelBar, that'd be perfect!

[Nikolay Tsenkov]

Hello Karl,

Judging by the mockups you have previously sent, you probably will find more appropriate to use one of our newest controls, which we have recently introduced as part of RadControls for ASP.NET AJAX - RadTreeList.
Here is a demo of templated RadTreeList: http://demos.telerik.com/aspnet-ajax/treelist/examples/appearance/detailitemtemplate/defaultcs.aspx

Please, go through the demos of the control and let me know if you have any concerns regarding using it.


Regards,
Nikolay Tsenkov
the Telerik team

[Karl]

Thanks for getting back to me Nikolay.

While the RadTreeList does an excellent job in terms of what I need, I am REALLY restricted in how the end product looks and behaves as we're in the process of upgrading a classic ASP site to ASP.Net so that we can build on it in the future.

Unfortunately it doesn't look like I can get the RadTreeList to look like I have described (even the NestedViewTemplate in the RadGrid is causing me issues as it tabs in a little on the left hand side when the row is expanded, as well as not sliding out nicely like the RadPanelItems do in a RadPanelBar)

Don't get me wrong, I love the Telerik controls and enjoy working with them and they make my day to day life so much easier, but occasionally they seem to lack a few basic features that were easily accomplished in Classic ASP and JQuery, and make may day much more difficult because of my restrictions

[Karl]

Hmmm...

I've been playing with this all day now and cannot understand why this page produces so many errors as there's nothing here out of the ordinary.

I've posted the contents of my testpage that uses a RadGrid (OuterGrid) to show a RadPanelBar (PanelBar) in each row which has one RadPanelItem (PanelItem) that contains another RadGrid (InnerGrid).

PanelItem displays summary information about a package, and InnerGrid displays items within that package.

if anyone can see whay the paging does't work, or why i occasionally get ScriptResource errors when refreshing the page I'd be delighted to know what you find!

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadGridTest.aspx.cs" Inherits="TestPages.RadGridTest" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server">
        </asp:ScriptManager>

        <asp:UpdatePanel runat="server">
            <ContentTemplate>

                <telerik:RadGrid
                        id="OuterGrid"
                        AutoGenerateColumns="false"
                        runat="server"
                        OnItemDataBound="OuterGrid_ItemDataBound"
                        width="800"
                        skin="Vista"
                        AllowPaging="true"
                        PageSize="3"
                        >
                    <PagerStyle Mode="NextPrevAndNumeric" Position="TopAndBottom" PageButtonCount="5" ShowPagerText="true" />
                    <MasterTableView>
                        <Columns>
                            <telerik:GridTemplateColumn >
                                <ItemTemplate>
                                    <telerik:RadPanelBar ID="PanelBar" runat="server" Width="700" Skin="Forest" >
                                        <Items>
                                            <telerik:RadPanelItem Value="PanelItem">
                                                <ContentTemplate>
                                                    <telerik:RadGrid ID="InnerGrid" runat="server" Skin="Sunset" />
                                                </ContentTemplate>
                                            </telerik:RadPanelItem>
                                        </Items>
                                    </telerik:RadPanelBar>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>

            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

Code behind...

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace TestPages
{
    public partial class RadGridTest : System.Web.UI.Page
    {
        Dictionary<string, Package> packages;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                LoadData();
                OuterGrid.DataSource = packages.Values;
            }
        }

        protected void LoadData()
        {
            if (!Page.IsPostBack)
            {
                /*
                The objects used in this page are below this class.
                Data would normally come from a database or webservices
                */
                #region Get data and create objects...
                packages = new Dictionary<string, Package>();
                Package package;
                PackageItem packageItem;
                List<PackageItem> packageItems;

                package = new Package(1, "Package One", "PACK-01");
                packageItems = new List<PackageItem>();
                packageItem = new PackageItem(1, 1, "Part-1-1", "Pack One Part One", decimal.Parse("1.10"), decimal.Parse("1"), decimal.Parse("1.10"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(2, 1, "Part-1-2", "Pack One Part Two", decimal.Parse("1.20"), decimal.Parse("2"), decimal.Parse("2.40"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(3, 1, "Part-1-3", "Pack One Part Three", decimal.Parse("1.30"), decimal.Parse("3"), decimal.Parse("3.90"));
                packageItems.Add(packageItem);
                package.Items = packageItems;
                packages.Add(package.PackageNumber, package);

                //Package Two
                package = new Package(2, "Package Two", "PACK-02");
                packageItems = new List<PackageItem>();
                packageItem = new PackageItem(1, 2, "Part-2-1", "Pack Two Part One", decimal.Parse("2.10"), decimal.Parse("1"), decimal.Parse("2.10"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(2, 2, "Part-2-2", "Pack Two Part Two", decimal.Parse("2.20"), decimal.Parse("2"), decimal.Parse("4.40"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(3, 2, "Part-2-3", "Pack Two Part Three", decimal.Parse("2.30"), decimal.Parse("3"), decimal.Parse("6.90"));
                packageItems.Add(packageItem);
                package.Items = packageItems;
                packages.Add(package.PackageNumber, package);

                //Package Three
                package = new Package(3, "Package Three", "PACK-03");
                packageItems = new List<PackageItem>();
                packageItem = new PackageItem(1, 3, "Part-3-1", "Pack Three Part One", decimal.Parse("3.10"), decimal.Parse("1"), decimal.Parse("3.10"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(2, 3, "Part-3-2", "Pack Three Part Two", decimal.Parse("3.20"), decimal.Parse("2"), decimal.Parse("6.40"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(3, 3, "Part-3-3", "Pack Three Part Three", decimal.Parse("3.30"), decimal.Parse("3"), decimal.Parse("9.90"));
                packageItems.Add(packageItem);
                package.Items = packageItems;
                packages.Add(package.PackageNumber, package);

                //Package Four
                package = new Package(4, "Package Four", "PACK-04");
                packageItems = new List<PackageItem>();
                packageItem = new PackageItem(1, 4, "Part-4-1", "Pack Four Part One", decimal.Parse("4.10"), decimal.Parse("1"), decimal.Parse("4.10"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(2, 4, "Part-4-2", "Pack Four Part Two", decimal.Parse("4.20"), decimal.Parse("2"), decimal.Parse("8.40"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(3, 4, "Part-4-3", "Pack Four Part Three", decimal.Parse("4.30"), decimal.Parse("3"), decimal.Parse("12.90"));
                packageItems.Add(packageItem);
                package.Items = packageItems;
                packages.Add(package.PackageNumber, package);

                //Package Five
                package = new Package(5, "Package Five", "PACK-05");
                packageItems = new List<PackageItem>();
                packageItem = new PackageItem(1, 5, "Part-5-1", "Pack Five Part One", decimal.Parse("5.10"), decimal.Parse("1"), decimal.Parse("5.10"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(2, 5, "Part-5-2", "Pack Five Part Two", decimal.Parse("5.20"), decimal.Parse("2"), decimal.Parse("10.40"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(3, 5, "Part-5-3", "Pack Five Part Three", decimal.Parse("5.30"), decimal.Parse("3"), decimal.Parse("15.90"));
                packageItems.Add(packageItem);
                package.Items = packageItems;
                packages.Add(package.PackageNumber, package);

                //Package Six
                package = new Package(6, "Package Six", "PACK-06");
                packageItems = new List<PackageItem>();
                packageItem = new PackageItem(1, 6, "Part-6-1", "Pack Six Part One", decimal.Parse("6.10"), decimal.Parse("1"), decimal.Parse("6.10"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(2, 6, "Part-6-2", "Pack Six Part Two", decimal.Parse("6.20"), decimal.Parse("2"), decimal.Parse("12.40"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(3, 6, "Part-6-3", "Pack Six Part Three", decimal.Parse("6.30"), decimal.Parse("3"), decimal.Parse("18.90"));
                packageItems.Add(packageItem);
                package.Items = packageItems;
                packages.Add(package.PackageNumber, package);

                //Package Seven
                package = new Package(7, "Package Seven", "PACK-07");
                packageItems = new List<PackageItem>();
                packageItem = new PackageItem(1, 7, "Part-7-1", "Pack Seven Part One", decimal.Parse("7.10"), decimal.Parse("1"), decimal.Parse("7.10"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(2, 7, "Part-7-2", "Pack Seven Part Two", decimal.Parse("7.20"), decimal.Parse("2"), decimal.Parse("14.40"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(3, 7, "Part-7-3", "Pack Seven Part Three", decimal.Parse("7.30"), decimal.Parse("3"), decimal.Parse("21.90"));
                packageItems.Add(packageItem);
                package.Items = packageItems;
                packages.Add(package.PackageNumber, package);

                //Package Eight
                package = new Package(8, "Package Eight", "PACK-08");
                packageItems = new List<PackageItem>();
                packageItem = new PackageItem(1, 8, "Part-8-1", "Pack Eight Part One", decimal.Parse("8.10"), decimal.Parse("1"), decimal.Parse("8.10"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(2, 8, "Part-8-2", "Pack Eight Part Two", decimal.Parse("8.20"), decimal.Parse("2"), decimal.Parse("16.40"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(3, 8, "Part-8-3", "Pack Eight Part Three", decimal.Parse("8.30"), decimal.Parse("3"), decimal.Parse("24.90"));
                packageItems.Add(packageItem);
                package.Items = packageItems;
                packages.Add(package.PackageNumber, package);

                //Package Nine
                package = new Package(9, "Package Nine", "PACK-09");
                packageItems = new List<PackageItem>();
                packageItem = new PackageItem(1, 9, "Part-9-1", "Pack Nine Part One", decimal.Parse("9.10"), decimal.Parse("1"), decimal.Parse("9.10"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(2, 9, "Part-9-2", "Pack Nine Part Two", decimal.Parse("9.20"), decimal.Parse("2"), decimal.Parse("18.40"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(3, 9, "Part-9-3", "Pack Nine Part Three", decimal.Parse("9.30"), decimal.Parse("3"), decimal.Parse("27.90"));
                packageItems.Add(packageItem);
                package.Items = packageItems;
                packages.Add(package.PackageNumber, package);

                //Package Ten
                package = new Package(10, "Package Ten", "PACK-10");
                packageItems = new List<PackageItem>();
                packageItem = new PackageItem(1, 10, "Part-10-1", "Pack Ten Part One", decimal.Parse("10.10"), decimal.Parse("1"), decimal.Parse("10.10"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(2, 10, "Part-10-2", "Pack Ten Part Two", decimal.Parse("10.20"), decimal.Parse("2"), decimal.Parse("20.40"));
                packageItems.Add(packageItem);
                packageItem = new PackageItem(3, 10, "Part-10-3", "Pack Ten Part Three", decimal.Parse("10.30"), decimal.Parse("3"), decimal.Parse("30.90"));
                packageItems.Add(packageItem);
                package.Items = packageItems;
                packages.Add(package.PackageNumber, package);
                #endregion

                ViewState["Packages"] = packages;
            }
            else
            {
                packages = (Dictionary<string, Package>)ViewState["Packages"];
            }
        }

        protected void OuterGrid_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridDataItem)
            {
                Package package = (Package)e.Item.DataItem;
                if (package != null)
                {
                    RadPanelBar panelBar = (RadPanelBar)e.Item.FindControl("PanelBar");
                    if (panelBar != null)
                    {
                        RadPanelItem panelItem = (RadPanelItem)panelBar.FindItemByValue("PanelItem");
                        if (panelItem != null)
                        {
                            panelItem.Text = package.PackageName;
                            RadGrid innerGrid = (RadGrid)panelItem.FindControl("InnerGrid");
                            if (innerGrid != null)
                            {
                                innerGrid.DataSource = package.Items;
                            }
                        }
                    }
                }
            }
        }
    }

    //Classes that make up the data
    [Serializable]
    public class Package : IComparable<Package>
    {
        List<PackageItem> _items = new List<PackageItem>();
        public int Id { get; set; }
        public string PackageName { get; set; }
        public string PackageNumber { get; set; }
        public List<PackageItem> Items
        {
            get { return _items; }
            set { _items = value; }
        }
        public Package(int id, string packageName, string packageNumber)
        {
            Id = id;
            PackageName = packageName;
            PackageNumber = packageNumber;
        }
        public int CompareTo(Package other)
        {
            return Id.CompareTo(other.Id);
        }
        public override string ToString()
        {
            return string.IsNullOrEmpty(PackageName) ? "Unknown Package" : PackageName;
        }
    }

    [Serializable]
    public class PackageItem : IComparable<PackageItem>
    {
        public int Id { get; set; }
        public int PackageId { get; set; }
        public string PartCode { get; set; }
        public string Description { get; set; }
        public decimal UnitPrice { get; set; }
        public decimal Amount { get; set; }
        public decimal Total { get; set; }
        public PackageItem(int id, int packageId, string partCode, string description, decimal unitPrice, decimal amount, decimal total)
        {
            Id = id;
            PackageId = packageId;
            PartCode = partCode;
            Description = description;
            UnitPrice = unitPrice;
            Amount = amount;
            Total = total;
        }
        public int CompareTo(PackageItem other)
        {
            return Id.CompareTo(other.Id);
        }
        public override string ToString()
        {
            return string.IsNullOrEmpty(PartCode) ? "Unknown PartCode" : PartCode;
        }
    }
}

[Nikolay Tsenkov]

Hello Karl,

You need to bind the RadGrid on every page life-cycle (currently you are binding it only on initial load).
Simply change your Page_Load handler as follows:

protected void Page_Load(object sender, EventArgs e)
{
 LoadData();
 OuterGrid.DataSource = packages.Values;
}

Regards,
Nikolay Tsenkov
the Telerik team

[Karl]

Hi Nikolay,

The "if(!Page.IsPostBack)" check is a remnant of some testing I was doing but even without it the page was still erroring. I have a support ticket open on this in which I've been told it was an issue with 2010.3.1215 which was fixed in 2010.3.1317.
 
I'm in the middle of testing it now, but it's looking like updating the project to the 2010.3.1317 version of the DLL has fixed this issue but I have another now (unrelated) which has sidetracked me for a short while.