// 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.
Related
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 jqGrid inside of a div orderForm that can have a verifying number of rows added to it by a user.
What I would like to do is: whenever a user adds a row to the jqGrid, the totals in the TOTAL_LINE_AMOUNT column are added together and inserted into the label Subtotal
$('#orderForm).jqGrid({
data: details,
datatype: 'local',
colNames: ['ID', 'QUANTITY', 'MODEL_ORDER_NUM', 'DESCRIPTION', 'PRICE_EACH', 'TOTAL_LINE_AMOUNT'],
colModel: [
{ name: 'DETAIL_RECORD_ID', index: 'DETAIL_RECORD_ID', sorttype: 'string' },
{ name: 'QUANTITY', index: 'QUANTITY', sorttype: 'string' },
{ name: 'MODEL_ORDER_NUM', index: 'MODEL_ORDER_NUM', sorttype: 'string' },
{ name: 'DESCRIPTION', index: 'DESCRIPTION', sorttype: 'string' },
{ name: 'PRICE_EACH', index: 'PRICE_EACH', sorttype: 'string' },
{ name: 'TOTAL_LINE_AMOUNT', index: 'TOTAL_LINE_AMOUNT', sorttype: 'string' }
],
search: true,
onSelectRow: LoadInput,
loadonce: false,
jsonReader: { cell: '' },
sortname: 'DETAIL_RECORD_ID',
sortorder: 'asc',
sortable: true,
ignoreCase: true,
viewrecords: true,
height: 'auto',
width: 'auto',
shrinkToFit: false,
hiddengrid: false,
caption: 'Detail Records'
});
UPDATE: Here is how I load data into my grid
Form.Controller.orderForm = new function () {
var _detailRecordId = 1;
this.Create = function () {
var requestData = Controller.GetRequestData();
requestData.orderForm.push({
DETAIL_RECORD_ID: "T" + _detailRecordId++,
REQUEST_RECORD_ID: requestData.REQUEST_RECORD_ID,
QUANTITY: $('#orderForm_QUANTITY_INPUT').val(),
MODEL_ORDER_NUM: $('#orderForm_MODEL_ORDER_NUM_INPUT').val(),
DESCRIPTION: $('#orderForm_DESCRIPTION_INPUT').val(),
PRICE_EACH: $('#orderForm_PRICE_EACH_INPUT').val(),
TOTAL_LINE_AMOUNT: $('#orderForm_TOTAL_LINE_AMOUNT_INPUT').text()
});
Form.View.orderFrom.LoadGrid(requestData.orderForm);
};
Your code doesn't show which editing mechanism your are using with jqGrid so it is hard to say on which event you should subscribe (most porobably it should be either jqGridInlineAfterSaveRow or jqGridAddEditAfterComplete).
Getting the sum of column is very simple as jqGrid has a ready to use method for this:
var subTotal = $('#orderForm').jqGrid('getCol', 'TOTAL_LINE_AMOUNT', false, 'sum');
Depending of what kinf of HTML element your label is you should be able to set its text with one of following:
$('#Subtotal').text(subTotal);
or
$('#Subtotal').val(subTotal);
I'm trying to display data in a grid by using JsonStore.
The grid gets rendered, but it doesn't display the data.
The JSON data returned by API.ashx:
[{"Account":{"Username":"root","Password":null,"Enabled":true,"Id":1},"Text":"Hallo Welt!","Id":1},{"Account":{"Username":"root","Password":null,"Enabled":true,"Id":1},"Text":"hihihi","Id":3}]
My code:
Ext.onReady(function () {
var store = new Ext.data.JsonStore({
url: 'API.ashx?type=notes&action=getAll',
root: 'Note',
autoload: true,
fields: ['Text', { name: 'Id', type: 'int'}]
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id: 'Note',
header: 'Id',
width: 25,
sortable: true,
dataIndex: 'Id'
},
{
header: 'Text',
width: 160,
sortable: true,
dataIndex: 'Text'
}
],
stripeRows: true,
autoExpandColumn: 'Note',
height: 350,
width: 600,
title: 'Notes',
stateful: true,
stateId: 'grid'
});
store.load();
grid.render('grid-example');
});
I just fixed it myself. I had to remove the option "root" and now it works fine.
I am using ExtJS3.3.1 and try to load a Grid from file which contains a JSON Object.
It will work fine in IE loads grid with data but not works in Firefox.
here is simple code It doesn't give any error and warnning.
var store = new Ext.data.Store({
url: 'http://localhost/Vaishali/src/survey.html',
reader: new Ext.data.JsonReader({
root: 'data',
id: 'appeId',
totalProperty: 'total'
}, [{
name: 'appeId',
mapping: 'appeId'
}, {
name: 'survId',
mapping: 'survId'
}, {
name: 'location',
mapping: 'location'
}, {
name: 'surveyDate',
mapping: 'surveyDate'
}, {
name: 'surveyTime',
mapping: 'surveyTime'
}, {
name: 'inputUserId',
mapping: 'inputUserId'
}])
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [{
header: "appeId",
width: 60,
dataIndex: 'appeId',
sortable: true
}, {
header: "survId",
width: 60,
dataIndex: 'survId',
sortable: true
}, {
header: "location",
width: 60,
dataIndex: 'location',
sortable: true
}, {
header: "surveyDate",
width: 100,
dataIndex: 'surveyDate',
sortable: true
}, {
header: "surveyTime",
width: 100,
dataIndex: 'surveyTime',
sortable: true
}, {
header: "inputUserId",
width: 80,
dataIndex: 'inputUserId',
sortable: true
}],
width: 540,
height: 200
});
so can u please tell me why this happens.
oops
when I added the event onload and check the exception in mozilla firefox it will show exception in that status code show 0 and text "connection Failure'.
but in IE it will give proper connection and result.
I'd suspect you're not loading the page from http://localhost/ as well, so you're running afoul of the same origin policy. IE's more forgiving than it strictly speaking should be.
I am working on displaying a ExtJS Grid. I got everything correct except the part about proxy with in the Json store. When I try to display it throws an error:
this.proxy is undefined
Ext.data.Store=function(A){this.data=n...ta=C;this.resumeEvents();return B}});
I figured out that i need to do something in the store but not sure what. the variable list data has the Json Array string. Please any help is really appreciated. thanks
var listData = <%= aItems %> ;
var AIGrid;
Ext.onReady(function () {
var AIRecord = Ext.data.Record.create([{
name: "ID",
type: "int",
mapping: "ID"
}, {
name: "WSTITLE",
type: "string",
mapping: "WSTITLE"
}, {
name: "REQ_ATTUID",
type: "string",
mapping: "REQ_ATTUID"
}, {
name: "DESCRIPTION",
type: "string",
mapping: "DESCRIPTION"
}, {
name: "RES_ATTUID",
type: "string",
mapping: "RES_ATTUID"
}, {
name: "RESOLUTION",
type: "string",
mapping: "RESOLUTION"
}, {
name: "START_TIME",
type: "string",
mapping: "START_TIME"
}, {
name: "END_TIME",
type: "string",
mapping: "END_TIME"
}]);
var AIreader = new Ext.data.JsonReader({
root: "root",
id: "ID"
}, AIRecord);
var AIstore = new Ext.data.Store({
nocache: true,
data: listData,
reader: AIreader
});
var AIcol = new Ext.grid.ColumnModel([{
header: 'ID',
readOnly: true,
dataIndex: 'ID',
width: 30
}, {
header: 'Work Step',
dataIndex: 'WSTITLE',
width: 200,
readOnly: true
}, {
header: 'Requester',
dataIndex: 'REQ_ATTUID',
width: 80,
readOnly: true
}, {
header: 'Description',
dataIndex: 'DESCRIPTION',
width: 300,
readOnly: true
}, {
header: 'Resolver',
dataIndex: 'RES_ATTUID',
width: 80,
readOnly: true
}, {
header: 'Resolution',
dataIndex: 'RESOLUTION',
width: 300,
readOnly: true
}, {
header: 'Start',
dataIndex: 'START_TIME',
width: 100,
readOnly: true
}, {
header: 'End',
dataIndex: 'END_TIME',
width: 100,
readOnly: true
}]);
AIcol.defaultSortable = true;
AIGrid = new Ext.grid.GridPanel({
store: AIstore,
renderTo: 'listgrid',
cm: AIcol,
enableColLock: true,
title: 'Open Action Items',
width: 900,
height: 500,
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});
AIGrid.store.load();
});
I got the answer. with a little extra research over the internets. I used MemoryProxy to load the local data. that solved the problem. Yay!!