Question

I have a column that doesn’t retrieve any data in my dojox.data.datagrid, however I have placed a custom clickable header. I want to disable sorting on this column so that the triangles dont appear when I try and click the header.

Any ideas how I can achieve this?

Edit to show my code:

dojo.require("dojox.grid.DataGrid"); //FindTask
dojo.require("dojo.data.ItemFileReadStore"); //FindTask
dojo.require("esri.tasks.find"); //FindTask

var findTask, findParams;
var grid, store;
var searchExtent;

function doFind() {

            //Show datagrid onclick of search button and resize the map div.
            dojo.style("map", {
                    "height": "87%"});
            esri.show(datagrid);
            searchExtent = new esri.geometry.Extent ({
            "xmin":-9196258.30121186,"ymin":3361222.57748752,"xmax":-9073959.055955742,"ymax":3442169.390441412,"spatialReference":{"wkid":102100}
            });

            map.setExtent(searchExtent);

    //Set the search text to the value in the box
    findParams.searchText = dojo.byId("parcel").value;
            grid.showMessage("Loading..."); //Shows the Loading Message until search results are returned.
    findTask.execute(findParams,showResults);
  }

  function showResults(results) {
    //This function works with an array of FindResult that the task returns
    map.graphics.clear();
    var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,194,204,0.5]));


    //create array of attributes
    var items = dojo.map(results,function(result){
      var graphic = result.feature;
      graphic.setSymbol(symbol);
      map.graphics.add(graphic);
      return result.feature.attributes;
    }); 

    //Create data object to be used in store
    var data = {
      identifier: "Parcel Identification Number",  //This field needs to have unique values. USES THE ALIAS!!!
      label: "PARCELID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
      items: items
    };

     //Create data store and bind to grid.
    store = new dojo.data.ItemFileReadStore({ data:data });
    var grid = dijit.byId('grid');
    grid.setStore(store);

    //Zoom back to the initial map extent
    map.setExtent(searchExtent);

  }

  //Zoom to the parcel when the user clicks a row
  function onRowClickHandler(evt){
    var clickedTaxLotId = grid.getItem(evt.rowIndex).PARCELID;
    var selectedTaxLot;

    dojo.forEach(map.graphics.graphics,function(graphic){
      if((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId){
        selectedTaxLot = graphic;
        return;
      }
    });
    var taxLotExtent = selectedTaxLot.geometry.getExtent();
    map.setExtent(taxLotExtent);
  }

HTML:

<!--Data Grid-->
                            <div id="datagrid" dojotype="dijit.layout.ContentPane" region="bottom" splitter="true" style="width:100%; height:125px;">
                                    <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
                                        <thead>
                                            <tr>
                                                <th field="Parcel Identification Number" width="10%">
                        Parcel ID
                                                </th>
                                                <th field="Assessing Neighbornood Code" width ="20%">
                        Neighborhood Code
                                                </th>
                                                <th field="Property Class Code" width="10%">
                        Property Class
                                                </th>
                                                <th field="Site Address" width="57%">
                        Address
                                                </th>
                                                <th field="" width="2%"> <div class="GridCloseIcon" title="Close Grid" onclick="closeGrid();"></div>
                                                </th>                   
                                            </tr>
                                        </thead>
                                    </table>
                            </div>

Answer 1

Override the canSort method of your datagrid instance and return true or false for the given “col” argument. See “canSort” in this section of the DataGrid documentation.

If e.g. the 3rd column should not be sortable use something like:

myGrid = new DataGrid({
    ....
    canSort: function(col) {
        return !(Math.abs(col) === 3);
    },
    ....
}, yourGridElemId);

In your code, try something like:

dojo.addOnLoad(setupGrid);

function setupGrid() {
    var grid = dijit.byId('grid');
    grid.canSort = function(col) {
        return !(Math.abs(col) === 3);
    }
}