I have implemented a jqgrid with grouping, but recently I found that another grouping tab is getting created for the same name(warning) when ever I insert a new record in the db.
enter image description here
I want all the records with warning to be in the same group and not in separate group tab.
datatype: "json",
contentType: 'application/json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) { return JSON.stringify(postData); },
width: gwdth - 30,
height: 580,
colNames: ['ID', 'Icon', 'Path', 'Source', 'Name', 'Severity', 'Resolution State', 'Age', 'Created Date', 'Repeat Count'],
colModel: [
{ name: 'id', hidden: true, width: 1, key: true },
{ name: 'severity', width: 20, edittype: 'image', formatter: imageIcon, align: "center" },
{ name: 'path', width: 30 },
{ name: 'source', width: 30 },
{ name: 'name', width: 30 },
{ name: 'severity', width: 30, hidden: true },
{ name: 'resolutionState', width: 30 },
{ name: 'age', width: 30 },
{ name: 'createdDate', width: 30, formatter: 'date', formatoptions: { srcformat: 'y-m-d', newformat: 'l, F d, Y' } },
{ name: 'occuranceCount', width: 30, align: "center" }
],
loadonce: true,
rowNum: 25,
rowList: [20, 30, 50],
gridview: true,
mtype: 'GET',
sortname: 'ID',
sortorder: 'desc',
viewrecords: true,
sortable: true,
pager: "#jqGridPagerA2log",
grouping: true,
groupingView: {
groupField: ['severity'],
groupColumnShow: [true],
groupText: ['<b>{0}({1})</b>'],
groupOrder: ["asc"],
groupSummary: false,
groupCollapse: true
}
});
I need to group based on severity column.
On seeing your image, and content that you have posted, I believe that by getting the data in order (order by) would solve your problem.
Related
I want to write the sums of some data under grouping and grid. I am sharing my codes, I will be glad if you help. Thank you.
var store = new Ext.data.JsonStore({
url: 'ajaxQueryData?_qid=4146',
root: 'data',
totalProperty: 'browseInfo.totalCount',
remoteSort: true,
id: 'sira_no',
sortInfo: {
field: 'sira_no',
direction: 'ASC'
},
fields: [
{
name: "sira_no",
type: "int"
},
{
name: "branch_id_qw_"
},
{
name: "firma"
},
{
name: "sevk_adres"
},
{
name: "malzeme"
},
{
name: "group_id_qw_"
},
{
name: "kategori_id_qw_"
},
{
name: "alt_kategori_id_qw_"
},
{
name: "vade"
},
{
name: "birim_tip_qw_"
},
{
name: "miktar"
},
{
name: "kg"
},
{
name: "birim_fiyat"
},
{
name: "para_birim_qw_"
},
{
name: "net_tutar"
},
{
name: "irsaliye_dt"
},
{
name: "irsaliye_no"
},
{
name: "fatura_dt"
},
{
name: "fatura_no"
},
{
name: "sehir_id_qw_"
},
{
name: "ilce_id_qw_"
},
{
name: "satis_sorumlusu_id_qw_"
}
],
pageSize: 50,
autoLoad: {
params: {
startRow: 0,
fetchCount: 50
}
}
// proxy: new Ext.data.HttpProxy({
// })
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [{
id: 'sira_no',
header: 'Sıra No',
width: 50,
sortable: true,
dataIndex: 'sira_no'
},
{
header: 'Şube',
width: 150,
sortable: true,
dataIndex: 'branch_id_qw_'
},
{
header: 'Firma',
width: 250,
sortable: true,
dataIndex: 'firma'
},
{
header: 'Sevk Adresi',
width: 150,
sortable: true,
hidden: true,
dataIndex: 'sevk_adres'
},
{
header: 'Malzeme Adı',
width: 200,
sortable: true,
hidden: true,
dataIndex: 'malzeme'
},
{
header: 'Grup',
width: 100,
sortable: true,
dataIndex: 'group_id_qw_'
},
{
header: 'Kategori',
width: 100,
sortable: true,
dataIndex: 'kategori_id_qw_'
},
{
header: 'Alt Kategori',
width: 100,
sortable: true,
dataIndex: 'alt_kategori_id_qw_'
},
{
header: 'Vade (gün)',
width: 80,
sortable: true,
dataIndex: 'vade'
},
{
header: 'Birim',
width: 50,
sortable: true,
hidden: true,
dataIndex: 'birim_tip_qw_'
},
{
header: 'Miktar',
width: 80,
sortable: true,
hidden: true,
dataIndex: 'miktar'
},
{
header: 'Kg',
width: 80,
sortable: true,
dataIndex: 'kg'
},
{
header: 'Birim Fiyat',
width: 80,
sortable: true,
dataIndex: 'birim_fiyat'
},
{
header: 'Para Birimi',
width: 50,
sortable: true,
dataIndex: 'para_birim_qw_'
},
{
header: 'Net Tutar',
width: 80,
sortable: true,
dataIndex: 'net_tutar'
},
{
header: 'İrsaliye Tarihi',
width: 100,
sortable: true,
hidden: true,
dataIndex: 'irsaliye_dt'
},
{
header: 'İrsaliye No',
width: 100,
sortable: true,
hidden: true,
dataIndex: 'irsaliye_no'
},
{
header: 'Fatura Tarihi',
width: 100,
sortable: true,
hidden: true,
dataIndex: 'fatura_dt'
},
{
header: 'Fatura No',
width: 100,
sortable: true,
hidden: true,
dataIndex: 'fatura_no'
},
{
header: 'Şehir',
width: 120,
sortable: true,
dataIndex: 'sehir_id_qw_'
},
{
header: 'İlçe',
width: 120,
sortable: true,
dataIndex: 'ilce_id_qw_'
},
{
header: 'Satış Sorumlusu',
width: 200,
sortable: true,
dataIndex: 'satis_sorumlusu_id_qw_'
}
],
viewConfig: {
forcefit: true
},
//resizable: true,
width: function() {
$("#aciklama").width();
$(document).ready(function() {
$(".slide-left").click(function() {
Width: $("#aciklama").width();
})
$(".slide-right").click(function() {
Width: $("#aciklama").width() - 334;
})
})
},
height: $("#aciklama").height(),
frame: true,
tbar: new Ext.PagingToolbar({
pageSize: 50,
store: store,
displayInfo: true
})
});
grid.render('aciklama');
I have a ColumTree Ext.us.Tree.ColumnTree, I want to hide/show a column conditionally, I used config like hidden and setVisible, but it will not work,
var tree = new Ext.ux.tree.ColumnTree({
width: 990,
height: 300,
rootVisible: false,
autoScroll: true,
title: '<s:property value="lblStockTotal"/>',
renderTo: 'tree-div',
columns: [
{
id: 'lblProduct',
header: '<s:property value="lblProduct"/>'+' -> '+'<s:property value="lblProgram"/>'+' -> ' +'<s:property value="lblCountry"/>',
dataIndex: 'Product',
width: 230
},
{
header: '<s:property value="lblTotalVolume"/>',
width: 150,
dataIndex: 'TotalVolume'
},
{
header: '<s:property value="lblTradingStock"/>',
width: 150,
dataIndex: 'TradingStock'
},
{
header: '<s:property value="lblMarketplace"/>',
width: 150,
dataIndex: 'Marketplace',
hidden:true
},
{
header: '<s:property value="lblAuction"/>',
width: 150,
dataIndex: 'Auction',
hidden:true
},
{
header: '<s:property value="lblWarehouse"/>',
width: 150,
dataIndex: 'Warehouse',
hidden:true // NOT Working
}
],
loader: new Ext.tree.TreeLoader({
dataUrl: 'stocktotaldata.action',
uiProviders: {
'col': Ext.ux.tree.ColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
text: 'Tasks'
})
});
MANUAL APPROACH
What I have Done, I split up each column into variable like col1,col2 etc and now I want to render those column using if condition , which is even not work, when I add up all those column like col1+col2+col3, that will encountered an error
masterColumn=column1+column2+column3+column4+column5+column6+colEnd;
var column1=[
{
id: 'lblProduct',
header: '<s:property value="lblProduct"/>'+' -> '+'<s:property value="lblProgram"/>'+' -> ' +'<s:property value="lblCountry"/>',
dataIndex: 'Product',
width: 230
},;
var column2=
{
header: '<s:property value="lblTotalVolume"/>',
width: 150,
dataIndex: 'TotalVolume'
},;
var column3=
{
header: '<s:property value="lblTradingStock"/>',
width: 150,
dataIndex: 'TradingStock'
};
var column4=
,{
header: '<s:property value="lblMarketplace"/>',
width: 150,
dataIndex: 'Marketplace',
hidden:true
};
var column5=
,{
header: '<s:property value="lblAuction"/>',
width: 150,
dataIndex: 'Auction',
align:'right',
hidden:true,
};
var column6=
,{
header: '<s:property value="lblWarehouse"/>',
width: 150,
dataIndex: 'Warehouse',
hidden:true
};
var colEnd=];
var tree = new Ext.ux.tree.ColumnTree({
width: 990,
height: 300,
rootVisible: false,
autoScroll: true,
title: '<s:property value="lblStockTotal"/>',
renderTo: 'tree-div',
columns: masterColumn,
loader: new Ext.tree.TreeLoader({
dataUrl: 'stocktotaldata.action',
uiProviders: {
'col': Ext.ux.tree.ColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
text: 'Tasks'
})
});
var tree = new Ext.ux.tree.ColumnTree({
width: 990,
height: 300,
rootVisible: false,
autoScroll: true,
title: '<s:property value="lblStockTotal"/>',
renderTo: 'tree-div',
columns: [
this.column1 = {
id: 'lblProduct',
header: '<s:property value="lblProduct"/>'+' -> '+'<s:property value="lblProgram"/>'+' -> ' +'<s:property value="lblCountry"/>',
dataIndex: 'Product',
width: 230
},
this.column2 = {
header: '<s:property value="lblTotalVolume"/>',
width: 150,
dataIndex: 'TotalVolume'
},
this.column3 = {
header: '<s:property value="lblTradingStock"/>',
width: 150,
dataIndex: 'TradingStock'
},
this.column4 = {
header: '<s:property value="lblMarketplace"/>',
width: 150,
dataIndex: 'Marketplace',
hidden:true
},
this.column5 = {
header: '<s:property value="lblAuction"/>',
width: 150,
dataIndex: 'Auction',
hidden:true
},
this.column6 = {
header: '<s:property value="lblWarehouse"/>',
width: 150,
dataIndex: 'Warehouse',
hidden:true // NOT Working
}
],
loader: new Ext.tree.TreeLoader({
dataUrl: 'stocktotaldata.action',
uiProviders: {
'col': Ext.ux.tree.ColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
text: 'Tasks'
})
});
we can use the reference using this, and later use this reference in the instance you have created and then can use hide and show method to hide or show.
Using Angularjs,ui-grid and uiGridExporterService exporting the data in the grid view. I'm using this export option in report functionality so when I export (PDF) need to display the filtered inputs in the PDF view.
$scope.gridOptions2 = {
enableSorting: true,
enableColumnMenus: false,
columnDefs: [
// { field: 'id', width: '60', displayName: 'S.No', cellTemplate: ''},
// { field: 'id', displayName: 'S.No', visible: false},
{ field: 'reg_id', width: '130', displayName: 'Id', enableSorting: false},
{ field: 'name', width: '160', displayName: 'Username', enableSorting: false}
],
exporterMenuCsv: false, // ADD THIS
exporterPdfDefaultStyle: {fontSize: 11},
exporterPdfTableStyle: {margin: [10, 30, 30, 30]},
exporterPdfTableHeaderStyle: {fontSize: 11, bold: true, italics: false, color: 'blue' },
exporterPdfHeader: {
margin: 20,
columns: [{
text: "Employee Salary Detail", alignment: 'center', style: 'defaultStyle',
text: "Month : "+ $scope.monthVal, alignment: 'right', style: 'defaultStyle',
width: 150
}]
},
exporterFieldCallback : function ( grid, row, col, value ) {
if ( col.name === 'status' ) {
value = decodeStatus( value );
}
return value;
},
exporterPdfFooter: function ( currentPage, pageCount ) {
return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
},
exporterPdfCustomFormatter: function ( docDefinition ) {
docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
return docDefinition;
},
exporterPdfOrientation: 'landscape',
exporterPdfPageSize:'A4', // exporterPdfMaxGridWidth = Defaults to 720 (for A4 landscape), use 670 for LETTER
exporterPdfMaxGridWidth: 600, // bug, for A4, default is 720, set to 600 solve my problem.
exporterExcelFilename: 'myFile.xlsx',
exporterExcelSheetName: 'Sheet1',
onRegisterApi: function (gridApi) {
$scope.grid2Api = gridApi;
}
};
Need to pass the selected inputs into the $scope.monthVal.
exporterPdfHeader: {
margin: 20,
columns: [{
text: "Employee Salary Detail", alignment: 'center', style: 'defaultStyle',
text: "Month : "+ $scope.monthVal, alignment: 'right', style: 'defaultStyle',
width: 150
}]
},
I want to visualize different company data in different colors against date of a line graph.
The problem is the number of companies will change.
Let's say the input data will be like
data: [{ date: '2018-12-20', company1: 10, company2: 5, },{ date: '2018-12-21', company1: 10, company2: 10 }]
To visualize it the model will be like
Ext.define('ABC.model.Job', {
extend: 'Ext.data.Model',
fields: [
{name: 'DATE', type: 'auto'}
{name: '1', type: 'int'}
{name: '2', type: 'int'}
],
proxy: {
type: 'ajax',
noCache: false,
actionMethods: {'read': 'POST'},
api: {
read: utils.createUrl('api', 'read'),
},
reader: {
type: 'json',
root: 'data'
},
listeners: {
exception: function(proxy, response, operation) {
App.showHttpError('Job ', response);
}
}
}
});
And the view portion of axes will be
Ext.define('ABC.view.Job', {
extend: 'Ext.container.Container',
requires: [
'ABC.store.Job',
],
border: false,
layout: {type:'vbox', pack:'start', align:'stretch'},
initComponent: function() {
var me = this;
me.jobStore2 = Ext.create('ABC.store.Job');
Ext.apply(me, {
items: [
{
xtype: 'chart',
store: me.jobStore2,
style: 'background: #fff',
insetPadding: 40,
animate: true,
shadow: false,
flex: 2,
minHeight: 400,
legend: {
position: 'top',
boxStrokeWidth: 0,
labelFont: '12px Helvetica'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['1'],
grid: true,
minimum: 0,
}, {
type: 'Category',
position: 'bottom',
fields: ['DATE'],
grid: true,
}],
series: [{
type: 'line',
axis: 'left',
title: '1',
xField: 'DATE',
yField: '1',
style: {
'stroke-width': 4
},
},
{
type: 'line',
axis: 'left',
xField: 'DATE',
border: false,
flex:1,
title: ['2'],
yField: ['2'],
style: {
'stroke-width': 4
},
}
]
}
});
me.callParent(arguments);
}
});
What if the data contains lots of companies. How can I change the series? Instead of giving the detail of y axis again and again
For ease of maintenance, you can just create an array containing the company names, and map it into both fields and axes:
var companies = ['company1', 'company2', ...];
Ext.create('Ext.data.Store', {
fields: [{
name: 'DATE',
type: 'auto'
}].concat(
companies.map(function(companyName) {
return {
name: companyName,
type: 'int'
};
})
)
});
...
series: companies.map(function(companyName) {
return {
type: 'line',
axis: 'left',
title: '1',
xField: 'DATE',
yField: companyName,
style: {
'stroke-width': 4
},
}
});
...
How can use HTML tags in a chart legend while using title to apply custom legend text?
If we apply something like this title:['Your<b>New</b><br />Label'] the tags are just written as plain text.
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data', 'data2'],
data: [{
'name': 'metric one',
'data': 10,
'data2': 2
}, {
'name': 'metric two',
'data': 27,
'data2': 5
}]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data', 'data2'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
stacked: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: ['data', 'data2'],
title: ['Your<b>New</b><br />Label']
}]
});
}
});