Grid (ListView) Data not Displaying

[TAD RHODES]

Hello:

I am trying to get a grid to show as a listview using your demo http://demos.telerik.com/aspnet-ajax/grid/examples/programming/listview/defaultcs.aspx.

The only way I can get anything to display on the screen is to comment out the lines showing in the following prerender statement.

        protected void rgdImg_PreRender(object sender, EventArgs e)
        {
            int itemCount = rgdImg.MasterTableView.GetItems(GridItemType.Item).Length + rgdImg.MasterTableView.GetItems(GridItemType.AlternatingItem).Length;
            foreach (GridItem item in rgdImg.Items)
            {
                //if (item is GridDataItem && item.ItemIndex < itemCount)
                //{
                //    ((item as GridDataItem)["ImageID"] as TableCell).Controls.Add(new LiteralControl("<table><tr><td>"));
                //}
            }
        }

The data that shows up is all over the place, not in a nice tabular form. Some will be in the grid, some appear to be outside etc.

If I uncomment the lines of code in the prerender I get nothing to display in the grid at all. It will iterate through the grid.items etc. as it should but nothing will display. I have verified that the data is in the datasource when bound.

My Radgrid code is below

                        <telerik:RadGrid ID="rgdImg" runat="server"
                                         AllowPaging="true"
                                         PageSize="4"
                                         EnableHeaderContextMenu="false"
                                         OnNeedDataSource="rgdImg_NeedDataSource"
                                         ShowFooter="false"
                                         AutoGenerateColumns="false"
                                         OnItemCommand="rgdImg_ItemCommand"
                                         OnItemDataBound="rgdImg_ItemDataBound"
                                         OnPreRender="rgdImg_PreRender">

                            <MasterTableView TableLayout="Fixed"
                                             EnableHeaderContextMenu="false"
                                             DataMember="Image">
                                <Columns>
                                    <telerik:GridBoundColumn UniqueName="ImageID" ReadOnly="true" Display="false" DataField="ImageID" />
                                    <telerik:GridTemplateColumn>
                                    <ItemTemplate>
                                            <%#  (((GridItem)Container).ItemIndex != 0)? "</td></tr></table>" : "" %>
                                            <asp:Panel ID="pnlGrid" runat="server" CssClass='<%# (((GridItem)Container).ItemType == GridItemType.Item)? "item" : "alternatingItem" %>'>
                                                <asp:Label ID="ImageID" runat="server" Visible="false" />
                                                <%# DataBinder.Eval(Container.DataItem, "ImageID") %>
                                                <asp:CheckBox ID="ckImage" runat="server" Checked="false" AutoPostBack="true" OnCheckedChanged="rgdImg_OnCheckedChanged" />&nbsp;&nbsp;
                                                <asp:Image ID="image" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "RelPath") %>' />
                                                <br />
                                                <asp:Label ID="lblImageName" runat="server" Text="Image Name:   "></asp:Label>
                                                <%# DataBinder.Eval(Container.DataItem, "Name") %>
                                                <br />
                                                <asp:Label ID="lblArtType" runat="server" Text="Type:   "></asp:Label>
                                                <%# DataBinder.Eval(Container.DataItem, "Type") %>
                                                <br />
                                                <asp:Label ID="lblImageTag" runat="server" Text="Tags:  "></asp:Label>
                                                <%# DataBinder.Eval(Container.DataItem, "Tag") %>
                                                <br />
                                                <asp:Label ID="lblAltName" runat="server" Text="Alt. Name:  "></asp:Label>
                                                <%# DataBinder.Eval(Container.DataItem, "AltName") %>
                                                <br />
                                                <asp:Label ID="lblImageDescription" runat="server" Text="Description:   "></asp:Label>
                                                <%# DataBinder.Eval(Container.DataItem, "Description") %>
                                            </asp:Panel>
<%--                                            <%# (((GridItem)Container).ItemIndex != (((GridItem)Container).OwnerTableView.PageSize - 1))? "<table style='display:none;'><tr><td>" : "" %>
--%>                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                </Columns>
                                </MasterTableView>
                            <ClientSettings>
                                <Selecting AllowRowSelect="true" />
                            </ClientSettings>
                        </telerik:RadGrid>

Thanks for your time.

[Veli]

Hello TAD,

You are not building the proper layout. Note that the example you are referring to uses the global ItemTemplate of the GridTableView. In your case, you are using a GridTemplateColumn. This is all fine, by itself, but you are also adding HTML to the first hidden ImgID column on PreRender. This probably breaks the HTML and your layout.

To fix the layout:

1. Give your column a unique name:

<telerik:GridTemplateColumn UniqueName="template">
    <ItemTemplate>
...
    </ItemTemplate>
</telerik:GridTemplateColumn>

2. Use the "template" column to add HTML in PreRender:

int itemCount = rgdImg.MasterTableView.GetItems(GridItemType.Item).Length + rgdImg.MasterTableView.GetItems(GridItemType.AlternatingItem).Length;
foreach (GridItem item in rgdImg.Items)
{
    if (item is GridDataItem && item.ItemIndex < itemCount)
    {
        ((item as GridDataItem)["template"] as TableCell).Controls.Add(new LiteralControl("<table style='display:none'><tr><td>"));
    }
}

3. Note in the above sample how I also hide the table that I create ( setting display: none).

Best wishes,
Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Chris]

I am using the same template as in the example, however, but i do not get the grid displayed correctly, either.  Take a look at my code below, please.  Am I missing anything?

<telerik:RadGrid ID="grdMemberSearch" runat="server" AllowPaging="true" AllowSorting="true"
                                GridLines="None" PageSize="9" Skin="Telerik" ShowHeader="false" EnableViewState="false"
                                OnPreRender="grdMemberSearch_PreRender">
                                <PagerStyle Mode="NextPrevAndNumeric" />
                                <MasterTableView TableLayout="Fixed">
                                    <ItemTemplate>
                                        <%# (((GridItem)Container).ItemIndex != 0) ? "</td></tr></table>" : "" %>
                                        <asp:Panel ID="ItemContainer" CssClass='<%# (((GridItem)Container).ItemType == GridItemType.Item)? "item" : "alternatingItem" %>'
                                            runat="server">
                                            <%# Eval("NombreCompleto")%>
                                            <br />
                                            <%# Eval("ProfesionTxt")%>
                                            <br />
                                            <%# Eval("DireccionFisica")%>,
                                            <%# Eval("DireccionFisica2")%>
                                            <br />
                                            <%# Eval("CiudadFisica")%>,
                                            <%# Eval("EstadoFísico")%>
                                            <%# Eval("ZipCodeFisico")%>
                                            <br />
                                            <%# Eval("TelefonoPrimario")%>
                                            <br />
                                        </asp:Panel>
                                        <%# (((GridItem)Container).ItemIndex != (((GridItem)Container).OwnerTableView.PageSize - 1)) ? "<table style='display:none;'><tr><td>" : ""%>
                                    </ItemTemplate>
                                </MasterTableView>
                                <GroupingSettings CaseSensitive="false" />
                            </telerik:RadGrid>

protected void grdMemberSearch_PreRender(object sender, EventArgs e)
            {
            int itemCount = (sender as RadGrid).MasterTableView.GetItems(GridItemType.Item).Length + (sender as RadGrid).MasterTableView.GetItems(GridItemType.AlternatingItem).Length;
            foreach (GridItem item in (sender as RadGrid).Items)
                {
                if (item is GridDataItem && item.ItemIndex < itemCount - 1)
                    {
                    ((item as GridDataItem)["PerfilId"] as TableCell).Controls.Add(new LiteralControl("<table style='display:none;><tr><td>"));
                    }
                }
            }

[Veli]

Hello Chris,

Cannot spot anything wrong with your listview layout. The screen shot shows a RadGrid containing a single item in a listview layout and it appears to render OK. What should I be looking at? The code also seems fine.

Greetings,
Veli
the Telerik team

[Chris]

I was trying to mimic the example code where there are 9 items in the grid (a 3x3 grid).  I copied the code, but only 1 item was showing.

[Veli]

Hello Chris,

Attached is the RadGrid CardView/ListView layout demo on a stand-alone page along with sample data. You can add the files to an ASP.NET WebSite, reference your Telerik.Web.UI assembly and run it.

Greetings,
Veli
the Telerik team

[Chris]

Thanks...I'll take a look and let you know.

[Chris]

Thanks for your help, Veli.  I had the exact same code, except iIn the code behind, I was missing the closing quotation on the style attribute of the table tag.  Thanks again.

 

Chris