Related
How to display extJS columns after each record not on the top.
I am grouping extJS grid with three columns and grouping is working fine.
Here is the code and we can test in fiddler as well.
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['name', 'seniority', 'department', 'sort', 'groupsort'],
grouper: {
groupFn: function(item) {
return 'department: ' + item.get('department');
}
},
// Have members of each group sorted on this field
sorters: [{
property: 'name'
}],
data: {'employees':[
{ "name": "Michael Scotts", "seniority": 7, "department": "Management", "groupsort" : "2" },
{ "name": "Dwight Schrute", "seniority": 2, "department": "Sales", "groupsort" : "1" },
{ "name": "Jim Halpert", "seniority": 3, "department": "Sales", "groupsort" : "1" },
{ "name": "Kevin Malone", "seniority": 4, "department": "Accounting", "groupsort" : "3" },
{ "name": "Angela Martin", "seniority": 5, "department": "Accounting", "groupsort" : "3" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'employees'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Seniority', dataIndex: 'seniority' },
{ text: 'Department', dataIndex: 'department', sortable: true }
],
features: [{
ftype: 'grouping'
}],
renderTo: Ext.getBody()
});
}
});
My requierment is I want show columns not on the top but after the grouping for each record. Is there any workaround for that.
I want to take a field from nested JSON object as a string which is used as parameter.
I'm using a github project https://github.com/bencripps/react-redux-grid.
this react component is used for tree-grid.
I have a data and I want to map it as a tree-grid view.
My nested JSON object is below. It comes from an API. I want to take "2020.total" as a parameter (line 4)
"id": 1,
"parentId": -1,
"Name": "Category 1",
"2020": {total:120, tax:12},
"children": [{
"id": 11,
"parentId": 1,
"Name": "Category 11",
"2020": {total:23, tax:2},
}]
when i finally get this parameter i use it as a variable in below code (line 16)
const complexData = {
showTreeRootNode: false,
data:datafromAPI,
gridType: 'tree',
dragAndDrop: true,
columns: [
{
name: 'Name',
className: 'additional-class',
dataIndex: 'Name',
sortable: false,
expandable: true
},
{
name: 'Total Payment',
dataIndex: 2020.total,
sortable: false,
className: 'additional-class'
}],
};
"Name" attribute is working fine but "Total Payment" is not working.
i tried those syntax;
'2020.total'
'[2020].total'
'[2020][total]'
I know this is a little bit syntax question but i don't know how to search for it.
thanks for all answer.
let a = {
"id": 1,
"parentId": -1,
"Name": "Category 1",
"2020": {total:120, tax:12},
"children": [{
"id": 11,
"parentId": 1,
"Name": "Category 11",
"2020": {total:23, tax:2},
}]
}
Try a[2020].total
You can access it like this:
let a = {
"2020": {total:120, tax:12},
}
a[2020].total
a["2020"].total
I have dojo treeGrid that works fine. It shows projects with cost categorized by year. Also it shows totals. But when I try to filter it by one of column it mess up the grid (breaks categories and filter records improperly). Do I use grid.filter properly? I need to keep categorized structure but remove/filter certain records. Or should I refresh jsonStore somehow instead?
//HTML
<div id="treeGrid"></div>
<a href="javascript:void(0)">
<span id='button1'>Filter</span>
</a>
//JavaScript
var layout = [
{ cells: [
[ {field: "year", name: "Year"},
{field: "childItems",
children: [ { field: "status", name: "Status"},
{ field: "programname", name: "Program Name"},
{ field: "programcost", name: "Program Cost"}
],
aggregate: "sum"
}
]] } ]
var jsonStore = new dojo.data.ItemFileWriteStore({ url: "<........>"});
var grid = new dojox.grid.TreeGrid({
structure: layout,
store: jsonStore,
query: {type: 'year'},
queryOptions: {deep: true},
rowSelector: true,
openAtLevels: [false],
autoWidth: true,
autoHeight: true
},
dojo.byId("treeGrid"));
/* attach an event handler */
on(dom.byId("button1"),'click',
function(e){
grid.filter({status: "Approved"});
}
);
grid.startup();
dojo.connect(window, "onresize", grid, "resize");
/* sample data ======================================================
{
"identifier": "id",
"label": "name",
"items": [
{
"id": "2018",
"type": "year",
"year": "2018",
"childItems": [
{
"status": "Approved",
"programname": "Program 1",
"programcost": 100
},
{
"status": "Pending",
"programname": "Program 2",
"programcost": 200
}
]
},
{
"id": "2016",
"type": "year",
"year": "2016",
"childItems": [
{
"status": "Pending",
"programname": "Program 3",
"programcost": 300
}
]
}
]
}
*/
I have the following JSON data service and I trying to generate a grid using JQgrid. fro some reason when i use the JSON data. it doesnt not render anything
How can i fix this so that jqgrid renders the tablegrid from the JSON data?
Here is my fiddle
MY JQGrid
$("#output").jqGrid({
url: "/echo/json/",
mtype: "POST",
datatype: "json",
postData: {
json: JSON.stringify(jsonData)
},
colModel: [
/** { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
{
name: 'fdicCertificateNumber',
width: 65,
formatter: "showlink",
formatoptions: {
baseLinkUrl: "http://www.cnn.com",
idName: "",
addParam: function (options) {
return {
fdicCertificateNumber: options.rowData.fdicCertificateNumber,
bName:options.rowData.bName
};
}
}
}, {
name: 'bName',
width: 165
}, {
name: 'address',
align: 'right',
width: 85
}, {
name: 'state',
label: 'Share Price',
align: 'right',
width: 100,
},
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{
name: 'lastModifiedDateTime',
label: 'Total Value',
width: 160,
}, {
name: 'regulatorFull',
label: 'LTV Ratio',
width: 70,
sorttype: 'number',
align: "right",
}, {
name: 'bankHoldingCompany',
label: 'bankHoldingCompany',
classes: "hidden-xs", labelClasses: "hidden-xs",
width: 120,
width: 165
},
{
name: 'charterClassFull',
label: 'MaxLoanAmount',
width: 165,
sorttype: 'number',
}
],
additionalProperties: ["Num1"],
/*beforeProcessing: function (data) {
var item, i, n = data.length;
for (i = 0; i < n; i++) {
item = data[i];
item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
item.Value = parseFloat($.trim(item.Value).replace(",", ""));
item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
}
}, */
iconSet: "fontAwesome",
loadonce: true,
rownumbers: true,
cmTemplate: {
autoResizable: true,
editable: true
},
autoResizing: {
compact: true
},
autowidth: true,
height: 'auto',
forceClientSorting: true,
sortname: "Symbol",
footerrow: true,
caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>",
loadComplete: function() {
var $self = $(this),
sum = $self.jqGrid("getCol", "Price", false, "sum"),
sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
//ltvratio = $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
$self.jqGrid("footerData", "set", {
LTVCategory: "Max Approved Loan Amount:",
Price: sum,
MaxLoanAmt: sum1
});
}
});
$("#output").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});
$(window).on("resize", function () {
var newWidth = $("#output").closest(".ui-jqgrid").parent().width();
$("#output").jqGrid("setGridWidth", newWidth, true);
});
JSON
[
{
"rank": {
"fdicCertificateNumber": 3510,
"bName": "rank , National Association",
"bFullName": "rank , National Association",
"address": "100 NORTH TRYON ST",
"city": "CHARLOTTE",
"state": "NC",
"zip": "28202",
"lastModifiedDateTime": "Oct 20, 2016",
"regulatorShort": "OCC",
"regulatorFull": "Office of the Comps",
"assetConcentration": "All Other > $1 Billion",
"charterClassShort": "N",
"charterClassFull": "National rank, Member",
"timePeriod": "201606",
"bankHoldingCompany": "rank CORPORATION",
"nameQtr": "2016 Q2",
"status": "Active"
},
"Analytics": {
"fdicCertificateNumber": 3510
},
"metricsList": []
},
{
"rank": {
"fdicCertificateNumber": 3511,
"bName": "rank, National Association",
"bFullName": " rank, National Association",
"address": "10 N. PHILLIPS AVENUE",
"city": "SIOUX FALLS",
"state": "SD",
"zip": "57104",
"lastModifiedDateTime": "Oct 20, 2016",
"regulatorShort": "OCC",
"regulatorFull": "Office of the Electric company",
"assetConcentration": "All Other > $1 Billion",
"charterClassShort": "N",
"charterClassFull": "National rank, Member",
"timePeriod": "201606",
"bankHoldingCompany": "WELLS FARGO & COMPANY",
"nameQtr": "2016 Q2",
"status": "Active"
},
"Analytics": {
"fdicCertificateNumber": 3511
},
"metricsList": []
},
{
"rank": {
"fdicCertificateNumber": 14028,
"bName": "First Guaranty rank",
"bFullName": "First Guaranty rank",
"address": "400 GUARANTY SQUARE",
"city": "HAMMOND",
"state": "LA",
"zip": "70401",
"lastModifiedDateTime": "Oct 20, 2016",
"regulatorShort": "IC",
"regulatorFull": " Corporation",
"assetConcentration": "Commercial a Specialization",
"charterClassShort": "NM",
"charterClassFull": "State rank, Non-Member",
"timePeriod": "201606",
"bankHoldingCompany": "FIRST GUARANTY BANCSHARES, INC.",
"nameQtr": "2016 Q2",
"status": "Active"
},
"Analytics": {
"fdicCertificateNumber": 14028
},
"metricsList": []
},
{
"rank": {
"fdicCertificateNumber": 58564,
"bName": " rank",
"bFullName": " rank",
"address": "260E RXR PLAZA",
"city": "UNIONDALE",
"state": "NY",
"zip": "11556",
"lastModifiedDateTime": "Oct 20, 2016",
"regulatorShort": "IC",
"regulatorFull": " Corporation",
"assetConcentration": "Commercial Specialization",
"charterClassShort": "NM",
"charterClassFull": "State rank, Non-Member",
"timePeriod": "201606",
"bankHoldingCompany": " CORPORATION",
"nameQtr": "2016 Q2",
"status": "Active"
},
"Analytics": {
"fdicCertificateNumber": 58564
},
"metricsList": []
}
]
The JSON data, which you included in the question, are correct, but the data from JSFiddle demo are wrong because you placed unneeded {} over the array. After fixing the input data you can use jsonmap property for example: http://jsfiddle.net/OlegKi/615qovew/98/ to parse input data correctly or to use jsonReader: { cell: "rank" } alternatively: see http://jsfiddle.net/OlegKi/615qovew/100/.
I'm trying to use datatables with a set number of columns and an array of objects I get from jQuery ajax.
I get the error:
datatables warning (table id = myId requested unknown parameter 0 from the data source for row 0
Searching the internet has shown me that it's probable I have a different number of column headers and column data in my message_json array;
I have 21 columns set up in my data table initialization:
var construct_messages_table = function(message_json){
var oTable = $('#tableId').dataTable( {
"sPaginationType": "full_numbers",
"bProcessing": true,
"bDeferRender": true,
"aaData": message_json,
"aoColumns": [
{ "sTitle": "coloumn1"},
{ "sTitle": "coloumn2"},
{ "sTitle": "coloumn3"},
{ "sTitle": "coloumn4"},
{ "sTitle": "coloumn5"},
{ "sTitle": "coloumn6"},
{ "sTitle": "coloumn7"},
{ "sTitle": "coloumn8"},
{ "sTitle": "coloumn9"},
{ "sTitle": "coloumn10"},
{ "sTitle": "coloumn11"},
{ "sTitle": "coloumn12"},
{ "sTitle": "coloumn13"},
{ "sTitle": "coloumn14"},
{ "sTitle": "coloumn15"},
{ "sTitle": "coloumn16"},
{ "sTitle": "coloumn17"},
{ "sTitle": "coloumn18"},
{ "sTitle": "coloumn19"},
{ "sTitle": "coloumn20"},
{ "sTitle": "coloumn21"}
]
} );
};
And
for (var i = 1; i < message_json.length; i++){
console.log(Object.keys(message_json[i]).length);
}
shows all objects have a length of 21. What could be wrong here?
EDIT:
I've removed nulls as that might be the problem, but still no help.
for (var i = 0; i < message_json.length; i++){
for (var o in message_json[i]){
if (message_json[i][o] == null){
message_json[i][o] = "";
}
}
}
EDIT:
message_json is in this format
[
{type: "int",
id: "111",
name: "co",
description: "",
is_bool: "0",
keyword: "<tag name="various-xml">fields</xml>",
message: "hello",
temp: "world",
settings: "",
priority: "100",
enabled: "0",
secure: "1",
var1: "post",
var1_desc: "some desc↵",
var1_query: "<DATA>blah</DATA>",
prop: "1",
prop_name: "Draft",
transaction: "1",
users: "0",
table_name: "abc"},
{type: "int",
id: "111",
name: "co",
description: "",
is_bool: "0",
keyword: "<tag name="various-xml">fields</xml>",
message: "hello",
temp: "world",
settings: "",
priority: "100",
enabled: "0",
secure: "1",
var1: "post",
var1_desc: "some desc↵",
var1_query: "<DATA>blah</DATA>",
prop: "1",
prop_name: "Draft",
transaction: "1",
users: "0",
table_name: "abc"}];
But with lots more elements of course. And not just a duplicates.
Well the number of elements must be the same as the columns otherwise Datatables will look for a value not included in the data.
If you want to use a structure like the one in:
[
{type: "int",
id: "111",
name: "co",
description: "",
is_bool: "0",
keyword: "<tag name="various-xml">fields</xml>",
message: "hello",
temp: "world",
settings: "",
priority: "100",
enabled: "0",
secure: "1",
var1: "post",
var1_desc: "some desc↵",
var1_query: "<DATA>blah</DATA>",
prop: "1",
prop_name: "Draft",
transaction: "1",
users: "0",
table_name: "abc"},
{type: "int",
id: "111",
name: "co",
description: "",
is_bool: "0",
keyword: "<tag name="various-xml">fields</xml>",
message: "hello",
temp: "world",
settings: "",
priority: "100",
enabled: "0",
secure: "1",
var1: "post",
var1_desc: "some desc↵",
var1_query: "<DATA>blah</DATA>",
prop: "1",
prop_name: "Draft",
transaction: "1",
users: "0",
table_name: "abc"}];
It will be better to use "sAjaxSource" on your dataTable
When you add the aaData to your datatables normally they provide an array of arrays:
Example:
Fiddle
If your want to use a key:value JSON object you will need to add the mData property to your aoColumms config like this:
var oTable = $('#tableId').dataTable( {
"sPaginationType": "full_numbers",
"bProcessing": true,
"bDeferRender": true,
"aaData": message_json,
"aoColumns": [
{ "sTitle": "coloumn1","mData":"type"},
{ "sTitle": "coloumn2","mData":"id"},
{ "sTitle": "coloumn3","mData":"name"},
{ "sTitle": "coloumn4","mData":"description"},
{ "sTitle": "coloumn5","mData":"is_bool"},...
This will tell datatables where to find the value for that column.