2

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"}]
Evan
  • 5,975
  • 8
  • 34
  • 63

2 Answers2

2

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Have you had success with the new `multisort` feature Oleg? Or have you had chance to bother using it? – Mark Sep 19 '13 at 01:27
  • @Oleg how does this help ensure that the ymd column gets sorted appropriately? still not sure I get it – Evan Sep 19 '13 at 15:02
  • @Evan: What format of input data you have for `ymd` column? Typically one uses ISO 8601 like `2013-09-19` (default for jqGrid) because it uses language independent representation of the date as string. Native string sorting will sort such dates correctly too. If you have other input format for `ymd` column you can easy convert the data to ISO 8601 format. If you still have problem with implementation you should append the text of your question with test data which you use as the input and I show you example of the corresponding implementation of `sorttype` function. – Oleg Sep 19 '13 at 15:11
  • @Mark: I think that `multisort` feature have another goal, but to tell the trust I don't played with the feature long enough. The question of Evan was: how to change the order of sorting of rows if **the user clicks on ONE column** `name`. In the case jqGrid do sorting by one column `name` only. One could try to make some tricks and use `multisort` feature, but the goal of the feature is that *the user* should be able *to click on multiple columns* to have multi-sorting. Isn't so? See "Functionality"/"Multi sorting" on [the official jqGrid demo](http://trirand.com/blog/jqgrid/jqgrid.html). – Oleg Sep 19 '13 at 15:26
  • @Oleg the screenshot i put in is the actual data format so it looks like i'm using ISO 8601 – Evan Sep 19 '13 at 15:29
  • @Evan: I can't use cut&paste to insert the data in my JavaScript demo. :-) Moreover the screanshort *shows* the data and I asked you about the format of *input data*. Could you post JSON data which returns the server or the array of items which you use as the value of `data` parameter (if you use `datatype: "local"`)? – Oleg Sep 19 '13 at 15:33
  • @Oleg added sample data there – Evan Sep 19 '13 at 15:44
  • @Evan: I don't see any `name` or `placement_inv_code` column in the data. Which column should be replacement for the `name` column (the main column which user clicks during the sorting)? – Oleg Sep 19 '13 at 15:47
  • @Oleg yeah sorry about that put the wrong data. new one. thanks for your patience – Evan Sep 19 '13 at 16:04
  • @Evan: I posted **UPDATED** part in my answer. The data which you posted don't contains mixed order of dates. So one will not really see wrong sorted "Date" column in case of removing `sorttype` callback. Nevertheless the `sorttype` callback will provide correct order of rows in any kind of string of input data. – Oleg Sep 19 '13 at 16:57
  • @Oleg Ah, my take on the concept of the multisort would be as this question asked, a user clicks on a column and then there is the built in knowledge for the grid to secondary sort on a column so we don't get random ordering when the 2nd column is different. – Mark Sep 19 '13 at 18:27
1

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/

Mark
  • 3,123
  • 4
  • 20
  • 31