Filling the Total Column with jqxgrid Multiplication - jqxgrid

Filling the Total Column with the jqxgrid Multiplier.
Hi there;
I want to multiply ItemQty and SinglePrice columns and write to TotalPrice column.
How can I do that.
I tried to use the code in this link but it didn't work.
The other columns show the data in the database.
var initFBListGrid=function(){
source =
{
dataType: 'json',
datafields: [
{ name: 'Id' },
{ name: 'OrderNumber' },
{ name: 'LineNumber' },
{ name: 'ItemNumber' },
{ name: 'ItemDescription' },
{ name: 'ItemQty' },
{ name: 'SinglePrice' },
{ name: 'Ixitem' },
{ name: 'IsUrgentHTML' },
{ name: 'StatusHTML' },
{ name: 'IsApproved' },
{ name: 'IsRejected' },
{ name: 'LatestPurchasePrice' },
{ name: 'PriceLevel' },
{ name: 'DeliveryDate' },
{ name: 'SupplierID' },
{ name: 'SupplierName' },
{ name: 'ProjectNumber' },
{ name: 'ProjectName' },
{ name: 'BuyerName' },
{ name: 'PendingApproverName' },
{ name: 'Company' },
{ name: 'Currency' },
{ name: 'HasAttachmentHTML' },
{ name: 'Glco' },
{ name: 'RequesterName' },
{ name: 'ApproverName' },
{
name: 'TotalPrice',
formatter: function (cellvalue, options, rowObject) {
var ItemQty = parseInt(rowObject.ItemQty, 10),
SinglePrice = parseInt(rowObject.SinglePrice,10);
return $.fmatter.util.NumberFormat(ItemQty * SinglePrice, $.jgrid.formatter.currency);
}
}
],
id: 'Id'
};

Related

Rswag nested attributes syntax

i have a project in which i have to write nested attribute in rswag
{
"question_bank": {
"question_exams_attributes": {
"0": {
"question_bank_id": "",
"exam_id": "12",
"sub_category_id": "23",
"_destroy": "false"
}
},
"question_type": "Single best answer",
"difficulty": "easy",
"status": "active",
"tag_list": [
""
],
"question": "testing api 2"
},
"commit": "Submit"
}
i am trying to write this json body in nested attribute syntax in rswag:
i have tried this:
parameter name: :question_bank, in: :body, schema: {
type: :object,
properties: {
question_exams_attributes: {
type: :object,
properties: {
'0': {
properties: {
question_bank_id: { type: :string },
exam_id: { type: :string },
sub_category_id: { type: :string }
}
}
}
}
}
}
I faced a similar issue too.
Here is how I solved it.
schema type: :object,
properties: {
title: { type: :string },
content: { type: :string },
comments: {
type: :array,
items: {
type: :object,
properties: {
content: { type: :string }
}
}
}
}
In your case I think you're missing the type on the "0" element.
properties: {
question_exams_attributes: {
type: :object,
properties: {
'0': {
type: :object,
properties: {
question_bank_id: { type: :string },
exam_id: { type: :string },
sub_category_id: { type: :string }
}
}
}
}
}

Highstock Range Selector Buttons to PDF Export Dropdown

I have been able to convert my range selector buttons in to a dropdown rather than displaying as a list. And seperately, adding the export to PDF/Image dropdown.
What i am now trying to achieve is integrate the range selector dropdown buttons in to the same dropdown as the Export, or vice versa.
Export:
exporting: {
enabled: true,
allowHtml: true,
accessibility: {
enabled: true,
},
buttons: {
contextButtons: {
enabled: true
}
}
}
Range selector:
exporting: {
buttons: {
contextButton: {
enabled: false
},
toggle: {
text: 'Select range',
align: 'left',
height: 20,
y: -3,
theme: {
'stroke-width': 0.5,
stroke: '#000000',
r: 2
},
menuItems: [{
text: '1M',
onclick: function() {
this.rangeSelector.clickButton(0, true);
}
}, {
text: '3M',
onclick: function() {
this.rangeSelector.clickButton(1, true);
}
}, {
text: '6M',
onclick: function() {
this.rangeSelector.clickButton(2, true);
}
}, {
text: 'YTD',
onclick: function() {
this.rangeSelector.clickButton(3, true);
}
}, {
text: '1Y',
onclick: function() {
this.rangeSelector.clickButton(4, true);
}
}, {
text: 'All',
onclick: function() {
this.rangeSelector.clickButton(5, true);
}
}]
}
}
},
Example:
http://jsfiddle.net/8rrotg5a/
Add default items to menuItems array:
exporting: {
buttons: {
contextButton: {
enabled: false
},
toggle: {
...,
menuItems: [..., {
text: 'All',
onclick: function() {
this.rangeSelector.clickButton(5, true);
}
},
'separator',
'viewFullscreen',
'printChart',
'separator',
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG'
]
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/j7s8xgtr/
API Reference: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems

how to get all data without paging in jqGrid

I work with jqGrid 4.6.0, ASP.Net MVC5, anything well don. But i have one problem bellow.
When i remove paging from page. I want load all data for jqGrid without paging. But data has just only displayed 20 record in jqGrid page. Although return data from server 36 record.
My JQGrid:
var Pattern_Grid = $("#Pattern_Grid");
Pattern_Grid.jqGrid({
datatype: "json",
height: 250,
shrinkToFit: false,
width: null,
rownumbers: true,
multiselect: true,
pgbuttons: false,
viewrecords: false,
pgtext: "",
pginput: false,
//==========================================
url: "/CusURL/GetBom",
caption: "Patterns Linking",
postData: {
styleCode: styleCode, size: styleSize, serial: styleColorSerial, revNo: revNo
},
//mtype: 'POST',
colModel: [
{
name: "MainItemCode", index: "MainItemCode",
label: arrPatternCollName.MainItemCode,
search: false, sort: false
},
{
name: "ItemCode", index: "ItemCode",
label: arrPatternCollName.ItemCode,
search: false, sort: false
},
{
name: "ItemName", index: "ItemName",
label: arrPatternCollName.ItemName,
search: false, sort: false
},
{
name: "ItemColorWays", index: "ItemColorWays",
label: arrPatternCollName.MainItemColorSerial
},
{ name: "StyleColorSerial", index: "StyleColorSerial", hidden: false },
{ name: "UnitConSumTion", index: "UnitConSumTion", hidden: false },
{ name: "Consumpunit", index: "Consumpunit", hidden: false },
{ name: "Qty", index: "Qty", hidden: false },
{ name: "CurrCode", index: "CurrCode", hidden: false },
{ name: "RegistryDate", index: "RegistryDate", hidden: false },
{ name: "StyleCode", index: "StyleCode", hidden: true },
{ name: "StyleSize", index: "StyleSize", hidden: true },
{ name: "ItemColorSerial", index: "ItemColorSerial", hidden: true },
{ name: "RevNo", index: "RevNo", hidden: true },
{ name: "MainItemColorSerial", index: "MainItemColorSerial", hidden: true },
{ name: "PatternCode", index: "PatternCode", hidden: true }
});
My data return more than 36 record data has just only displays 20 record in jqGrid page:
url: "/CusURL/GetBom",
public JsonResult GetBom(string styleCode, string styleSize, string styleColorSerial, string revNo)
{
try
{
var bom = _bom.GetBom(styleCode, styleSize, styleColorSerial, revNo);
return Json(bom.ToArray(), JsonRequestBehavior.AllowGet);
}
catch
{
return Json(new List<Bomt>().ToArray(), JsonRequestBehavior.AllowGet);
}
}
Is it possible to to display all data in jqGrid without paging?
rowNum default value is set to 20
you can set rowNum = 10000 or use 'jsonp' result for load all of datas with lazy load.

Set file type dynamically when click on exporting menu in highcharts using chart.exportChart function

I want to set filetype according to click on export menu on the right in the given url. For example if click on pdf then filetype should be set as application/pdf.
var defaultTitle = "Kalar";
var drilldownTitle = "";
var ydrillupTitle = "# of Kalar";
var ydrilldownTitle = "";
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'upendra',
events: {
drilldown: function(e) {
chart.setTitle({ text: drilldownTitle + e.point.title });
chart.yAxis[0].axisTitle.attr({
text: ydrilldownTitle
});
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle });
chart.yAxis[0].axisTitle.attr({
text: ydrillupTitle
});
},
click: function(e) {
chart.exportChart({
filename: chart.options.title.text
});
}
}
},
title: {
text: defaultTitle
},
subtitle: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
categories: ['one', 'two']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: ydrillupTitle
}
},
plotOptions: {
column: {
stacking: 'normal',
showInLegend: true
}
},
series:[
{
name:'A',
color:'#E9ECEE',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Bookings (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "A",
title: "A by Company",
x:0, y:2
}, {
name: "",
x:1, y:0
}
]
},
{
name:'Arrived',
color:'#B3E5C4',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Bookings (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "Arrived",
title: "Planned Bookings by Goods Type",
x:0, y:10
}, {
name: "",
x:1, y:0
}
]
},
{
name:'Unscheduled',
color:'#A9ABAD',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Deliveries (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "",
x:0, y:0
},
{
name: "Unscheduled",
title: "Unscheduled Deliveries by Company",
x:1, y:8
}
]
},
{
name:'Rejected',
color:'#FF838F',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Deliveries (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "",
x:0, y:0
},
{
name: "Rejected",
title: "Rejected Deliveries Reasons",
x:1, y:7
}
]
},
{
name:'Complete',
color:'#B3E5C4',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Deliveries (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "",
x:0, y:0
},
{
name: "Complete",
title: "Actual Deliveries by Goods Type",
x:1, y:6
}
]
}
]
});
});
You can edit menuItems in exporting options and then set filename, extracting that information from title.
exporting: {
buttons: {
contextButton: {
menuItems: [{
textKey: 'printChart',
onclick: function () {
this.print();
}
}, {
separator: true
}, {
textKey: 'downloadPNG',
onclick: function () {
var title = this.title.textStr;
this.exportChart({
type: 'image/png',
filename: title
});
}
}, {
textKey: 'downloadJPEG',
onclick: function () {
var title = this.title.textStr;
this.exportChart({
type: 'image/jpeg',
filename: title
});
}
}, {
textKey: 'downloadPDF',
onclick: function () {
var title = this.title.textStr;
this.exportChart({
type: 'application/pdf',
filename: title
});
}
}, {
textKey: 'downloadSVG',
onclick: function () {
var title = this.title.textStr;
this.exportChart({
type: 'image/svg+xml',
filename: title
});
}
}]
}
}
},
Example: http://jsfiddle.net/bmp6Leh5/4/

Highcharts - Can a column chart drill down to a bar chart?

I have a project where the data in the main chart is best represented as a column chart and the data in a drilldown should be a bar chart.
However when I try to drilldown, the drilldown is still a column chart even with the type set to bar.
Is this possible to do with the provided Highcharts drilldown API? I would like to have the "back" button and support multiple drilldown levels.
Here is a basic example that demonstrates the problem:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
type: 'bar',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
type: 'bar',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
type: 'bar',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
})
});
Here is a JSFIDDLE
http://jsfiddle.net/N2g98/
EDIT: This seems like it could be considered a bug in Highcharts as it is more of a problem than just drilling down from a column to a bar chart. If you start with a bar graph and drill down to a line graph, the axes are messed up in the drilldown.
EDIT2: Here is the solution I ended up with
$(function () {
(function (H) {
H.wrap(H.Point.prototype, 'init', function (proceed, series, options, x) {
var point = proceed.call(this, series, options, x),
chart = series.chart,
tick = series.xAxis && series.xAxis.ticks[x],
tickLabel = tick && tick.label;
if (point.drilldown) {
if (tickLabel) {
if (!tickLabel._basicStyle) {
tickLabel._basicStyle = tickLabel.element.getAttribute('style');
}
tickLabel.addClass('highcharts-drilldown-axis-label').css({
'text-decoration': 'none',
'font-weight': 'normal',
'cursor': 'auto'
}).on('click', function () {
if (point.doDrilldown) {
return false;
}
});
}
}
return point;
});
H.wrap(H.Pointer.prototype, 'setDOMEvents', function (proceed) {
proceed.call(this);
var pointer = this,
container = pointer.chart.container;
container.onclick = function (e) {
if (typeof pointer.onContainerClick === 'function') {
pointer.onContainerClick(e);
}
};
});
H.wrap(H.Chart.prototype, 'drillUp', function (proceed) {
if (!this.customDrilldown) {
proceed.call(this);
} else {
var userOptions = this.userOptions;
var drilldownLevels = this.drilldownLevels;
var level = drilldownLevels.pop();
var newChartConfig = level.userOptions;
this.destroy();
$(userOptions.chart.renderTo).highcharts(newChartConfig);
var newChart = $(userOptions.chart.renderTo).highcharts();
newChart.drilldownLevels = drilldownLevels;
if (drilldownLevels.length !== 0) {
newChart.showDrillUpButton();
}
newChart.customDrilldown = true;
HighchartsAdapter.fireEvent(newChart, 'drillup', {
seriesOptions: newChartConfig
});
}
});
H.wrap(H.Point.prototype, 'doDrilldown', function (proceed, _holdRedraw) {
if (!$.isPlainObject(this.drilldown)) {
proceed.call(this, _holdRedraw);
} else {
var newChartConfig = this.drilldown;
var oldChart = this.series.chart;
var userOptions = oldChart.userOptions;
var drilldownLevels = oldChart.drilldownLevels;
if (!drilldownLevels) {
drilldownLevels = [];
}
var oldSeries = this.series;
var level = {
userOptions: userOptions,
seriesOptions: oldSeries.userOptions
};
drilldownLevels.push(level);
oldChart.destroy();
$(userOptions.chart.renderTo).highcharts(newChartConfig);
var newChart = $(userOptions.chart.renderTo).highcharts();
newChart.drilldownLevels = drilldownLevels;
newChart.showDrillUpButton();
newChart.customDrilldown = true;
HighchartsAdapter.fireEvent(newChart, 'drilldown', {
point: this,
seriesOptions: newChartConfig
});
}
});
}(Highcharts));
var pieDD1 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 5
}, {
name: 'Blue',
y: 25
}]
}]
};
var pieDD2 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 15
}, {
name: 'Blue',
y: 25
}]
}]
};
var pieDD3 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 3
}, {
name: 'Blue',
y: 5
}]
}]
};
var pieDD4 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 50
}, {
name: 'Blue',
y: 3
}]
}]
};
var pieDD5 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 13
}, {
name: 'Blue',
y: 11
}]
}]
};
var pieDD6 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 50
}, {
name: 'Blue',
y: 25
}]
}]
};
var pieDD7 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 5
}, {
name: 'Blue',
y: 5
}]
}]
};
var pieDD8 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 15
}, {
name: 'Blue',
y: 5
}]
}]
};
var pieDD9 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 4
}, {
name: 'Blue',
y: 8
}]
}]
};
var pieDD10 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 33
}, {
name: 'Blue',
y: 66
}]
}]
};
var pieDD11 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 9
}, {
name: 'Blue',
y: 1
}]
}]
};
var pieDD12 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 8
}, {
name: 'Blue',
y: 13
}]
}]
};
var pieDD13 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 70
}, {
name: 'Blue',
y: 25
}]
}]
};
var pieDD14 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 50
}, {
name: 'Blue',
y: 10
}]
}]
};
var pieDD15 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 8
}, {
name: 'Blue',
y: 5
}]
}]
};
var pieDD16 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 5
}, {
name: 'Blue',
y: 8
}]
}]
};
var drilldown = {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
type: 'category',
title: {
text: 'X Axis'
}
},
yAxis: {
title: {
text: 'Y Axis'
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Widget A',
data: [{
name: 'Qtr 1',
y: 5,
drilldown: pieDD1
}, {
name: 'Qtr 2',
y: 25,
drilldown: pieDD2
}, {
name: 'Qtr 3',
y: 25,
drilldown: pieDD3
}, {
name: 'Qtr 4',
y: 20,
drilldown: pieDD4
}]
}, {
name: 'Widget B',
data: [{
name: 'Qtr 1',
y: 25,
drilldown: pieDD5
}, {
name: 'Qtr 2',
y: 5,
drilldown: pieDD6
}, {
name: 'Qtr 3',
y: 5,
drilldown: pieDD7
}, {
name: 'Qtr 4',
y: 15,
drilldown: pieDD8
}]
}]
};
var drilldown2 = {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'subtitle2'
},
xAxis: {
type: 'category',
title: {
text: 'X Axis'
}
},
yAxis: {
title: {
text: 'Y Axis'
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Widget A',
data: [{
name: 'Qtr 1',
y: 15,
drilldown: pieDD9
}, {
name: 'Qtr 2',
y: 15,
drilldown: pieDD10
}, {
name: 'Qtr 3',
y: 30,
drilldown: pieDD11
}, {
name: 'Qtr 4',
y: 5,
drilldown: pieDD12
}]
}, {
name: 'Widget B',
data: [{
name: 'Qtr 1',
y: 5,
drilldown: pieDD13
}, {
name: 'Qtr 2',
y: 25,
drilldown: pieDD14
}, {
name: 'Qtr 3',
y: 10,
drilldown: pieDD15
}, {
name: 'Qtr 4',
y: 20,
drilldown: pieDD16
}]
}]
};
// Create the chart
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Yearly Orders',
data: [{
name: 'Location 1',
y: 100,
drilldown: drilldown
}, {
name: 'Location 2',
y: 150,
drilldown: drilldown2
}]
}]
});
});
http://jsfiddle.net/skTHx/22/

Resources