This is a migrated thread and some comments may be shown as answers.

Boostrap Style Layout

1 Answer 34 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Colin Wright
Top achievements
Rank 1
Colin Wright asked on 14 Sep 2016, 08:17 AM

Hi,

I am in the process of converting to an Kendo MVC application and using a bootstrap style framework.

I was looking for an example in Kendo ListView that I could achieve in a RadListView with the following code. Setting pagesize to 3 and displaying 3 items horizontally.

<telerik:RadListView ID="RadListView1" runat="server" OnNeedDataSource="RadListView1_NeedDataSource" ItemPlaceholderID="PlaceHolder1" PageSize="3" AllowPaging="true" Width="100%">
                       <LayoutTemplate>
                           <div class="row uniform">
                               <asp:PlaceHolder ID="PlaceHolder1" runat="server" />
                           </div>
                       </LayoutTemplate>
                       <ItemTemplate>
 
                           <div class="4u 12u(narrower)">
                               <div class="boxwrapper style1">
                                   <section class="box special">
                                       <span class="image fit">
                                           <telerik:RadBinaryImage ID="RadBinaryImage2" runat="server" AutoAdjustImageControlSize="false" DataValue='<%#Eval("ArticleImage") %>' />
                                       </span>
                                       <h5><%# DataBinder.Eval(Container, "DataItem.Title")%></h5>
                                       <a class="button" href='<%#Eval("ID", "ShowArticle.aspx?id={0}") %>'>Learn More..</a>
                                   </section>
                               </div>
                           </div>
 
                       </ItemTemplate>
                   </telerik:RadListView>

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 16 Sep 2016, 07:29 AM
Hello Colin,

The ListView / Basic usage demo shows how to display horizontally items with CSS. You can just set the pageSize to 3 - http://dojo.telerik.com/OtuJI

Regarding the RadListView control I have modified the RadListView - Telerik ASP.NET ListView demo with your approach but the listview items are not aligned horizontally - http://screencast.com/t/MInCVJ8z. You can find the attached page I have used for the testing as well.

Regards,
Danail Vasilev
Telerik by Progress
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 Feedback Portal and vote to affect the priority of the items
Tags
ListView
Asked by
Colin Wright
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or