nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Sort datagrid numerically

adrian.marsden_DevonCC

Hi

I'm failing to sort a datagrid, that has results from a query task, numerically.

There is a field, that the service has defined as an integer, however it gets sorted in the datagrid as text (so I get 1,10,11,12,2,21,22 rather than 1,2,10,11,12,21,22)

I have tried adding a formatter on the grid like

        function PAOFormat(item) {                         var link = Number(item) + 0 ;             return link;         }

But that fails - changing it to Number(item) + 100 does indeed add 100- to the number, so how do I tell it to be a number cell.

I have seen there is a celltype property, but I can't find a full list of cell types the best I have found is

cellTypeThe type of cell in the column. Allowable cell types include
dojox.grid.cells.Bool
dojox.grid.cells.Select

Any ideas?

ACM

Find more posts tagged with

Accepted answers

JasonZou

Prior to

        //Create data object to be used in store         var data = {             identifier: "OBJECTID",             label: "LSData",             items: items         };

Go through the items loop, and convert the item attribute in need to number. Here is a sample.

var fldNameConvert = "fldConvertion"; var newItems = dojo.map(items, function(item) {     var newItem = dojo.clone(item);     newItem[fldNameConvert] = parseInt(newItem[fldNameConvert]);     return newItem; });  var data = {      identifier: "OBJECTID",      label: "LSData",      items: newItems };

All comments

adrian.marsden_DevonCC

OK, now I had to adjust my sort - the brief was to sort on house number, but if no number then name.

So

1 High Street
2 High Street
11 High Street

And for named properties

Aardvark House
Hope House
Zebra Cottage

So I created a hidden column that on the face of it took the house number. However I created (with some help, see above) a formatter for this that changed the actual row DATA.

        //change the actual DATA used in the hidden colum used for sorting
        //Add a padded string of the house number to the rest of the address, so order is 001, 002,010 rather than 1,10,2
        //We then change the actual row DATA TO THIS NEW VALUE, JUST CHANGING WHAT IS DIPLAYED DOES NOT WORK
        //Return 0 just to get something there that fill no space
        function PAOFormat(item, rowIndex) {               
            var rowdata = this.grid.getItem(rowIndex);
            var sortAddress = dojo.string.pad(item,3) + rowdata.Address;
            rowdata.PAO_FROM[0] = sortAddress;
            return 0;
     
        }

Changing what is displayed doesn't work..

Credit to this http://documentumcookbook.wordpress.com/2010/08/06/dojo-datagrid-combining-field-values-in-formatter/ blog post for showing how to retrieve other cell data in a formatter.

ACM

adrian.marsden_DevonCC

🙂 Looks good - I'll try it tomorrow - right now I'm having fun with inserting directly into unversioned SDE tables using SQL and getting me geometries and geographies all mixed up - may have to post to a different forum!

Many thanks

Edit - couldn't wait (plus SQL not working) so tried it and works, marked as answered. Many thanks

JasonZou

Prior to

        //Create data object to be used in store         var data = {             identifier: "OBJECTID",             label: "LSData",             items: items         };

Go through the items loop, and convert the item attribute in need to number. Here is a sample.

var fldNameConvert = "fldConvertion"; var newItems = dojo.map(items, function(item) {     var newItem = dojo.clone(item);     newItem[fldNameConvert] = parseInt(newItem[fldNameConvert]);     return newItem; });  var data = {      identifier: "OBJECTID",      label: "LSData",      items: newItems };

adrian.marsden_DevonCC

Thanks- I found that last week, but couldn't follow it - I'll have another go now.

VinayBansal

There is field called comparatorMap in the data store object so you can change the sort behavior.
have a lok into this link
http://www.ibm.com/developerworks/web/library/wa-aj-dojogrid/index.html

adrian.marsden_DevonCC

Yep - I think I'd got to the same conclusion, however that's where my skills end.

The grid is defined so -


 <table dojotype="dojox.grid.DataGrid" jsid="grid1" id="grid1" autoheight="10" rowsperpage="160" rowselector="10px">
                        <thead>
                            <tr>
                                <th field="Address" width="160px">Address
                                </th>
                                <th field="PAO_FROM" formatter="PAOFormat" width="160px">PAO_FROM
                                </th>
                            </tr>
                        </thead>


                    </table>

and then later populated like this

        //Create data object to be used in store
        var data = {
            identifier: "OBJECTID",
            label: "LSData",
            items: items
        };


        //Create data store and bind to grid.
        store1 = new dojo.data.ItemFileReadStore({
            data: data
        });
        console.debug(store1) 
        dijit.byId("keycontainer").selectChild(dijit.byId("results"));
        grid1.setStore(store1);

with items being the results dataset from the find task - however, right from when I view the attributes of the results it appears like


PAO_FROM: Array[1]

0: "19"
length: 1

despite the service definition stating


PAO_FROM ( type: esriFieldTypeSmallInteger , alias: PAO_FROM )

AS mentioned in the first post, I did find some reference to cellType when creating the dojodatagrid, but no fll list of types.

Cheers

ACM

JasonZou

ok. I see what's happening. The formatter function only affects how the data presents in the data grid. The sort operation still uses its value, not the returned value from the formatter function. Obviously, the values you tried to sort are the type of string. What I would suggest is to convert all the values to numbers before feeding the data into the data grid, so the data grid recognizes the values are number types, and will sort them like that.

adrian.marsden_DevonCC

Thanks, but that still sorts it

001
010
011
002

I'll check out the dgrid next work day, but this is really for the last touch to an almost finished product - the next version I'll look at new stuff + making all AMD.

The results are actually from a find results set. Is there any way that I can sort that object based on an attribute before it gets attached to the data grid?

Cheers

ACM

JasonZou

Try:

function PAOFormat(item) {
     return dojo.string.pad(item, 3);
}

Have you considered to switch to the new data grid, dGrid? It's much better in terms of the performance and functionality. Here is the link for lots of examples.

Other useful links:
http://www.sitepen.com/blog/2011/10/26/introducing-the-next-grid-dgrid/
http://dojofoundation.org/packages/dgrid/tutorials/hello_dgrid/

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.