CODEWITHSUNDEEP
dojodojox.grid
pgmura
pgmura

Reputation: 716

How to refilter a dojo DataGrid?

I have a DataGrid that I already filtered using grid.filter(query, rerender). If I add another item, after calling save() I see the new item in the grid even though it shouldn't display because of the filter. I'm thinking "ok, I'll just filter it again when the store finishes saving. But after calling grid.filter with the same query all the rows disappear. Any ideas what I might be doing wrong?

Code to filter the grid:

var filterQuery = dijit.byId("filterTextbox").attr("value");
var grid = dijit.byId("grid");
var queryValue = "*";
if(filterQuery != ""){
    queryValue += filterQuery + "*";
}
grid.filter({name: queryValue}, true);

Code to add new items to the grid

function addItemToGrid(newItemName){
     var newItem = {name: newItemName};
     var grid = dijit.byId("grid");
     var store = grid.store;
     store.addItem(newItem);
     store.save();
}

Upvotes: 1

Views: 1383

Answers (3)

Vin.X
Vin.X

Reputation: 4849

Try to use:

store.newItem(newItem);

instead of store.addItem(newItem); (addItem is not a standard method to add items into store)

Upvotes: 1

Andrew Bucklin
Andrew Bucklin

Reputation: 699

I had the same problem and only managed to fix it by running the grid filter periodically in the background with the help of some jQuery. Here is some sample code; hope this helps someone else having problems with this.

// ADD JQUERY
<script src="http://code.jquery.com/jquery-latest.js"></script>

.

// PUT THIS IN THE <HEAD> OF THE PAGE
<script type="text/javascript">
    $(document).ready(function() {
        function filterTheDataGrid() {
            if (dijit.byId("grid") != undefined) {
                dijit.byId("grid").filter({color: "Red"});
            }
        }
    // RUN THE filterTheDataGrid FUNCTION EVERY ONE SECOND (1000 MILLISECONDS) //
    // LOWER '1000' FOR FASTER REFRESHING, MAYBE TO 500 FOR EVERY 0.5 SECOND REFRESHES //
    var refreshDataGrid = setInterval(function() {  filterTheDataGrid();    }, 1000);
    }
</script>

.

// PUT THIS IN THE <HEAD> OF THE PAGE
<script type="text/javascript">
    // SETUP THE LAYOUT FOR THE DATA //
    var layoutItems = [[
    {
        field: "id",
        name: "ID",
        width: '5px',
        hidden: true
    },
    {
        field: "color",
        name: "Color",
        width: '80px'
    }
]];

// Create an empty datastore //
var storeData = {
    identifier: 'id',
    label: 'id',
    items: []
}
var store3 = new dojo.data.ItemFileWriteStore( {data : storeData} );
</script>

.

 // PUT THIS IN THE <HTML> OF THE PAGE
<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutItems" query="{ type: '*' }" clientSort="true" rowsPerPage="40"></div>

.

<script type="text/javascript">
function addItemToGrid(formdata) {
    // THIS FUNCTION IS CALLED BY A DIALOG BOX AND GETS FORM DATA PASSED TO IT //
    var jsonobj = eval("(" + dojo.toJson(formData, true) + ")");

    var myNewItem = {
        id: transactionItemID,
        color: jsonobj.color
    };
    // Insert the new item into the store:
    store3.newItem(myNewItem);
    store3.save({onComplete: savecomplete, onError: saveerror});
}
</script>

Upvotes: 0

Tom Gruner
Tom Gruner

Reputation: 9635

Inside of your addItemToGrid function, try adding an onComplete listener to your save method and sort or filter the grid in the onComplete function

store.save({onComplete: function() {
         grid.filter({name: queryValue}, true);
    }
});

Upvotes: 0

Related Questions