Slickgrid define grid model for sortable categories of rows

Question

I'm a new to slickgrid, and not sure how to display the data as attached with the screenshot below. I read grouping example, but it's grouped by an existing column and not sortable. In the example, each category has multiple items with prices, and it's sorted by Category name and price.

Any help with displaying the data so that category is sortable is greatly appreciated.

Thanks so much.

Lanny

Answer 1

After spending more time with the examples, I learned that I can define what I want to display in columns obj. In data obj, I can have as many properties as I want.

In the code example, the first column is the actual product, but the name is Category, it's kind of confusing but it's a business decision. After I added all the data, I added the category name in product column and set colspan to "*" before each group of products, so it expands to all columns. I'm sure that SlickGrid DataView group has a better solution than this, right now I haven't gotten that far. If someone can elaborate more on how to use DataView, I appreciate it.

code example: http://jsbin.com/efujox/2/

columns = [
    {id:"product", name:"Category", field:"product"},
    {id:"price", name:"Price", field:"price"},
    {id:"date", name:"Date", field:"date"}
];

data =[
    {id: 'p1', product: 'Item 332', category:'Category XBC', price: 5.99, date: '6/19/11'},
    {id: 'p2', product: 'Item 12', category:'Category XBC', price: 6.99, date: '8/20/11'},
    {id: 'p3', product: 'Item nVV', category:'Category CXV', price: 4.99, date: '5/11/12'},
    {id: 'p4', product: 'Item dcA', category:'Category CXV', price: 9.42, date: '8/11/11'}
];