# Dynamically changing between list and grid view

**URL:** <https://discuss.emberjs.com/t/dynamically-changing-between-list-and-grid-view/5797>\
**Category:** Design\
**Created:** [June 30, 2014, 8:23am UTC](https://discuss.emberjs.com/t/dynamically-changing-between-list-and-grid-view/5797 "2014-06-30T08:23:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![andersennl](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/andersennl/32/15941_2.png) [@andersennl](https://discuss.emberjs.com/u/andersennl)\
**Post date:** [June 30, 2014, 8:23am UTC](https://discuss.emberjs.com/t/dynamically-changing-between-list-and-grid-view/5797/1 "2014-06-30T08:23:38Z")

</div>

I have two buttons to switch between a list and a grid view, showing users. Right now, the switch happens by the use of jQuery, adding classes and floats to existing divs. As this isn’t a really clean solution, I’m wondering if it’s possible to do this in some sort of “Ember way” by having two different erb partials, both showing the same content but in a different way, which can be exchanged against each other by the press of a button.

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [June 30, 2014, 2:05pm UTC](https://discuss.emberjs.com/t/dynamically-changing-between-list-and-grid-view/5797/2 "2014-06-30T14:05:42Z")

</div>

The forthcoming [Query Param’s](http://emberjs.com/guides/routing/query-params/) is your best option. That way you can use link-to’s for the buttions that will also give you active state class.

```
App.WhateverController = Ember.ArrayController.extend({
    queryParams: ['layout'],
    layout: 'list', // default
    viewList: Ember.computed.equal('layout', 'list'),
    viewGrid: Ember.computed.equal('layout', 'grid')
});

```

Template Option A

```
{{link-to 'List View' (layout='list')}}
{{link-to 'Grid View' (layout='grid')}}

{{#if viewList}}
    {{partial 'whatever.list'}}
    {{!-- or just your list code.. --}}
{{/if}}

{{#if viewGrid}}
    {{partial 'whatever.grid'}}
    {{!-- or just your grid code.. --}}
{{/if}}

```

Template Option B: Or just look for one type and provide default, in case the user types ?layout=dlkfa

```
{{link-to 'List View' (layout='list')}}
{{link-to 'Grid View' (layout='grid')}}

{{#if viewGrid}}
    {{partial 'whatever.grid'}}
    {{!-- or just your grid code.. --}}
{{else}}
    {{partial 'whatever.list'}}
    {{!-- or just your list code.. --}}
{{/if}}

```

An even simpler option is to just use the `layout` property in the `{{partial}}` helper, as shown in the [QP example](http://emberjs.jsbin.com/ucanam/2706). However, that doesn’t provide a “default view” in case the user types in something weird.

---

<div class="post-metadata">

**Author:** ![andersennl](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/andersennl/32/15941_2.png) [@andersennl](https://discuss.emberjs.com/u/andersennl)\
**Post date:** [June 30, 2014, 2:34pm UTC](https://discuss.emberjs.com/t/dynamically-changing-between-list-and-grid-view/5797/3 "2014-06-30T14:34:08Z")

</div>

Thank you so much for your answer and the detailed example.

---

<div class="post-metadata">

**Author:** ![johnnyicon](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/johnnyicon/32/13390_2.png) [@johnnyicon](https://discuss.emberjs.com/u/johnnyicon)\
**Post date:** [November 4, 2016, 10:30pm UTC](https://discuss.emberjs.com/t/dynamically-changing-between-list-and-grid-view/5797/4 "2016-11-04T22:30:40Z")

</div>

Great answer. I’m new to Ember and I’m curious, how would you do this now given that Controllers are deprecated?

---

<div class="post-metadata">

**Author:** ![kleiram](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kleiram/32/12440_2.png) [@kleiram](https://discuss.emberjs.com/u/kleiram)\
**Post date:** [November 4, 2016, 11:16pm UTC](https://discuss.emberjs.com/t/dynamically-changing-between-list-and-grid-view/5797/5 "2016-11-04T23:16:04Z")

</div>

I’d suggest using components for this now:

```
{{if gridView}}
    {{my-component/grid data=data}}
{{else}}
    {{my-component/list data=data}}
{{/if}}

```

Or even better:

```
{{component (if gridView "my-component/grid" "my-component/list") data=data}}

```

And in you `my-component.js` you can have the following:

```
export default Ember.Component.extend({
    gridView: false // default,

    actions: {
        toggleView() {
            this.toggleProperty('gridView');
        }
    }
});

```

---

<div class="post-metadata">

**Author:** ![johnnyicon](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/johnnyicon/32/13390_2.png) [@johnnyicon](https://discuss.emberjs.com/u/johnnyicon)\
**Post date:** [November 6, 2016, 9:47am UTC](https://discuss.emberjs.com/t/dynamically-changing-between-list-and-grid-view/5797/6 "2016-11-06T09:47:48Z")

</div>

Thanks! Looks much cleaner.