Swithing between grid and list view

[miksh]

Thanks for a great sample to display items in a listview mode shown here  http://demos.telerik.com/aspnet-ajax/grid/examples/programming/listview/defaultcs.aspx

I wonder is there a way to switch between listlivew and grid view?
Here are two examples of such functionality:

• http://www.cablestogo.com/product_list.asp?cat%5Fid=2010 (click an icon next to the number of items on page to switch grid/list view)
• http://www.homedepot.ca/webapp/wcs/stores/servlet/CatalogSearchResultView?catalogId=10051&storeId=10051&langId=-15&N=0&Ntk=level1&Ntt=power%20cord&Nty=1&D=power%20cord&Ntx=mode+matchallpartial&Dx=mode+matchallpartial&s=true (similar icons to switch grid/list view plus hover mouse over the product image and click Quick view)

If you could achieve it you'll be the best.

Thanks,
Michael

[Yavor]

Hello miksh,

Basically, there are two options with this respect.
The first would be to create the grid completely programmatically. When the page loads, you determine whether you need to build a standard grid, or one in a ListView mode.
Alternatively, you can declare statically the two controls - one with standard columns structure, and one in a ListView mode. Then, depending on the preferences of the end user, you can toggle on/off the visibility of the controls and show only one of them.
I hope this suggestion helps.

Best wishes,
Yavor
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Alan T]

Sorry to revive an old topic, but is the method Yavor suggested still the only way to achieve this? I'm sure i remember seeing such functionality on one of the demos on the telerik site. Perhaps i'm wrong but just wanted to clarify .

Al

[Alan T]

bump

[Sebastian]

Hello Alan,

There is already much cleaner solution than the previous one - simply use our grid for the table layout presentation and our listview component (introduced with the Q3 2009 release of the suite) for list presentation.

Kind regards,
Sebastian
the Telerik team

[Alan T]

Thanks for the response. So there isn't a single control that i can accomplish both on ? So i'm guessing i need to define a radgrid and a radlistview in different pageviews or something then, use a radtabstrip to switch between the views? Or is there a better implementation you'd suggest?

Because that way i'd need to rebind the data each time wouldn't i ? And say for example i have a radgrid with mutliple pages, i select page 2 then change to the listview. I'm going to have to add some additional functionality to get it to return the same results. 

[Sebastian]

Hello Alan T,

Indeed you can use grid and listview side-by-side and switch their visibility either using their Visible property ot by means of tabs. When the grid or listview are not visible (they have Visible =false setting), they will not be bound to data, hence you should not worry about performance penalty when using two components.

An alternative solution would be to use two listviews with different predefined layouts (floated tiles and grid, see this demo for reference). RadListView supports paging (integrated or using RadDataPager,
hence you should be able to bind the grid/listview to the same data and then navigate between different pages.

Best regards,
Sebastian
the Telerik team

[Alan T]

Thanks for your response Seb, i'll see if i can accomplish what i need using the ListView predefined layouts example you suggested. Perhaps see if its possible to change the LayoutTemplate when i change between views? That would should mean i'm dealing with the same data rather than having to rebind wouldn't it ?

Al

[Sebastian]

Hello Alan T,

You can change the RadListView layout if you built the control and its templates each time on PageInit as shown on this demo. However, you can still need to bind the listview to data each time. This pretty much destroys the purpose of having a single listview and altering its structure dynamically instead of having two separate grid/listview controls and change their visibility on-the-fly.

Regards,
Sebastian
the Telerik team