CODEWITHSUNDEEP
javascriptjqueryjqgrid
Evan
Evan

Reputation: 6115

jQGrid sorting data locally two columns grouping

Let's say I have two columns in a local data jqGrid, one of them a name column, and the other a date column. There can be duplicates in the name column. What I would like is when I sort the name column, it gets sorted, but for the duplicates the date column will secondarily sort.

For example, lets say the data looks like :

Date             Name
1/2/2013         EBC
1/3/2013         BBC
2/4/2013         EBC
3/2/2013         BBC
4/3/2013         ABC
4/2/2013         ABC

I want it to be sorted like:

Date             Name
4/2/2013         ABC
4/3/2013         ABC
1/3/2013         BBC
3/2/2013         BBC
1/2/2013         EBC
2/4/2013         EBC

Where you can see the dates are also sorted. Instead, when I'm sorting now I'm seeing something like this:

Sample Image Report

My colModels are simple:

{
    name : 'ymd',
    index : 'ymd',
    width : 90,
    sorttype : "date",
    align : 'center',
    search : true
}, 
{
    name : 'placement_inv_code',
    index : 'placement_inv_code',
    width : 80,
    align : 'center',
    search : true
}

Anyway, is there an easy way to do this sorting when I initialize with local data?

Data sample :

[{"ymd":"2013-09-05","placement_id":"1","placement_inv_code":"foodgawker","num_imps":"313030","num_sold_imps":"128800","num_default_imps":"184230","num_mouseovers":"10877","num_interactions":"0","num_clicks":"151","num_shares":"49","num_social_clicks":"13","num_estimated_social_reach":"4854"},{"ymd":"2013-09-05","placement_id":"58","placement_inv_code":"stylegawker","num_imps":"3680","num_sold_imps":"3565","num_default_imps":"115","num_mouseovers":"250","num_interactions":"0","num_clicks":"5","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-05","placement_id":"59","placement_inv_code":"craftgawker","num_imps":"145590","num_sold_imps":"68425","num_default_imps":"77165","num_mouseovers":"4802","num_interactions":"0","num_clicks":"19","num_shares":"11","num_social_clicks":"0","num_estimated_social_reach":"1296"},{"ymd":"2013-09-05","placement_id":"60","placement_inv_code":"dwellinggawker","num_imps":"6325","num_sold_imps":"6325","num_default_imps":"0","num_mouseovers":"496","num_interactions":"0","num_clicks":"15","num_shares":"2","num_social_clicks":"0","num_estimated_social_reach":"217"},{"ymd":"2013-09-05","placement_id":"61","placement_inv_code":"weddinggawker","num_imps":"15985","num_sold_imps":"15870","num_default_imps":"115","num_mouseovers":"783","num_interactions":"0","num_clicks":"18","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-05","placement_id":"77","placement_inv_code":"foodgawker_mobile_web","num_imps":"24150","num_sold_imps":"8740","num_default_imps":"15410","num_mouseovers":"287","num_interactions":"0","num_clicks":"20","num_shares":"7","num_social_clicks":"1","num_estimated_social_reach":"644"},{"ymd":"2013-09-05","placement_id":"78","placement_inv_code":"stylegawker_mobile_web","num_imps":"460","num_sold_imps":"0","num_default_imps":"460","num_mouseovers":"0","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-05","placement_id":"79","placement_inv_code":"craftgawker_mobile_web","num_imps":"40595","num_sold_imps":"9660","num_default_imps":"30935","num_mouseovers":"593","num_interactions":"0","num_clicks":"11","num_shares":"6","num_social_clicks":"0","num_estimated_social_reach":"604"},{"ymd":"2013-09-05","placement_id":"80","placement_inv_code":"dwellinggawker_mobile_web","num_imps":"460","num_sold_imps":"0","num_default_imps":"460","num_mouseovers":"13","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-05","placement_id":"81","placement_inv_code":"weddinggawker_mobile_web","num_imps":"4830","num_sold_imps":"0","num_default_imps":"4830","num_mouseovers":"0","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-06","placement_id":"1","placement_inv_code":"foodgawker","num_imps":"324185","num_sold_imps":"0","num_default_imps":"324185","num_mouseovers":"69","num_interactions":"0","num_clicks":"4","num_shares":"1","num_social_clicks":"0","num_estimated_social_reach":"101"},{"ymd":"2013-09-06","placement_id":"58","placement_inv_code":"stylegawker","num_imps":"2990","num_sold_imps":"2990","num_default_imps":"0","num_mouseovers":"219","num_interactions":"0","num_clicks":"5","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-06","placement_id":"59","placement_inv_code":"craftgawker","num_imps":"154560","num_sold_imps":"61640","num_default_imps":"92920","num_mouseovers":"4548","num_interactions":"0","num_clicks":"16","num_shares":"7","num_social_clicks":"0","num_estimated_social_reach":"697"},{"ymd":"2013-09-06","placement_id":"60","placement_inv_code":"dwellinggawker","num_imps":"6900","num_sold_imps":"6900","num_default_imps":"0","num_mouseovers":"465","num_interactions":"0","num_clicks":"6","num_shares":"1","num_social_clicks":"0","num_estimated_social_reach":"97"},{"ymd":"2013-09-06","placement_id":"61","placement_inv_code":"weddinggawker","num_imps":"12075","num_sold_imps":"11730","num_default_imps":"345","num_mouseovers":"1224","num_interactions":"0","num_clicks":"10","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-06","placement_id":"77","placement_inv_code":"foodgawker_mobile_web","num_imps":"27830","num_sold_imps":"0","num_default_imps":"27830","num_mouseovers":"0","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-06","placement_id":"78","placement_inv_code":"stylegawker_mobile_web","num_imps":"460","num_sold_imps":"0","num_default_imps":"460","num_mouseovers":"0","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-06","placement_id":"79","placement_inv_code":"craftgawker_mobile_web","num_imps":"36455","num_sold_imps":"7590","num_default_imps":"28865","num_mouseovers":"554","num_interactions":"0","num_clicks":"9","num_shares":"8","num_social_clicks":"0","num_estimated_social_reach":"846"},{"ymd":"2013-09-06","placement_id":"80","placement_inv_code":"dwellinggawker_mobile_web","num_imps":"460","num_sold_imps":"115","num_default_imps":"345","num_mouseovers":"2","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-06","placement_id":"81","placement_inv_code":"weddinggawker_mobile_web","num_imps":"4485","num_sold_imps":"0","num_default_imps":"4485","num_mouseovers":"0","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-07","placement_id":"1","placement_inv_code":"foodgawker","num_imps":"286810","num_sold_imps":"0","num_default_imps":"286810","num_mouseovers":"16","num_interactions":"0","num_clicks":"3","num_shares":"1","num_social_clicks":"0","num_estimated_social_reach":"82"},{"ymd":"2013-09-07","placement_id":"58","placement_inv_code":"stylegawker","num_imps":"2300","num_sold_imps":"2185","num_default_imps":"115","num_mouseovers":"147","num_interactions":"0","num_clicks":"4","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-07","placement_id":"59","placement_inv_code":"craftgawker","num_imps":"173765","num_sold_imps":"77165","num_default_imps":"96600","num_mouseovers":"4693","num_interactions":"0","num_clicks":"17","num_shares":"8","num_social_clicks":"0","num_estimated_social_reach":"925"},{"ymd":"2013-09-07","placement_id":"60","placement_inv_code":"dwellinggawker","num_imps":"5865","num_sold_imps":"5175","num_default_imps":"690","num_mouseovers":"328","num_interactions":"0","num_clicks":"6","num_shares":"1","num_social_clicks":"0","num_estimated_social_reach":"107"},{"ymd":"2013-09-07","placement_id":"61","placement_inv_code":"weddinggawker","num_imps":"11500","num_sold_imps":"11270","num_default_imps":"230","num_mouseovers":"670","num_interactions":"0","num_clicks":"13","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-07","placement_id":"77","placement_inv_code":"foodgawker_mobile_web","num_imps":"35305","num_sold_imps":"0","num_default_imps":"35305","num_mouseovers":"1","num_interactions":"0","num_clicks":"1","num_shares":"1","num_social_clicks":"1","num_estimated_social_reach":"100"},{"ymd":"2013-09-07","placement_id":"78","placement_inv_code":"stylegawker_mobile_web","num_imps":"690","num_sold_imps":"0","num_default_imps":"690","num_mouseovers":"0","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-07","placement_id":"79","placement_inv_code":"craftgawker_mobile_web","num_imps":"50140","num_sold_imps":"10235","num_default_imps":"39905","num_mouseovers":"937","num_interactions":"0","num_clicks":"14","num_shares":"9","num_social_clicks":"0","num_estimated_social_reach":"934"},{"ymd":"2013-09-07","placement_id":"80","placement_inv_code":"dwellinggawker_mobile_web","num_imps":"1150","num_sold_imps":"805","num_default_imps":"345","num_mouseovers":"2","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-07","placement_id":"81","placement_inv_code":"weddinggawker_mobile_web","num_imps":"4945","num_sold_imps":"0","num_default_imps":"4945","num_mouseovers":"0","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-08","placement_id":"1","placement_inv_code":"foodgawker","num_imps":"199870","num_sold_imps":"27025","num_default_imps":"172845","num_mouseovers":"2503","num_interactions":"0","num_clicks":"44","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-08","placement_id":"58","placement_inv_code":"stylegawker","num_imps":"2530","num_sold_imps":"2530","num_default_imps":"0","num_mouseovers":"161","num_interactions":"0","num_clicks":"7","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-08","placement_id":"59","placement_inv_code":"craftgawker","num_imps":"196075","num_sold_imps":"69345","num_default_imps":"126730","num_mouseovers":"4247","num_interactions":"0","num_clicks":"19","num_shares":"8","num_social_clicks":"0","num_estimated_social_reach":"861"},{"ymd":"2013-09-08","placement_id":"60","placement_inv_code":"dwellinggawker","num_imps":"7705","num_sold_imps":"7590","num_default_imps":"115","num_mouseovers":"520","num_interactions":"0","num_clicks":"9","num_shares":"1","num_social_clicks":"0","num_estimated_social_reach":"118"},{"ymd":"2013-09-08","placement_id":"61","placement_inv_code":"weddinggawker","num_imps":"13340","num_sold_imps":"13225","num_default_imps":"115","num_mouseovers":"735","num_interactions":"0","num_clicks":"10","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-08","placement_id":"77","placement_inv_code":"foodgawker_mobile_web","num_imps":"36915","num_sold_imps":"1495","num_default_imps":"35420","num_mouseovers":"63","num_interactions":"0","num_clicks":"9","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-08","placement_id":"78","placement_inv_code":"stylegawker_mobile_web","num_imps":"575","num_sold_imps":"0","num_default_imps":"575","num_mouseovers":"0","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-08","placement_id":"79","placement_inv_code":"craftgawker_mobile_web","num_imps":"57270","num_sold_imps":"12995","num_default_imps":"44275","num_mouseovers":"962","num_interactions":"0","num_clicks":"14","num_shares":"7","num_social_clicks":"0","num_estimated_social_reach":"628"},{"ymd":"2013-09-08","placement_id":"80","placement_inv_code":"dwellinggawker_mobile_web","num_imps":"575","num_sold_imps":"115","num_default_imps":"460","num_mouseovers":"50","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-08","placement_id":"81","placement_inv_code":"weddinggawker_mobile_web","num_imps":"8050","num_sold_imps":"0","num_default_imps":"8050","num_mouseovers":"0","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-09","placement_id":"1","placement_inv_code":"foodgawker","num_imps":"326830","num_sold_imps":"142370","num_default_imps":"184460","num_mouseovers":"13829","num_interactions":"0","num_clicks":"239","num_shares":"72","num_social_clicks":"21","num_estimated_social_reach":"7203"},{"ymd":"2013-09-09","placement_id":"58","placement_inv_code":"stylegawker","num_imps":"3795","num_sold_imps":"3450","num_default_imps":"345","num_mouseovers":"183","num_interactions":"0","num_clicks":"8","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-09","placement_id":"59","placement_inv_code":"craftgawker","num_imps":"176410","num_sold_imps":"64285","num_default_imps":"112125","num_mouseovers":"5113","num_interactions":"0","num_clicks":"20","num_shares":"14","num_social_clicks":"0","num_estimated_social_reach":"1382"},{"ymd":"2013-09-09","placement_id":"60","placement_inv_code":"dwellinggawker","num_imps":"8625","num_sold_imps":"8510","num_default_imps":"115","num_mouseovers":"419","num_interactions":"0","num_clicks":"10","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-09","placement_id":"61","placement_inv_code":"weddinggawker","num_imps":"19895","num_sold_imps":"19895","num_default_imps":"0","num_mouseovers":"1217","num_interactions":"0","num_clicks":"9","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-09","placement_id":"77","placement_inv_code":"foodgawker_mobile_web","num_imps":"25990","num_sold_imps":"10120","num_default_imps":"15870","num_mouseovers":"396","num_interactions":"0","num_clicks":"34","num_shares":"11","num_social_clicks":"3","num_estimated_social_reach":"1167"},{"ymd":"2013-09-09","placement_id":"78","placement_inv_code":"stylegawker_mobile_web","num_imps":"115","num_sold_imps":"0","num_default_imps":"115","num_mouseovers":"0","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-09","placement_id":"79","placement_inv_code":"craftgawker_mobile_web","num_imps":"47840","num_sold_imps":"10810","num_default_imps":"37030","num_mouseovers":"695","num_interactions":"0","num_clicks":"17","num_shares":"7","num_social_clicks":"0","num_estimated_social_reach":"776"},{"ymd":"2013-09-09","placement_id":"80","placement_inv_code":"dwellinggawker_mobile_web","num_imps":"1035","num_sold_imps":"115","num_default_imps":"920","num_mouseovers":"3","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"},{"ymd":"2013-09-09","placement_id":"81","placement_inv_code":"weddinggawker_mobile_web","num_imps":"7475","num_sold_imps":"0","num_default_imps":"7475","num_mouseovers":"0","num_interactions":"0","num_clicks":"0","num_shares":"0","num_social_clicks":"0","num_estimated_social_reach":"0"}]

Upvotes: 2

Views: 2107

Answers (2)

Oleg
Oleg

Reputation: 221997

If you use local datatype then you can use simple and flexible solution of the problem. You need define sorttype property as function in the second placement_inv_code ('Name') column. The function sorttype have two parameters. The second parameter (for example obj) allow you to access to all other columns of the row (like obj.ymd). The value returned by sorttype function will be used by jqGrid during sorting. You will find examples of such implementation here, here, here and other old answers.

UPDATED: The demo uses the following sorttype for the placement_inv_code column

sorttype: function (cellValue, item) {
    return cellValue + '_' + item.ymd;
}

As the result if the user clicks on the placement_inv_code column jqGrid uses item.placement_inv_code + '_' + item.ymd string to deternine the order of the rows during the sorting. As the result you will see

enter image description here

By the way the format of item.ymd will be the same (like "2013-09-19") even if we displays the date column in another format. See modified demo to demonstrate this. If you set breakpoint inside of sorttype callback you will still see the item.ymd in the same ISO 8601 date format like in the input data. So the sorttype callback will help jqGrid to sort the data in correct way.

Upvotes: 2

Mark
Mark

Reputation: 3123

If you are at jqGrid version 4.5.0 or higher they have added in a multisort (via changelog at http://www.trirand.com/jqgridwiki/doku.php?id=wiki:change)

I personally tried to implement this and was not the most successful so ended up implementing it via server side logic, but with localdata you might have better luck.

The most I can reference you to is this question: http://www.trirand.com/blog/?page_id=393/bugs/cant-sortgrid-with-multiple-columns-when-multisorttrue/

Upvotes: 1

Related Questions