Listview has gaps when display images

2 posts, 0 answers
  1. Tonyz289
    Tonyz289  avatar
    50 posts
    Member since:
    Jun 2011

    Posted 09 Jan 2012 Link to this post

    I have a listview that has gaps in the display (see attached). Why?
    Here is the code displaying the listview

    <telerik:RadListView ID="RadListView1" runat="server" AllowPaging="True" ItemPlaceholderID="PlaceHolder1"
        OnItemCreated="RadListView1_ItemCreated" DataKeyNames="id,filenameextension,typeAbbr,title" onneeddatasource="RadListView1_NeedDataSource" >
        <LayoutTemplate>
            <div class="RadListView RadListViewFloated RadListView_Windows7">
                <telerik:RadDataPager ID="RadDataPager1" runat="server" Skin="Sitefinity" PageSize="25"
                    PagedControlID="RadListView1" BorderWidth="0" OnFieldCreated="RadDataPager1_FieldCreated">
                    <Fields>
                        <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                        <telerik:RadDataPagerButtonField FieldType="Numeric" />
                        <telerik:RadDataPagerButtonField FieldType="NextLast" />
                        <telerik:RadDataPagerPageSizeField PageSizeText="Page size: " />
                        <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
                            TextBoxWidth="15" />
                        <telerik:RadDataPagerTemplatePageField>
                            <PagerTemplate>
                                <div style="float: right">
                                    <b>Total Number of Assets Found:
                                        <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
                                    </b>
                                </div>
                            </PagerTemplate>
                        </telerik:RadDataPagerTemplatePageField>
                    </Fields>
                </telerik:RadDataPager>
                <asp:PlaceHolder id="PlaceHolder1" runat="server" />
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <div style="float: left; width: 200px">
                    <div class="myClass" style="border: 0px; white-space: normal; margin: 5px 5px 5px 5px; padding: 2px 2px 2px 2px; background: #eeeeee; text-align: center; width: 190px;">
                        <asp:HyperLink ID="HyperLink1" runat="server">
                            <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AutoAdjustImageControlSize="False"
                                CssClass="myClass" ImageUrl='<%# Eval("thumbUrl") %>' ResizeMode="Fit" AlternateText="Click to view preview"
                                ToolTip="Click to view preview" Width="150px" Height="150px" />
                        </asp:HyperLink><br />
                    <asp:CheckBox ID="chkImage" runat="server" style="float: left;"/><small><asp:HyperLink ID="lnkAsset1" runat="server" Visible="false" style="float: left;" >
                                        </asp:HyperLink><asp:HyperLink ID="lnkAsset2" runat="server" style="float: left;" Visible="false" >
                                        </asp:HyperLink><asp:HyperLink ID="lnkAsset3" runat="server" style="float: left;" >
                                        </asp:HyperLink></small>
                    <asp:HiddenField ID="hiddenAssetId" Value='<%# Eval("id") %>' runat="server" />
                </div>
            </div>
        </ItemTemplate>
        <EmptyDataTemplate>
            No Assets Found
        </EmptyDataTemplate>
    </telerik:RadListView>
  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 10 Jan 2012 Link to this post

    Tony:

    It's quite probable that your gaps are caused by nulls in the data source, or possibly by items with missing images.

    You can use RadListView's "EmptyDataTemplate" to format the gaps.

    <telerik:RadListView ID="RadListView4" DataSourceID="SqlDataSource1" runat="server"
        ItemPlaceholderID="EmployeesContainer">
        <EmptyDataTemplate>
            <fieldset style="width: 930px">
                <legend>Customers</legend>No records for customers available.
            </fieldset>
        </EmptyDataTemplate>
    </telerik:RadListView>

    Hope this helps!
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top