Arranging item in 4X4 format using listView

5 posts, 0 answers
  1. Ranjan
    Ranjan avatar
    38 posts
    Member since:
    Sep 2011

    Posted 16 Jan 2013 Link to this post

    Hello,
     I am using telerik listView control for displaying data on web page. I have 16 object in data source and I am binding in to list view control. What I want is that it should display 4X 4 format(4 rows and 4 columns) on page. When i am doing it is displaying all 16 elements in a single column. How I will do this?
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 21 Jan 2013 Link to this post

    Hello Ranjan,

    You take a look at this demo:

    http://demos.telerik.com/aspnet-ajax/listview/examples/appearancestyling/predefinedlayouts/defaultcs.aspx

    You can use the Floated Tiles built-in template, along with grouping to create your 4 by 4 layout. With the Floated Tiles, you'll need to set the width of each item so that when combined they take up the full width of the container. You can then use the Group Template as way to separate them, just in case the height's cannot be made the same, otherwise if they will be a fixed height you can set the height of the items and ignore the Grouping feature.

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ranjan
    Ranjan avatar
    38 posts
    Member since:
    Sep 2011

    Posted 22 Jan 2013 Link to this post

    Thanks Kevin,
    Your post is really helpful. I have another concerned. I want drag and drop functionality to reorder items. Is it possible in RadListView. If yes then how?
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Jan 2013 Link to this post

    Hi,

    Try the following steps to enable Items Drag & Drop in RadListView.

       1) Set RadListView.ClientSettings.AllowItemsDragDrop="true".
       2)  Add a RadListViewItemDragHandle control to your ItemTemplate / AlternatingItemTemplate.
       3)  Add a CSS marker on a data item container element (.rlvI for ItemTemplate, .rlvA for AlternatingItemTemplate)

    Please take a look into this documentation and demo for more information.

    Hope this helps.

    Regards,
    Princy.
  6. Ranjan
    Ranjan avatar
    38 posts
    Member since:
    Sep 2011

    Posted 23 Jan 2013 Link to this post

    Hi Princy,
    In your example we drag the list view items to some other source. But in my scenario I am reordering the element of a rad list view items which are arranges in 4X4 matrix format. For example i drag item which is on 4th place and drop on 1st place and there order has been changed.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017