Boostrap Style Layout

2 posts, 0 answers
  1. Colin Wright
    Colin Wright avatar
    26 posts
    Member since:
    Mar 2008

    Posted 14 Sep Link to this post

    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>

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 16 Sep Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top