dojo datagrid OnStyleRow not correct after sorting via header

StackOverflow https://stackoverflow.com/questions/19572152

質問

I am styling grid row based on a value in the column.

On initial load it looks ok, however, when I click on the header to sort, the styling follows the original style and does not reflect the value in the sorted list.

In the onStyleRow event that does the styling override, I can get the row object of the grid, But... how do I get the column data from the row so that I can style it properly.

I have gone through the two questions below and a few others in StackOverflow, Googled, checked Dojo API docs and reference, etc. So far no outcome...

dojox DataGrid onStyleRow works first time, then not again

dojo datagrid custom sorting server side

I attach working code below, you can cut and paste to a html file to run and see the problem I am facing (The //// comment in the code below is a key place to note).

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/tundraGrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="async:true,isDebug:true,parseOnLoad:true"></script>
<script>        
var grid_report;
require([ 'dojo/parser', 'dojox/grid/DataGrid', 'dojox/data/CsvStore', 'dojo/domReady!' ],  function(){
dojo.ready(function(){
    var csvData = "id,val\n";
    csvData += "1,10\n" + "2,20\n" + "3,30\n" + "4,40\n" + "5,50\n" + "6,60\n";
    var csv_store = new dojox.data.CsvStore({identifier: "id", data: csvData});

    grid_report = new dojox.grid.DataGrid({
        style:'height:400px',
        store: csv_store,
        structure: [ { field: 'id', width: '80px', name: 'ID' }, { field: 'val', width: '80px', name: 'Value' }, ],
    }, document.createElement('div'));

    dojo.byId("gridDiv").appendChild(grid_report.domNode);

    dojo.connect(grid_report, 'onStyleRow', function (row) {
        var idx = row.index;
        //// Below is not correct as index is the row index on the grid, but the data store is in a different order after sorting order change via clicking cell header
        var _item = grid_report.getItem(idx);
        if (!_item) return;

        var val = parseInt( _item._csvStore._dataArray[ idx ][1] );
        if (val <= 20) row.customStyles += 'background-color:#88f;';
        else if (val > 40) row.customStyles += 'background-color:#f88;';
        else row.customStyles += 'background-color:#ff8;';
        dojox.grid.DataGrid.prototype.onStyleRow.apply(this, arguments);
    });
    grid_report.startup();    
}); // end ready
}); // end require
</script>
</head>
<body class="tundra">
    <div style="height:25px; width:100px; display:table-cell; text-align: center; vertical-align:middle; background-color:#88f;">Value 0-20</div>
    <div style="height:25px; width:100px; display:table-cell; text-align: center; vertical-align:middle; background-color:#ff8;">Value 21-40 </div>
    <div style="height:25px; width:100px; display:table-cell; text-align: center; vertical-align:middle; background-color:#f88;">Value 41 or more</div>
    <div id="gridDiv" style="width:'800px';height:'600px';"></div>
</body>
</html>
役に立ちましたか？

解決

I found a work around. It is not ideal as it may not work for all situations.

Change line with:

var idx = row.index;

to:

var idx = -1;

After the newly edit line above, add the following:

var _item = null;
grid_report.store.fetch({onComplete: function(items) {
    dojo.forEach(items, function(item, index) {
        // KLUDGE FOR finding item after sort
        // use merged csv data AND row.node.textContent
        var merged_csv_text = item._csvStore._dataArray[index].join('');
        if (merged_csv_text == row.node.textContent) {
            idx = index; // I finally get the correct index here!!!
            return;
        }
    });
} });
if (idx ==  -1) return;

This works only if each data formed by merged_csv_text is unique.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top