.NET ListView replacement (for shopping cart)?

[bemara57]

I started out using .NET 3.5's ListView to display products on a page and am missing a lot of features that Telerik controls have out of the box, like ajax, user entered pager settings, in-place editting (for administrators), and skins. My ListView display is simple- just a 3 row by 3 column product display, and each product has an image, name and price on top of each other. Can this be done with GridView or is it overkill for something like this? Is there maybe another Telerik control I should be using?

[Sebastian]

Hi bemara57,

Thank you for your feedback. I am happy to inform you that RadListView control built on top of ASP.NET 3.5 (extending the standard MS ListView control under that version of the framework) is in our future plans. We will have in mind the features you outlined in this forum post while shaping the ListView control for its first future release.

Unfortunately at this point I cannot provide an exact estimate for its release date. Stay tuned for more details.

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[bemara57]

That's really exciting- you guys are amazing. In the meantime, I was able to apply a simple Javascript hack to get the right layout. Check out my screenshot: http://72.91.140.189:8080/public/RadGrid_List_Layout.gif. It looks great and am fully and purely leveraging the RadGrid. Even though it looks good, it flickers whenever you click on something, so I've had to re-run the Javascript every time a click happens to re-adjust the layout.

This is my Javascript hack:
<telerik:RadCodeBlock id="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        // Adjust grid rows to listview layout
        function AdjustProductLayout(layoutNbr)
        {
            var rows = document.getElementById("<%= ProductsGridList.ClientID %>").getElementsByTagName('tr');
            var rowCount = 0;
           
            for(i = 0; i < rows.length; i++)
            {   
                if ((rows[i].className == 'GridRow_<%= ProductsGridList.Skin %>' ||
                    rows[i].className == 'GridAltRow_<%= ProductsGridList.Skin %>') &&
                    rowCount++ % layoutNbr == 0)
                {
                    rows[i].style.clear = 'left';
                }
            }
        }
    </script>
</telerik:RadCodeBlock>

I also had to put this in the code-behind:
    protected override void OnPreRender(EventArgs e)
    {
        // Adjust Grid layout CSS
        CssLiteral.Text = "<style type=\"text/css\"> tr.GridRow_" + ProductsGridList.Skin +
            ", tr.GridAltRow_" + ProductsGridList.Skin +
            " { float: left; margin: 10px 20px 20px 20px; } </style>";
     }

I also have this for every event to re-adjust the layout:
// Invoke Javascript layout handler        RadAjaxManager.GetCurrent(this.Page).ResponseScripts.Add("AdjustProductLayout(3)");

Looking at the source code for the RadGrid, I bet if you replace all the <table>, <tr>, and <td> with <div> and adjust purely with CSS, you'd have limitless boundaries on the layout.  I hope this helps jumpstart the direction I'm hoping for the RadGrid, which is probably more powerful than the ListView can ever be. It's an incredible control. Thanks again.

[bemara57]

Ok I think I jumped the gun because this doesn't work with IE. I found a very solid solution though. Check this out:

<telerik:RadGrid ID="ProductsGridList" runat="server"
    OnItemDataBound="ProductsGridList_ItemDataBound">
    <MasterTableView>
        <Columns>
           ...
        </Columns>
        <ItemTemplate>
            <asp:Literal ID="ItemContainerStartLiteral" runat="server"></asp:Literal>
                <asp:Panel ID="productPanel" runat="server">
                    <div class="productImage">
                        <asp:Image ID="productImage" runat="server"
                            ImageUrl='<%# Bind("Image") %>' />
                    </div>
                    <div class="productID">
                        <asp:Label ID="productID" runat="server"
                            Text='<%# Bind("ProductID") %>' />
                    </div>
                    <div class="productName">
                        <asp:Label ID="productName" runat="server"
                            Text='<%# Bind("Name") %>' />
                    </div>
                    <div class="productPrice">
                        <asp:Label ID="productPrice" runat="server"
                            Text='<%# Bind("ListPrice", "{0:C}") %>' />
                    </div>
                    <div class="productAddButton">
                        <asp:Button ID="productAddToCart" runat="server"
                            Text="Add to Cart"
                            CommandName="AddToCart" />
                    </div>
                </asp:Panel>
            <asp:Literal ID="ItemContainerEndLiteral" runat="server"></asp:Literal>
        </ItemTemplate>
    </MasterTableView>
</telerik:RadGrid>

Code behind:
    protected void ProductsGridList_ItemDataBound(object source, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem currentItem = e.Item as GridDataItem;

            Literal startContainer = (Literal)currentItem.FindControl("ItemContainerStartLiteral");
            Literal endContainer = (Literal)currentItem.FindControl("ItemContainerEndLiteral");
            Panel itemProductPanel = (Panel)currentItem.FindControl("productPanel");

            // Handle item container
            int index = currentItem.ItemIndex;

            itemProductPanel.CssClass = (index % 3 == 0) ? "productFirst" : "product";

            if (index != 0)
                startContainer.Text = "</td></tr></table>";

            if (index != (ProductsGridList.MasterTableView.PageSize - 1))
                endContainer.Text = "<table style='display:none;'><tr><td>";
        }
    }

And in my CSS:
.productFirst
{
    clear: left;
    float: left;
    padding: 20px 25px 20px 27px;
}

.product
{
    float: left;
    padding: 20px 25px 20px 25px;
}

Basically what it's doing is creating invisible tables between rows- so that entire contents of the outter table thinks it's in one big table cell. It works beautifully!

[Dimo]

Hello Basem,

This is an interesting technique, indeed. Thank you for showing it to us.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center