I have created a jsfiddle over here.
There is a row (no.4) in the the store having empty/null values, but the grid display appears to be collapsed.
code snippet:
function(Grid, Memory) {
var data = [
{ id: 1, name: 'Peter', age:24 },
{ id: 2, name: 'Paul', age: 30 },
{ id: 3, name: 'Mary', age:46 },
{ id: '', name: '', age:'' }
];
var store = new Memory({ data: data });
var options = {
columns: [
/*{ field: 'id', label: 'ID' },*/
{ field: 'name', label: 'Name' },
{ field: 'age', label: 'Age' }
],
store: store
};
new Grid(options, 'gridcontainer');
}
I would like to have blank rows in the grid with the same height as other populated rows.
Is it possible in dGrid?
I believe the reason why blank rows do not have the same height as other rows is that dGrid doesn't actually set a specific height that a row should have. In situations where a cell may need a 2nd row, then the cell would grow in height. If you want a set height, you can add a css attribute to your fiddle that does something like:
#gridcontainer .dgrid-content .dgrid-cell {
height: 24px;
}
Related
I'm new to SAPUI5 and I'm trying to aggregate some JSON data before displaying in a column chart.
Here are some lines of my code:
var xsodataURL = 'That is my URL to my xsodata';
var oModelBU = new sap.ui.model.odata.ODataModel(xsodataURL, false);
oModelBU.bindList('/PM_PROJECT', false, {
select: 'PMBudget, PMActual, PMEAC'
});
var oDatasetBU = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
axis: 1,
name: 'ProgramID: Overall Result',
value: ''
}],
measures: [
[{
name: 'Budget',
value: '{PMBudget}'
}, {
name: 'Actual',
value: '{PMActual}'
}, {
name: 'EAC',
value: '{PMEAC}'
}]
],
data: {
path: '/PM_PROJECT'
}
});
var oChartBU = new sap.viz.ui5.Column({
width: '100%',
height: calcChartHeight,
legendGroup: {
layout: {
position: 'bottom'
}
},
plotArea: {
colorPalette : d3.scale.category20().range()
},
title: {
visible: true,
text: 'Budget use in mEUR',
alignment: 'left'
},
dataset: oDatasetBU
});
oChartBU.setModel(oModelBU);
Actually everything works fine, but the application just display the JSON data of the last item in my xsodata. That's why I tried to aggregate the data in the xsodata file like:
"PM_SHOWCASE"."PM_PROJECT" aggregates always(SUM of "PMBudget", SUM of "PMActual", SUM of "PMEAC");
But that doesnt work - does anyone know, how I can display ALL data aggregated as SUM of the table "PM_PROJECTS"? Thanks in advance!
Have a great day, Arne.
Jqgrid is not showing JSON data, however rows are generating
Server side code:
public JsonResult Denominations()
{
.
.
int counter = 0;
var jsonData = new
{
total = result.UserObject.Count,
page = 1,
rows = (
from p in result.UserObject
select new
{
id = ++counter,
cell = new string [] {
p.CurrencyID.ToString(),
p.DenominationID.ToString(),
p.DenominationName.ToString(),
p.DenominatorCount.ToString(),
p.Multiplier.ToString(),
p.TenderID.ToString()
}
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Data from server side is like this:
{"total":1,"page":1,"rows":[{"id":1,"cell":["1","1","Penny","0","0.0100","1"]}]}
JavaScript code:
$("#denominators").jqGrid({
url: '/Denominations?tenderid=1¤cyid=1',
contentType: "application/json",
datatype: "json",
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
repeatitems: false,
cell: 'cell',
id: 'id',
userdata:'userdata'
},
mtype: "GET",
colNames: ["CurrencyID", "DenominationID", "TenderID", "Multiplier", "DenominationName", "DenominatorCount"],
colModel: [
{ name: "currencyid", width: 80, align: "center" },
{ name: "denominationid", width: 90, align: "center" },
{ name: "tenderid", width: 250 },
{ name: "multiplier", width: 250 },
{ name: "denominationname", width: 95 },
{ name: "denominatorcount", width: 95 },
],
height: 'auto',
loadonce: true,
sortname: "DenominationID",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true
});
View:
<table id="denominators" ></table>
View creates the grid with column header however rows are generated but rows did not any data int.
You use wrong jsonReader. To be exactly the property repeatitems: false is false. It means that the format of every item in rows array is
{
"currencyid": "1",
"denominationid": "1",
"tenderid": 1,
"denominationname": "Penny",
"denominatorcount": "0",
"multiplier": "0.0100"
}
You use
{
"id": 1,
"cell": [
"1",
"1",
"Penny",
"0",
"0.0100",
"1"
]
}
instead. So you should remove jsonReader because the format of input data corresponds the default jsonReader, but you need still reorder the columns of the grid or change the order of items which you place in cell array so that it corresponds the order of columns in colModel.
Additional remarks: you use wrong value for total. It should be the number of pages. By the way you use loadonce: true. In the case you can remove "total":1,"page":1 part from the response and just return array of named items. You should just choose the names of columns the same as the names of properties if the items.
I have a Panel where in I wish to add two text fields in 'hbox' layout for every entry in the json data.
For e.g. : Suppose I have a json like this:
{
..
ids : [
{
'name' : 'first name',
'surname' : 'first surname',
},
{
'name' : 'second name',
'surname' : 'second surname'
}
]
}
In this example the panel will consist of two rows of two textfields each with the labels being 'name' and 'surname'
So in the for loop I need to know how to insert the two textfields in 'hbox' layout inside the Panel. Had it been a grid it would be easy to add to the store.
Here's what I have done.
Ext.getCmp('panelid').items.add(Ext.create('Ext.container.Container', {
layout: {
type: 'hbox'
},
defaults: {
bodyPadding: 10,
margin: '10 0 10 10',
height: 100
},
items: [
{
fieldLabel: 'Name',
id: 'idFieldName',
name : 'Data',
margin:'0 10 10 0',
width:225,
labelWidth: 40
},
{
fieldLabel: 'Datatype',
name : 'Type',
id: 'idFielddataType',
margin: '0 10 10 0',
width:225,
labelWidth:55
}
]
}));
EDIT1: Added my progress.
EDIT2: I have found half the solution to the problem. The problem was that I don't need to add to the items but rather I can just add to the panel itself. So this is working :
Ext.getCmp('panelid').add(....)
But now the issue is that in the second iteration of the loop the next hbox formatted text fields come on TOP of the existing ones, i.e., instead of adding a row below this line is adding on top of the panel. Kindly advise how to get rid of this issue.
EDIT 3:
I have found the solution as to why it was adding elements on top of the existing ones. It's because whenever I was adding elements in the loop the id of the added elements was same. So in effect it was replacing the two textfields I had already put in the previous iteration.
So, I have just altered the id name as follows:
id: 'idFieldName' + i
I think you should use the "form" layout instead (or an Ext.form.Panel), and use a Ext.form.FieldContainer to group your 2 text field.
Example :
Ext.create('Ext.form.Panel', {
title: 'FieldContainer Example',
width: 550,
bodyPadding: 10,
items: [
{
xtype: 'fieldcontainer',
fieldLabel: 'first line',
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'textfield',
flex: 1
}]
},
{
xtype: 'fieldcontainer',
fieldLabel: 'second line',
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'textfield',
flex: 1
}]
}
]
});
If you want to do it dynamically you can do :
Ext.create('Ext.form.Panel', {
title: 'FieldContainer Example',
width: 550,
bodyPadding: 10,
addRow : function(rowLabel) {
this.add({
xtype: 'fieldcontainer',
fieldLabel: rowLabel,
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'textfield',
flex: 1
}]
});
}
});
and then in your loop you can use :
myPanel.addRow('test');
You should use different names for each field too, to be able to retrieve the form values later.
name: 'Data' + i
EDIT
Besides, I would use itemId instead of id, as stated here: https://stackoverflow.com/a/18472598/2085604
You can then use Ext.ComponentQuery.query(..) to get components by their itemId:
https://stackoverflow.com/a/24407896/2085604
What version of ExtJS are you using for this example? 3, 4 or 5? I ask this because changes the solution of your problem (more or less) depending on the version.
EDIT
Seems that you found a solution. I don't know if you are doing this in the view, but if that's the case, you should use a controller linked to that particular view. In this way your code will look better, more clear and another important reason, the following versions of ExtJS(5), use this kind of structure.
// I am using a JQXGrid, and while populating the grid with valid JSON string (I checked) it forms the columns perfectly (headers, footers, pageing, etc) but all the data is listed under the first column. I have been trying different settings for the last while and possibly a second set of eyes can see the error.
// Configure data source for data grid,...
var LocationDataSource =
{
datatype: "json",
datafields: [
{ name: 'Date' },
{ name: 'ProductCode' },
{ name: 'StoreNum' },
{ name: 'ProductQty', type: 'int' }
],
localdata: LocationData
};
// Configure Data Adapter and apply JSON data to it,...
var LocationDataAdapter = new $.jqx.dataAdapter(LocationDataSource);
// Apply data source to grid,...
$("#jqxLocationGrid").jqxGrid(
{
width: 900,
source: LocationDataAdapter,
pageable: true,
rowsheight: 50,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
selectionmode: 'multiplecellsadvanced',
columns: [
{ text: 'Date', datafield: 'Date', width: 250 },
{ text: 'Product Code', datafield: 'ProductCode', width: 250 },
{ text: 'Store Number', datafield: 'StoreNum', width: 250 },
{ text: 'Product Qty', datafield: 'ProductQty', width: 250 }
]
});
I had the same issue and i fixed it, I forgot to add jqx.base.css to the default.aspx.
Let's start off with my store:
var newstore = Ext.create('Ext.data.Store', {
fields: ['id', 'table_name', 'name', 'description']
proxy: {
type: 'memory'
}
});
I have some example data here, which comes from a dynamic json response:
{
"elements":[
{
"element":{
"name":"Element Name", <---- This is the value I need**
"id":"Element ID",
"attributes":[
{
"attrname":"id",
"attrvalue":"This is the ID"
},
{
"attrname":"name",
"attrvalue":"This is the name"
},
{
"attrname":"description",
"attrvalue":"This is the description"
},
{
"attrname":"table_name",
"attrvalue":"This is the table"
}
]
}
}
}
And I decode my json here, which places it neatly into my store:
for( var i=0; i < decoded.elements.length; i++ ) {
var element = decoded.elements[ i ].element;
var element_name = element.name; <---- THIS retrieves that value I need
var model = {};
// loop over attributes
for( var x=0; x < element.attributes.length; x++ ) {
var attribute = element.attributes[ x ];
model[ attribute.attrname ] = attribute.attrvalue;
}
// implicitly cast data as Model
newstore.add( model );
}
And lastly, my grid - ResponseList.js:
var grid = Ext.define('MyApp.view.ResponseList' ,{
initComponent: function(columns) {
//config
this.columns = [
{header: 'Element Name', dataIndex: 'What goes here ???'},
{header: 'ID', dataIndex: 'id'},
{header: 'View Name', dataIndex: 'name'},
{header: 'Description', dataIndex: 'description'},
{header: 'Table Name', dataIndex: 'table_name'},
etc...
My question is, how do I place that first name value, Element Name into the first row of my grid? The name name is already taken for the attributes.attrname field, so I'm not sure how to proceed. Everything except Element Name displays just fine.
[Edit]: This is how I want my grid to look:
Any help is appreciated thanks!
In your fields in the store or in a model you can specify mapping which allows for nested json data:
var model = Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
mapping: 'element.id',
type: 'auto'
}],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'elements',
successProperty: ''
}
}
});
var store = Ext.create('Ext.data.Store', {
model: model,
autoLoad: true,
listeners: {
load: function() {
console.log(store);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo:Ext.getBody(),
store:store,
columns: {
defaults: {},
items: [{
header: "Id",
dataIndex: "id",
hidden: false
}]
}
});
Here is a fiddle demonstrating working code.
You can probably use the renderer on the grid to get the value you actually need.
{header: 'Element Name', dataIndex: 'What goes here ???',
renderer: function(value, metaData, record, row, col, store, gridView){
return record.someAttribute;
}
},
I'm not sure of the structure of your record, but I think you can guess how to go on from here.
Also, I don't think all that manual decoding is necessary, I can't figure out how you want your grid to look, but if you post a sketch of it or something maybe we can make all that decoding look cleaner.