Json data not showing in extjs grid - javascript

Given data in the form:
var grid_data = [ {Hello: 'World'}, {Jesus:'Navas'} ]
I wish to draw a grid like so:
The grid shows with 2 rows but with no data, I can't find the problem in the following code:
var grid_store = Ext.create('Ext.data.Store', {
fields: [
{name: 'Property'},
{name: 'Value'}
],
data: grid_data
});
// create the Grid
var grid_view = Ext.create('Ext.grid.Panel', {
store: grid_store,
renderTo: 'info_panel',
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Property',
width : 100,
sortable : true,
dataIndex: 'Property'
},
{
text : 'Value',
width : 80,
sortable : false,
dataIndex: 'Value'
}
],
height: 350,
width: 600,
title: 'Array Grid',
viewConfig: {
stripeRows: true
}
});
Renders to:
<div id="info_panel"></div>
If you're wondering how I got the example image, I changed the store to an ArrayStore and re-formatted the data into arrays, but I'd prefer to miss out that step and insert the data as-is.
edit:
I think what I'm really asking for is a way to alert extjs to use the JSON keys as values, as opposed to most of the grid examples out there that take the form:
{value: 'Hello'}, {property: 'World'}

As one of the commenters and your edit suggested, your grid is built to consume a json with 'Property' and 'Value' being the keys for the json objects. I don't know if it's possible for you to change the source of the data to send in the reformatted json, but if not, you can always just run a quick loop to do so after receiving the data:
var new_data = [];
Ext.each(grid_data, function(obj) {
for (var prop in obj) {
new_data.push({
Property: prop,
Value: obj[prop]
});
}
}, this);

Related

Pass extJs Grid Value to Store PHP Script

I currently have a simple extJS Grid which is pulling data from a server and presenting it to the viewer. I would like to grab the value of the selected row, and then pass it to another PHP script for processing in order to display the results in another grid.
var roleInformationStore = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'RoleInformation',
proxy: {
type: 'ajax',
url: 'data.php',
reader: {
type: 'array',
},
writer: {
type: 'json'
}
}
});
var roleInformationGrid = Ext.create('Ext.grid.Panel', {
store: roleInformationStore,
width: '100%',
height: 200,
title: 'Roles',
columns: [
{
text: 'Name',
flex: 1,
width: 100,
sortable: false,
hideable: false,
dataIndex: 'role'
}
],
listeners: {
cellclick: function(view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
roleInformationStore.proxy.extraParams = record.get('role');
//Ext.Msg.alert('Selected Record', 'Name: ' + record.get('role'));
}
}
});
Using the listener in the current grid, I am able to get the value and show it using the alert method. Any suggestions on how to accomplish this?
Thanks
For this to work, extraParams has to be an object of key-value string pairs, because an URI has to be something like data.php?key1=value1&key2=value2.
Style-wise, Sencha advises to use getters and setters, whenever possible.
Together, you get:
var store = Ext.getStore("roleInformationStore");
store.getProxy().setExtraParam("myRoleParamKey",record.get('role'));
store.load();
In PHP, you would get the parameter then using
$role = $_GET['myRoleParamKey'];
You can of course substitute myRoleParamKey for any alphanumeric literal you want, but make sure you use the same key on both server and client side. ;-)
Docs: setExtraParam

Displaying object inside object in kendo grid

I new with kendo and I have problem with kendo grid. I have structure like this
var data = [{
key1: value1,
key2: value2,
objectInside: [{
insideKey1: insideValue1,
insideKey2: insideValue2,
insideKey3: insideValue3
},
{
insideKey1: insideValue1a,
insideKey2: insideValue2a,
insideKey3: insideValue3a
},
{
insideKey1: insideValue1b,
insideKey2: insideValue2b,
insideKey3: insideValue3b
}]
}];
and I need to create kendo grid and fill it with objectInside elements. For now I can display one of the element of the array:
var grid = $("#grid").kendoGrid({
pageable: true,
selectable: "row",
dataSource: data
columns : [
{ field: "objectInside.insideKey1[0]", title: "Value1:" },
{ field: "objectInside.insideKey2[0]", title: "Value2:" },
{ field: "objectInside.insideKey3[0]", title: "Value3:" }
]
}).data("kendoGrid");
But I do not have idea how to reach all the elements. Without indexing it doesn't work. It is possible to make loop here? I thought about making another variable contain only objectInside and try to read only this element but I failed here too. I try to do it like this:
var newData = data.objectInside;
or
var newData = JSON.stringify(data.objectInside);
Could anyone give me a hint how to deal with it?
Try this template:
{ template: "#= data.objectInside[0].insideKey1 #", title: "Value1" },
{ template: "#= data.objectInside[1].insideKey2 #", title: "Value2" },
{ template: "#= data.objectInside[2].insideKey3 #", title: "Value3" }
Demo
But this will show only one row, because the grid data contains one item in the first level. You can do like this to show all your data inside insideObject.

How to use switch between two store in one grid

I have a two data set in which one i am loading in store. My grid is completely fine. Now in some certain condition i want to load 2nd data to my store. I am using extjs 3
My code for grid is :
{
xtype: 'grid',
id: 'COGRID,
autoHeight: true,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
frame: true,
columns : this.columns,
store : store, // store is loading my data.
stripeRows: true,
}
My store and data :
var myData = [
['FFPE Slide',2,'eSample'],
['Plasma',2,'eSample'],
['Whole ',2,'eSample'] ];
var myData2 = [
['USA','at','a'],
['France','bt',b'],
['Aus','ct','c'] ];
var store = new Ext.data.ArrayStore({
fields: [
{name: 'stype'},
{name: 'scnt'},
{name: 'src'}
]
});
store.loadData(myData); // Here I am loading first data to store
button handler config , you need to set your data according to your requirement.
e.g
{
xtype:button,
text:'Click Me',
handler:function(btn){
Ext.getCmp('COGRID').getStore().loadData(myData);
}

Updating entire dojox.grid.datagrid row

I've been trying to update the entire row of my grid, but having issues. I am able to update a single cell (if it doesn't have a formatter), but I would like to be able to update the entire row. Alternatively, I could update the column, but I'm not able to get it working if it has a formatter.
Here is the code that I'm using to update the grid:
grid.store.fetch({query : { some_input : o.some_input },
onItem : function (item ) {
dataStore.setValue(item, 'input', '123'); //works!
dataStore.setValue(item, '_item', o); //doesn't work!
}
});
And the structure of my grid:
structure: [
{ type: "dojox.grid._CheckBoxSelector"},
[[{ name: "Field1", field: "input", width:"25%"}
,{ name: "Field2", field: "another_input", width:"25%"}
,{ name: "Field3", field: "_item", formatter:myFormatter, width:"25%"}
,{ name: "Field4", field: "_item", formatter:myOtherFormatter, width:"25%"}
]]
]
Got some information in the #dojo freenode channel from 'tk' who kindly put together a fiddle showing the proper way to do this, most noteably putting an idProperty on the memoryStore and overwriting the data: http://jsfiddle.net/few3k7b8/2/
var memoryStore = new Memory({
data: [{
alienPop: 320000,
humanPop: 56000,
planet: 'Zoron'
}, {
alienPop: 980940,
humanPop: 56052,
planet: 'Gaxula'
}, {
alienPop: 200,
humanPop: 500,
planet: 'Reiutsink'
}],
idProperty: "planet"
});
And then when we want to update:
memoryStore.put(item, {
overwrite: true
});
Remember that item has to have a field 'planet', and it should be the same as one of our existing planets in order to overwrite that row.

How to make a Pie Chart Aggregate the Data Source?

Using Kendo UI Complete for ASP.NET MVC, version: 2013.3 1119 (Nov 20, 2013)...
If I have this bit of code:
$("#status-chart").kendoChart({
dataSource: {
data: [
{Status: 10},
{Status: 20},
{Status: 200},
{Status: 200}
]
},
series: [{
field: 'Status',
categoryField: "Status",
aggregate: 'count'
}]
});
I get this chart:
As you can see - Status 10 and 20 have got a value of 1 and Status 200 a value of 2.
Great, but what I actually want is exactly the same thing in a pie chart (so, a chart with 3 pie slices, 2 of which are exactly the same size and one that is 2 times as big as the rest).
I therefore thought to myself, all I need to do is just set type: "pie" like so:
$("#status-chart").kendoChart({
dataSource: {
data: [
{Status: 10},
{Status: 20},
{Status: 200},
{Status: 200}
]
},
series: [{
field: 'Status',
categoryField: "Status",
aggregate: 'count',
type: "pie"
}]
});
But that produced this chart:
You can see that Status 200 is repeated and the value is determining the size of the slices.
So, here is my question:
How can I create a pie chart that looks like the picture below but which is bound to the data source in the first code snippet above?
Incidentally, the reason I do not want to change the data source is that I wish to share it with a grid.
What you are trying to do here is to group a shared DataSource and have it only affect one widget. Furthermore, Kendo UI will return a grouped object when you group it. The Pie chart is not interested in these objects, but rather the count of the items that each of these group objects contains. We just need to get the data in the right format.
So you have your original DataSource (which I have extracted since it's shared with another widget). When that DataSource changes, you want to populate a second one - one that you can group without affecting the grid.
var ds = new kendo.data.DataSource({
data: [
{Status: 10},
{Status: 20},
{Status: 200},
{Status: 200}
],
change: function() {
chartData.data(this.data());
}
});
The second DataSource (chartData) is grouped, and when it changes, it populates an array, constructing objects that the pie chart can actually understand.
var groupedData = [];
// populate the grouped data array by grouping this datasource
// and then populating an plain array
var chartData = new kendo.data.DataSource({
group: { field: 'Status' },
change: function() {
groupedData = [];
$.each(this.view(), function() {
groupedData.push({ field: this.value, value: this.items.length });
});
}
});
And then just bind your pie chart to that array
$("#status-chart").kendoChart({
dataSource: groupedData,
series: [{
type: 'pie',
field: 'value',
categoryField: 'field'
}]
});
Working example: http://jsbin.com/EKuxORA/1/edit

Categories