I have EnhancedGrid which loads data after getting response from AJAX call based on my query to database.When i make the first request i can see the data to be populated in grid correctly. However, i change my query it still loads the previous data. My response returns correct data from database in JSON.
I tried in all possible ways and debugged using firebug but unable to get the output. I tried searching the similar post but still it didn't work for me.Any help would be much appreciated. I am pasting my code below.
_initialiseGrid:function(){
var layout = [
{'name': 'Project Name', 'field': 'projectName', 'width': '200px'},
{'name': 'Date Created', 'field': 'createdDate', 'width': '100px',formatter:this.formatDate},
{'name': 'Comments', 'field': 'senderComments', 'width': '250px',editable:true}
];
dataGrid = new dojox.grid.EnhancedGrid({
id: 'JoinProjectGrid',
structure: layout,
rowSelector: '20px',
plugins: {indirectSelection: {headerSelector:true}}},
document.createElement('div'));
}
_loadData:function(response){
var projectList=response.retrievedList;
var rowData = {
identifier: "projectId",
items: projectList
};
dataStore = new dojo.data.ItemFileWriteStore({data: rowData});
dataGrid.set("store",dataStore);
dojo.byId("gridDivForJoin").appendChild(dataGrid.domNode);
dataGrid.startup();
}
i tried using :
dataGrid.setStore(dataStore)
which is not working for the second request so,
i used dataGrid.set("store",dataStore) which is not loading the new data but shows previous one.I also tried :
clearOnClose:true, urlPreventCache:true
to refresh the grid and used below code also to clear the store on second request.
var newStore = new dojo.data.ItemFileReadStore({data: { identifier: "", items: []}});
dataGrid.setStore(newStore);
i got it worked after adding
dataGrid.render()
Related
help me in upper or lower code problem must be appreciated
i want to make a bar chart and populate it from my collection from meteor i
want to print exercises with there status
but when i return one record from db it is working well graph is coming but
when coming two records its not working kindly help in it
Just help me that how i can make a correct JSON format for "google visualization graph" from meteor mongodb
function drawChart() {
var status=Session.get('status');
var graphData=Session.get("graphId");
console.log("graphData==========",graphData)
patientLog.find({patientId: graphData},{fields:
{patientExerciseName:1,status:1,_id:0}}).forEach(function (myDoc) {
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Room' });
data.addColumn({ type: 'string', id: 'Name' });
data.addRows([
[ myDoc.status, myDoc.patientExerciseName]
])
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
})
}
Note : Foreach function when return two rows from database it not works
as i also try this
when i give JSON to my graph it is giving error "Invalid data table format:
must have at least 2 columns".
how i can make a JSON format which support Google visualization charts
please help me mine code is there
function drawChart() {
var status=Session.get('status');
var graphData=Session.get("graphId");
patientLog.find({patientId: graphData},{fields:
{patientExerciseName:1,status:1,_id:0}}).forEach(function (myDoc) {
var Mydoc=JSON.stringify(myDoc)
var data = new google.visualization.DataTable(Mydoc)
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new
google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
})
}
1) Check that the data is received: in Meteor it is sometimes tricky as publications may not be ready when you draw your chart. You need to make sure you wait for the publication to be ready. (Use console log to log the data and see if it's there, as within the debugger the data will be there by the time you look it up
2) once you are sure the data is there, read the GoogleChart docs: it is a fairly extensive library with lots of examples, so just make sure you data matches the right format.
this question and answer should help:
Building array and formatting JSON for Google Charting API
Good day everyone, I'm new user to Extjs 4. Right now, I have a problem in creating a simple paging (a test run just to familiarized on this). Please take a look at the example below.
//creating a store data first
var itemsPerPage = 2;
var productivity = Ext.create('Ext.data.Store',{
fields : ['name','aht','numberOfCalls'],
pageSize: itemsPerPage,
autoLoad: true,
data:{'items':[
{name: 'Magelyn Cunanan', aht:'6:00', numberOfCalls:'50'},
{name:'Martin Dejaresco', aht:'7:30', numberOfCalls:'40'},
{name:'Emerson Dela Pena', aht:'8:00', numberOfCalls:'45'}
]},
proxy: {
type: 'ajax',
url: 'pagingstore.js',
reader: {
type: 'json',
root: 'items',
totalProperty:'total'
}
}
});
productivity.load({
params:{
start:0,
limit: itemsPerPage
}
});
then on my paging,
//... some code here. by the way this is a viewport container
region: 'center',
xtype: 'tabpanel',
autoScroll: true,
activeTab: 2,
items: [{
title: 'Agent\'s Productivity',
xtype: 'gridpanel',
store: productivity,
//for flex, indicates the amount of space this component will take up in its parent container. eg. if 1 this will take 100% of the container
columns: [
{text: 'Agent name',dataIndex: 'name', flex: 1},
{text: 'Handling Time',dataIndex:'aht',flex:1},
{text: 'Number of calls' ,dataIndex: 'numberOfCalls',flex:1}
],
dockedItems:[{
xtype: 'pagingtoolbar',
store: productivity,
dock: 'bottom',
displayInfo: true
}],
all of these codes that I mentioned earlier are inside in app.js. The problem is when I run the program. The data that I stored doesn't appeared on the grid. It shows only no results plus 0 displays on the dockedItems.. I'm using this just to familiarize on how the extjs works and I need to use this extjs for my programming project in the future.
your answer and explanations to your answer is highly appreciated :)
thank you
What is apparent from your code:
you use inline data plus ajax proxy. These two are mutually exclusive - you either want some inline data or you want to pull data from a server via ajax.
proxy url points to a file (at least I guess it from the name pagingstore.js. This is not going to work as server side has to honor start and limit parameters, it has to return only matching recors and it has to return total number of records for paging to work.
you must never fiddle with start and limit yourself when loading the store. Store already knows what to do and sends these parameters automatically.
For inline paging just need to code this
pageSize: itemsPerPage
proxy: {
type: 'memory',
enablePaging: true
}
oh boy.. I made myself difficult on this one :) but thanks for the reference
I have an enhnaced grid connected to a JSONRest and i have it populating after the grid starts up.
I'm confused as to how to update the Grid store when a new query is performed, can anyone help ?
var store = new JsonRest({
target: "rest/search"
});
dataStore = new ObjectStore({ objectStore: store });
/*set up layout*/
var layout = [[
{'name': 'Name', 'field': 'col1', noresize: true, 'width': '100%'},
]];
/*create a new grid:*/
grid = new EnhancedGrid({
id: 'grid',
store: dataStore,
structure: layout,
selectable: true,
selector: false,
selectionMode: 'none',
escapeHTMLInData: false,
autoHeight:true,
plugins: {
pagination: {
pageSizes: ["10", "25", "50"],
description: true,
pageStepper: true,
maxPageStep: 4,
defaultPageSize: 5,
sizeSwitch: true,
position: 'bottom'
}
}
}, document.createElement('div'));
grid.setQuery({
term: "term",
category: "category"
});
grid.startup();
Doing a store.query does hit my back end, but how do i repopulate the Grid with the results?
store.query({term: "newterm", category: "newcategory"},
{
start: 10,
count: 10,
}).then(function(data){
});
In order to populate the grid, you shouldn't be performing a store query directly - you should be instructing the grid to use the store, and it will query it itself.
You already appear to be assigning the store instance in your call to the DataGrid constructor, and you're properly wrapping it with dojo/data/ObjectStore (since dojox grid doesn't support dojo/store), so it's not clear to me why you are even attempting to perform a query beyond that. You should see a network request to your service as soon as you call grid.startup().
If you're seeing a network request being made when you create the grid but you're not seeing results in the grid, chances are your service does not actually follow the conventions that dojo/store/JsonRest expects. See http://dojotoolkit.org/reference-guide/1.9/quickstart/rest.html for information on what is expected in requests and responses.
If you're actually asking how to tell the grid to use a different store at some point in the future, call grid.setStore(newstore).
Just wondering if anyone can help me with this issue. I have a Gridx connected to a JSONRest store. It works but when the grid starts up it seems to make a call to my server. I dont want this to happen. The server call takes two parameters and i only want this to be called when i query the store.
my code:
var restStore = new
dojo.store.JsonRest({target: "search"});
grid = new Grid({
id: 'grid',
cacheClass: Cache,
store: restStore,
autoHeight:true,
pageSize: 10,
modules: [
Pagination,
PaginationBar
],
paginationBarSizes: [10, 25, 50],
paginationBarVisibleSteppers: 4,
paginationBarGotoButton: false,
paginationBarDescription: true,
structure: [
{id: "description", field: 'description', width: '100%',
formatter: formatter,
}
]
});
query to the store which works
grid.model.clearCache();
grid.store.query({term : term, category : category}).then(function(results){
});
Also if i have the gridx inside another widget, it gets called again when the other widget starts up.
Any body any ideas how i get around this?
Gridx takes a 'query' parameter in it's initialization arguments, which sets initial query for the store. gridx queries the store on startup to populate itself for the first time. just specify
.......
query: {term : term, category : category},
......
in gridx initialization and it will perform that query for you on startup to populate your grid
I am using inlineNav (successfully due to assistance here!).
Now using dataUrl in a select statement, I do not understand the behavior.
The select options are not loaded when the grid is loaded. The select HTML request is not made until either edit or add a record is pressed.
Can I get it to load as soon as the grid is loaded?
$("#navgrid").jqGrid({
sortable: true,
rownumbers: true,
url: 'cms.dbw?action=ajaxgrid&sessionid=3d70a780-d6ec-102f-bd56-0015171f0bcc&subaction=jq&tableid=carepln',
editurl: 'cms.dbw',
datatype: 'json',
mtype: 'GET',
pager: '#navgrid_bottompager',
rowNum: 10,
rowList: [10,50,100],
width: 750,
height: '100%',
shrinkToFit: false,
toolbar: [false,'top'],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
gridview: true,
altRows: false,
toppager: true,
caption: 'Care Plan Detail',
colNames: ['ID','Act','Resident Code','Care Code'],
colModel: [
{name:'id',index:'id',width:50,align:'center',search:false,key:true,hidden:true},
{name:'active',width:30,align:'center',editable:true,edittype:'checkbox',editoptions: {value:'Y:N'},formatoptions:{disabled:false,value:"Y:N"}},
{name:'resid',align:'left',editable:true,width:70},
{name:'classid',align:'left',editable:true,edittype: 'select',editoptions: { dataUrl: 'cms.dbw?action=ajaxgrid&sessionid=3d70a780-d6ec-102f-bd56-0015171f0bcc&subaction=jqsubtable&tableid=careserv&field1=classid&field2=description'} ,width:70}
]
});
{"page":1,"records":4024,"total":403,"rows":[{"id":"1","cell":["1","Y","100243","22020"]},{"id":"2","cell":["2","Y","100220","22020"]},{"id":"3","cell":["3","Y","100193","22020"]},{"id":"4","cell":["4","Y","100082","22020"]},{"id":"5","cell":["5","Y","100068","22020"]},{"id":"6","cell":["6","Y","100241","22020"]},{"id":"7","cell":["7","Y","100215","22020"]},{"id":"8","cell":["8","Y","100059","22020"]},{"id":"9","cell":["9","Y","100240","22020"]},{"id":"10","cell":["10","Y","100009","22020"]}]}
The dataUrl does not resolve until the edit is started. And does not display after the edit.
I see no disadvantage from the loaded of dataUrl at the start of editing. On the contrary I see such behavior as the advantage. First of all one should not load optional data. It's better to load the data on demand. Second advantage is that you get the current data from dataUrl. On start of editing the current data from dataUrl will be loaded. So if the data will be changed on the server you can have different values on every row editing.
If you need load the data only once you can don't use dataUrl at all. Instead of that you can make separate Ajax call to set editoptions.value with respect of setGridParam.
I have the same issue - I have a foreign key in my data, and I'd like the grid to show some understandable value for this column, rather than some random key that the user will not know. Like you, I've used dataUrl to get the options, and would like to use formatter:'select' to have it display these values even when not editing the row. The problem is that this ajax request only happens when the row is edited, so it doesn't know the values until editing happens. The only solution I've found is just to do some manual ajax loading of these values before setting up the grid, and using these values to set editoptions: {value: ... } as you did for one of the other columns. This is the only way that the grid formatter can know these values before editing occurs.
This answer provides an example of loading the options before the gird, but leaves out the formatter:'select' part - here's a link to the documentation about that.