Login Register

Update grid again

Hello I'm sorry to post about this subjet again but I was looking a lot of pages
and I cant found the correct answer.

I need to update my grid when I click the button whit another data source,
the first one is restult1.txt and I want to change it to result2.txt,
if any one can show me the way....

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        @import "dojoAjax/dijit/themes/tundra/tundra.css";       
        @import "dojoAjax/dojox/grid/_grid/tundraGrid.css";
        @import "dojoAjax/dojo/resources/dojo.css":
           
    </style>
    <script type="text/javascript" src="dojoAjax/dojo/dojo.js"
        djConfig="parseOnLoad: true">
</script>
   
    <script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dojox.grid.Grid");
        dojo.require("dojox.grid._data.model");
        dojo.require("dijit.layout.LayoutContainer");
        dojo.require("dojo.parser");
        dojo.require("dijit.layout.ContentPane");
     </script>
     <script language="JavaScript" src="mio.js"></script>
     <script type="text/javascript">
                // a grid view is a group of columns.
                var view1 = {
                        cells: [[
                                {name: 'idTravaux', field: "idTravaux"},
                                {name: 'description', width: "25em", field: "description"}
                          ]
                        ]
                };
                // a grid layout is an array of views.
                var layout = [ view1 ];               
        </script>
        <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.Button");
        function call_function() {
           console.debug("Button was clicked.");
        }
     </script>
     
     
</head>
<body class="tundra">
  <button dojoType="dijit.form.Button" onclick="call_function">
             update
        </button>
    <div dojoType="dojo.data.ItemFileReadStore" id='urlTravaux'
                jsId="jsonStore" url="result1.txt">

        </div>
        <div id="gridModel" dojoType="dojox.grid.data.DojoData" jsId="model"
                rowsPerPage="5" store="jsonStore" query="{ idTravaux: '*' }"
                clientSort="true">

        </div>
        <div jsId="Grid89" id="gridu" dojoType="dojox.Grid" model="model" structure="layout"
              layoutAlign="center">

        </div>
     
</body>

the txt are the next ones

result1.txt
{"timestamp":1193692111,"items": [
{"idTravaux":"1","description":"yellow"},
{"idTravaux":"2","description":"orange"},
{"idTravaux":"3","description":"blue"},
{"idTravaux":"4","description":"red"},]}

and result2.txt
{"timestamp":1193692111,"items": [
{"idTravaux":"1","description":"amarillo"},
{"idTravaux":"2","description":"naranja"},
{"idTravaux":"3","description":"azul"},
{"idTravaux":"4","description":"rojo"},]}

Something like this??

Something like this??

function call_function() {
  //console.debug("Button was clicked.");
  var grid = dijit.byId("gridu");
  var store = new dojo.data.ItemFileReadStore({url:'result2.txt'});
  var model = new dojox.grid.data.DojoData(null, store, {query:{idTravaux: '*'}, clientSort:true});
  grid.setModel(model);
  grid.refresh();
}

Refreshing a grid

I have spent several days reading the various forum postings, hacking the examples and otherwise trying to get itemFileReadStore or queryReadStore to update a grid. I think I'm very close at this point, if someone can just push me over the last hump. QueryReadStore sounds like the optimal way to go, but I have run into too many complications trying to get that to work. At this point I would be satisfied just to get a grid to update using the itemFileReadStore. Here is my scenario:

After entering the data in my form, this button...

<button type="submit" dojoType="dijit.form.Button" id="B1" jsId="B1" label="View Report" enabled="true">
              <script type="dojo/method" event="onClick">
                   dojo.xhrGet({
                        url: 'x_backend.asp',
                        //url: 'x_generateReport.asp',
                        //url: 'x_OA_browser_dynamic.asp',
                        load: callback_submitForm,
                        error: errorMessage,
                        content: {action: 'generate_report', sortOrder: dojo.byId('sortorder').value, P1: dojo.byId('P1').value, P2: dojo.byId('P2').value, P3: dojo.byId('P3').value, P4: dojo.byId('P4').value },
                        handleAs: 'text',
                        timeout: 2000,
                        preventCache: true,
                        form: 'parmform'
                  });
                  </script>
             </button>

calls this function to send the form data to the server and obtain a response...

function callback_submitForm(response,ioArgs) {
            showMsg("successfully retrieved response from server\n" + response,1);
            var grid = dijit.byId("grid");
            var store = new dojo.data.ItemFileReadStore({data: response });
            var gridModel = new dojox.grid.data.DojoData(null, store, {query:{RID: '*'}, clientSort:true});
            grid.setModel(gridModel);
            grid.refresh();
            showMsg("successfully updated grid",1);
        }

which is supposed to update this grid...

<div dojoType='dojo.data.ItemFileReadStore'
        jsId="gridDataStore"
        id = "gridDataStore"
        url="dummy1.txt"
        doClientPaging="false"
        >
</div>
        <div dojoType="dojox.grid.data.DojoData"
                jsId="gridModel"
                id = "gridModel"
                rowsPerPage="5"
                store="gridDataStore"
                query="{ RID : '*' }"
                >
</div>
        <div dojoType="dojox.Grid"
        jsId = "grid"
        id = "grid"
        model="gridModel"
        structure="layout"
        disabled="false"
                >
</div>

In the callback_submitForm function I am getting to the "successfully updated grid" message without errors but the grid data is being replaced with question marks instead of the JSON data in the servers's response.

Here is a sample JSON response from the server:

{identifier:"RID".
items:[
{
RID:"{702E9D6A-CFB0-4ECE-AF8A-F3D6ECA8759C}",
fProjectNo:"17513",
fProjectName:"Hempstead Station",
fProjectDescription:"",
fArchiveLink:"\\\Dayton2\\archive$\\SV\ARCHIVEDATA\\0077\\17513 HEMPSTEAD STATION"
}
],
itemCount:"1"}

Firefox console shows the following error immediately after the GET:

filename "http://.../dojo-release-1.1.0b3/dojo/dojo.js"
lineNumber 455
message "this._arrayOfTopLevelItems has no properties"
name "TypeError"
stack "("{ identifier: \"RID\",\r\nitems:\r\n{RID:\"{4145BC67-5100-480E-B49F-310EF6D545FE}\",fProjectNo:\..."

Should this: /* GeSHi (C)

Should this:

var store = new dojo.data.ItemFileReadStore({data: response });

be:

var store = new dojo.data.ItemFileReadStore({data: response.items });

Should this: /* GeSHi (C)

Thankyou Frankf.

Your tip pushed me in the right direction. After making the change you suggested I still got question marks, but the error in the Firebug console changed from...

"TypeError: this._arrayOfTopLevelItems has no properties"

...to...

"Error: dojo.data.ItemFileReadStore: No JSON source data was provided as either URL or a nested Javascript object."

Which reminded me that ItemFileReadStore needs to receive the response as an object rather than a string. So I used a method I had run across in another post a few days ago -- "Update the Full grid on the"
Submitted by manjulx on Wed, 01/09/2008 - 06:30. That did the trick.

So, the short of it is that changing the code from this...

function callback_submitForm(response,ioArgs) {
            showMsg("successfully retrieved response from server\n" + response,1);
            var grid = dijit.byId("grid");
            var store = new dojo.data.ItemFileReadStore({data: response });
            var gridModel = new dojox.grid.data.DojoData(null, store, {query:{RID: '*'}, clientSort:true});
            grid.setModel(gridModel);
            grid.refresh();
            showMsg("successfully updated grid",1);
        }

...to this...

function callback_submitForm(response,ioArgs) {
            showMsg("successfully retrieved response from server\n" + response,1);
            var grid = dijit.byId("grid");
            var response = eval("("+response+")");    // added this line
            var store = new dojo.data.ItemFileReadStore({data: response });
            var gridModel = new dojox.grid.data.DojoData(null, store, {query:{RID: '*'}, clientSort:true});
            grid.setModel(gridModel);
            grid.refresh();
            showMsg("successfully updated grid",1);
        }

...caused the grid to update properly.

Thanks again,

ge

Re: Update grid again

This issue has been discussed on other threads as well, recently again at Refresh grid when underlying data on server changes. To reiterate: 1) To update a grid you actually update the underlying store. 2) ItemFileReadStore has no mechanism to update it, so you can either recreate it, or consider using a QueryReadStore. 3) A recent update to DojoData model makes certain things easier.

Solved works perfect

Thank you frankf your solution works perfect

What about using the same data source but needing different cols

I have a similar situation and am having difficulty sorting out the best method of achieving the goal.

I have a .JSON source that has data for NAME, DATE, TIME IN, TIME OUT, TOTAL TIME and COMMENTS.

I need one view to show the results based on a NAME match, selected from a comboBox list, and not display the NAME column., i.e., DATE TIME TIME IN TIME OUT TOTAL TIME COMMENTS

The other view, triggered by selecting a date from the datePicker, would display only the DATE selected and not show the DATE column, i.e., NAME TIME TIME IN TIME OUT TOTAL TIME COMMENTS:

function setSearchCriteria()
{
if (radioDate.checked)
{
pSearchDate = SearchDate.getDisplayedValue();
pSearchName = "-1";
pSearchLabel = SearchDate.getDisplayedValue();
}
else if (radioName.checked)
{
pSearchName = SearchName.getValue();
pSearchDate = "";
pSearchLabel = SearchName.getDisplayedValue();
}
fillDataGrid();
}

function fillDataGrid()
{
var callTimestamp = new Date();
var paramSearchDate = pSearchDate;
var paramSearchName = pSearchName;
var parameterContent ={
timestamp: callTimestamp.getTime(),
searchDate: paramSearchDate,
searchName: paramSearchName
};
document.getElementById("loadingTimeImgDiv").style.display = "inline";
dojo.xhrGet( {
url: "retrieveTimes.do",
handleAs: "json",
content: parameterContent,
load: function(response, ioArgs)
{
model = new dojox.grid.data.DojoData();
model.store = new dojo.data.ItemFileReadStore({data:response});
model.query = {namespace:'*'};
DataGrid.setModel(model);
//DataGrid.refresh();
document.getElementById("timeFilterLabel").innerHTML = ""+pSearchLabel+"";
clearAdjusunchDlg();
clearAddDlg();
document.getElementById("loadingTimeImgDiv").style.display = "none";
},

error: function(response, ioArgs)
{
document.getElementById("loadingTimeImgDiv").style.display = "none";
showErrorDlgBox("Error retrieving time es. (JSP)");
}});
}
formatNumber = function(inDatum){
return dojo.number.format(inDatum, this.constraint);
}
formatDate = function(inDatum){
return dojo.date.locale.format(new Date(inDatum), this.constraint);
}
var view1 = {
cells: [[
{name: 'Name', width: '25%', field: 'namespace'},
{name: 'Date In', width: '15%', field: 'Date', , styles: 'display:none;'},
{name: 'Time In', width: '15%', field: 'timeIn'},
{name: 'Time Out', width: '15%', field: 'timeOut'},
{name: 'Total Time', width: '15%', field: 'totalTime', formatter: formatNumber, constraint: {places: 2}},
{name: 'Remarks', width: '15%', field: 'remarks' , editor: dojox.grid.editors.Input }
]]
};
var view2 = {
cells: [[
{name: 'Name', width: '25%', field: 'namespace', styles: 'display:none;'},
{name: 'Date In', width: '15%', field: 'Date'},
{name: 'Time In', width: '15%', field: 'timeIn'},
{name: 'Time Out', width: '15%', field: 'timeOut'},
{name: 'Total Time', width: '15%', field: 'totalTime', formatter: formatNumber, constraint: {places: 2}},
{name: 'Remarks', width: '15%', field: 'remarks' , editor: dojox.grid.editors.Input }
]]
};
var layout = [ view2 ];
function toggleSearchOptions()
{
SearchDate.setDisplayedValue("");
SearchName.setValue("-1");
if (radioDate.checked)
{
SearchDate.setDisabled(false);
SearchName.setDisabled(true);
}
else if (radioName.checked)
{
SearchDate.setDisabled(true);
SearchName.setDisabled(false);
}
}

dojo.addOnLoad(function() {

SearchDate.setValue(new Date());
pSearchDate = SearchDate.getDisplayedValue();
pSearchName = "-1"
pSearchLabel = SearchDate.getDisplayedValue();

DataGrid.setStructure(layout);

dojo.connect(DataGrid,'','');
fillDataGrid();

});

Grid refresh on IE6?

My grid refresh works on FF, but not on IE6/7. Has anyone encountered this and solved it? The console messages would display up to the end, and no errors would be reported, but the grid still doesn't refresh. But in FF, it does.

function refreshViewCategory() {
// Build URL to make XHR call to server
var url = "/" + dojo.byId("WebDBName").value + "/(dojoAgentFormCategoryJSON)?OpenAgent";
console.log(url );
var Store = new dojo.data.ItemFileReadStore({url: url});
console.log("Store" );
var Model = new dojox.grid.data.DojoData(null, Store, {query:{ Category:"*" }, clientSort:true});
console.log("Model" );
//Model.store.fetch();
//console.log("fetch" );
var grid = dijit.byId("grid");
console.log("grid" );
grid.setModel(Model);
console.log("setModel" );
grid.refresh();
console.log("refresh" );
//grid.update();
//console.log("update" );
}