Develop Reference

Save slickgrid cell autocomplete value

I have a slickgrid cell with an autocompletion and a custom formatter. The cell value is a key field of dynamically loading autocompletion list. The list is shown as labels (e.g. Contract: ABCDEF-123, thick:10, width:210, City: Chicago) and when I select one it appears in the according input field. The point is that the formatter does not know that label, it only knows the key (order_id).
function contractFormatter(row, cell, value, columnDef, dataContext) {
var res = '';
var val = get_contract_list()[value] ? get_contract_list()[value]['label'] : '';
res = '<span class="' + getSpanClass() + '" style="float: left;"></span>\n\
'+ (val =='' ? '<span style="color:slategrey;"> Enter 3 symbols </span>' + val : val) + '';
return res;
}
The function get_contract_list returns the whole list of contracts and it is very big, so it was decided to make that list dynamic. So the function is empty now and it would be nice just to take the selected label into val.
Is there any way to achieve it?

You have to remember that Formatters are synchronous and it must return right away in a string format, if it requires a lot of processing power while staying synchronous then you'll end up slowing down your grid. You should probably cache your list once in a separate variable and use it afterward instead of reloading the list every time. If you load something that takes time and is asynchronous (a delayed output) then you'll want to look up the asyncPostRenderer (you can see this Example)
So going back to displaying the associated key to a label, I've done something similar in my lib in this Example and a live demo here, in my use case the value is a key index and I use the complexityLevelList to find its associated object which I can then read its label to display in the formatter.
export class MyExample {
complexityLevelList = [
{ value: 0, label: 'Very Simple' },
{ value: 1, label: 'Simple' },
{ value: 2, label: 'Straightforward' },
{ value: 3, label: 'Complex' },
{ value: 4, label: 'Very Complex' },
];
prepareGrid() {
this.columnDefinitions = [
{
id: 'complexity', name: 'Complexity', field: 'complexity', minWidth: 100,
formatter: (_row, _cell, value) => this.complexityLevelList[value].label,
filter: {
model: Filters.multipleSelect,
collection: this.complexityLevelList
},
editor: {
model: Editors.singleSelect,
collection: this.complexityLevelList,
massUpdate: true
},
},
];
}
}
Note that the Filters & Editors are specific to my lib Slickgrid-Universal, but you should get the idea on how to refactor your code to make it work.

Using subgrid on jqGrid with data from parent row

I have a jqGrid displaying data in groups; there are too many columns to view conveniently, so I want to put less important data in a subgrid. There will only ever be one row in any subgrid. The data for the subgrid row will be obtained at the same time as the data in the parent row; I would like to use the subGridRowExpanded callback to obtain the data from the parent row and put it in the subgrid row when the user expands the row to see the subgrid.
Separately from what is shown here, I have tried using subGridModel to specify the name of the subgrid, but in that case and for the code shown, subGridRowExpanded is not invoked and I don't know why.
$(document).ready(function() {
$(".aclSection").show();
setListGrid();
function setListGrid() {
console.log("entering setListGrid() in opportunitySalesFunnelList.js");
$("#listGrid").jqGrid(getGridSettings());
$("#listGrid").jqGrid('navGrid', '#funnelOpportunityListPager',
{ cloneToTop:true,refreshtitle: "Reload Grid",
refreshtext: "Refresh Grid",
refreshstate:"current",
refresh: false,edit:false, add:false, del:false, search:false
}
);
$(window).bind('resize', function() {
jQuery("#grid").setGridWidth($('.gridParent').width()-30, true);
}).trigger('resize');
}
function getGridSettings() {
return {
url: "/salespoint/secure/funnel/opportunity/list/getDataMap"
,datatype: "json"
,height: "auto"
,width: 950
,shrinkToFit: true
,loadtext: "Loading..."
,colNames: ["Sales Mgr"
,"Agency / Spersn"
,"Sales Code"
,"Pros Name"
,"Prob"
,"Opp ID"
,"Opp Name"
,"Stg/Sts"
,"3 YR MRC"
,"3 YR NRC"
,"Last Activity"
,"Notes"
]
,colModel:[
{name:"salesManager", index:"salesManager" }
,{name:"agencyOrSalesperson", index:"agencyOrSalesperson" }
,{name:"salesCode", index:"salesCode" }
,{name:"prospectName", index:"prospectName" ,align:'left'}
,{name:"probability", index:"probability" }
,{name:"opportunityId", index:"opportunityId" }
,{name:"opportunityName", index:"opportunityName" ,align:'left'}
,{name:"stageAndStatus", index:"stageAndStatus" }
,{name:"mrc3yr", index:"mrc3yr" ,align:'right' , summaryType:'sum', summaryRound: 2, summaryRoundType: 'fixed' }
,{name:"nrc3yr", index:"nrc3yr" ,align:'right' , summaryType:'sum', summaryRound: 2, summaryRoundType: 'fixed' }
,{name:"lastActivity", index:"lastActivity" ,align:'left' }
,{name:"noteCount", index:"noteCount" }
]
,gridview: true
,subGrid: true
,subGridRowExpanded: function(subgrid_id, rowId1) {
console.log("subGridRowExpanded, subGridDivId1/rowId1:" + subGridDivId1 + "/" + rowId1);
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t";
var listGrid = $("#" + subgrid_id);
listGrid.html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
listGrid.jqGrid({
colNames: ["Pros ID","Pros Age","Opp Age","Location Count by Service","# Locs","Activity Date","Activity Created By"]
,colModel: [ {name:"prospectId", index:"prospectId" }
,{name:"prospectAge", index:"prospectAge" }
,{name:"opportunityAge", index:"opportunityAge" }
,{name:"locationServiceCount",index:"locationServiceCount" ,align:'left' }
,{name:"numberOfLocations", index:"numberOfLocations" }
,{name:"activityDate", index:"activityDate" }
,{name:"activityCreatedBy", index:"activityCreatedBy" }
]
,rowNum: 1
,height: '100%'
})
var rowData = $(this).getRowData(rowId1);
}
,grouping:true
,groupingView:
{
groupField: ["salesManager"]
,groupColumnShow: [true]
,groupText: ["<b>{0}</b>"]
,groupOrder: ["asc"]
,groupSummary: [true] // will use the "summaryTpl" property of the respective column
,groupCollapse: false
,groupDataSorted: true
,formatDisplayField: [function(curValue, srcValue, colModelOption, grpIndex, grpObject) {
return srcValue.toFixed(2);
}]
}
,footerrow:true
,userDataOnFooter:true
,rowNum: 20
,rowList:[20,50,100,100000000]
,rowTotal:4000
,loadonce:true
,ignoreCase:true
,viewRecords:true
,onPaging:function(pgButton) {
var rowNum = $("#listGrid").getGridParam("rowNum");
$.cookie("userOptions_prospectListPagingSize", rowNum);
}
,gridComplete:function(id) {
$("#listGrid").setGridWidth($('.gridParent').width(), true);
$("#listGrid").trigger("resize", [{page:1}]);
}
,emptyrecords: '<span class="jqGridHighlight">No records found</span>'
,pager : '#funnelOpportunityListPager'
};
}
});
When I click on the plus icon (which does appear), nothing visible happens, and a breakpoint set at the first line of code in subGridRowExpanded is not hit. Why doesn't it get invoked, and do I have the rest of the setup right for displaying the data?
edit after Oleg's answer:
Version is the 4.7 trirand version before the free/commercial forks. I'm sorry I didn't put this in originally, I was sort of continuing a previous question, but I should have included it.
Yes, data is sorted on salesManager when it is returned from the server. As I said, the grouping is working; it is the subgrid that is not working.
As I also said, rowNum of 1 is accurate, there is only ever one subrow of the main row. The purpose here is to display more columns about the same index. subgrid is useful when there are children of the row, but in my case there is only ever one child. I'm happy to make the number larger, but that is the largest (and smallest) number of rows for which there are data in my case.
I have tried to correct subGridRowExpanded with your suggestions, this is what it looks like now:
,subGridRowExpanded: function (subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
parentRowData = $(this).jqGrid("getLocalRow", rowid),
// the next line can be used if parent grid doesn't contain local data
//parentRowData = $(this).jqGrid("getRowData", rowid),
$subgridDataDiv = $("#" + subgridDivId);
$subgridDataDiv.append($subgrid); // place subgrid table on the page
// create subgrid
$subgrid.jqGrid({
colNames: ["Pros ID","Pros Age","Opp Age","Location Count by Service","# Locs","Activity Date","Activity Created By"]
,colModel: [ {name:"prospectId", }
,{name:"prospectAge" }
,{name:"opportunityAge" }
,{name:"locationServiceCount", align:'left' }
,{name:"numberOfLocations" }
,{name:"activityDate" }
,{name:"activityCreatedBy" }
]
,rowNum: 1
,height: '100%'
});
}
There is a commented out line you say can be used "if parent grid doesn't contain local data", but my parent grid does contain the data for the subgrid, so I thought the line should remain commented. The JSON for the grid data looks like this:
{
"userdata": {
"nrc3yr": "2705545.00",
"mrc3yr": "2798103.26"
},
"records": "4",
"rows": [{
"prospectName": "Big Daddy Daycare",
"opportunityName": "Opp2018-06-22",
"nrc3yr": "295.00",
"salesCode": "CMR",
"probability": "50%",
"noteCount": 0,
"subgrid": [{
"prospectId": 309,
"prospectAge": "2",
"activityDate": "06-22-2018",
"opportunityAge": 2,
"numberOfLocations": 1,
"locationServiceCount": "Cable (1), IP Hosted (1)",
"activityCreatedBy": "rcook"
}],
"agencyOrSalesperson": "CMR",
"opportunityId": 696,
"salesManager": "CMR",
"stageAndStatus": "Draft\/Create",
"mrc3yr": "223.01",
"lastActivity": "Opportunity (696) created (Opp2018-06-22)"
},
{
"prospectName": "Wine Not",
"opportunityName": "Opp20180410-1051",
"nrc3yr": "0.00",
"salesCode": "ADV004",
"probability": "50%",
"noteCount": 17,
"subgrid": [{
"prospectId": 297,
"prospectAge": "89",
"activityDate": "06-07-2018",
"opportunityAge": 75,
"numberOfLocations": 1,
"locationServiceCount": "EoC Symmetric (1)",
"activityCreatedBy": "rcook"
}],
"agencyOrSalesperson": "ADV",
"opportunityId": 682,
"salesManager": "JWE",
"stageAndStatus": "Proposal\/In Progress",
"mrc3yr": "312.60",
"lastActivity": "Proposal (1,099) published (Prop20180607-1642)"
},
{
"prospectName": "Ever Lovin' Lovin",
"opportunityName": "Opp20180531-1943",
"nrc3yr": "0.00",
"salesCode": "RTB",
"probability": "50%",
"noteCount": 0,
"subgrid": [{
"prospectId": 307,
"prospectAge": "24",
"activityDate": "05-31-2018",
"opportunityAge": 24,
"numberOfLocations": 1,
"locationServiceCount": "EoC Asymmetric (1)",
"activityCreatedBy": "rcook"
}],
"agencyOrSalesperson": "RTB",
"opportunityId": 690,
"salesManager": "RTB",
"stageAndStatus": "Proposal\/Complete",
"mrc3yr": "129.95",
"lastActivity": "Proposal (1,098) published (Prop20180531-1947)"
},
{
"prospectName": "mothra",
"opportunityName": "big",
"nrc3yr": "2705250.00",
"salesCode": "RTB",
"probability": "50%",
"noteCount": 0,
"subgrid": [{
"prospectId": 280,
"prospectAge": "153",
"activityDate": "06-12-2018",
"opportunityAge": 13,
"numberOfLocations": 501,
"locationServiceCount": "Dedicated (501), EoF Symmetric (500), POTS (500)",
"activityCreatedBy": "alexdev"
}],
"agencyOrSalesperson": "RTB",
"opportunityId": 691,
"salesManager": "RTB",
"stageAndStatus": "Proposal\/Complete",
"mrc3yr": "2797437.70",
"lastActivity": "Proposal (1,106) published (big prop 7)"
}]
}
The biggest problem I face at the moment, however, is that the function for subGridRowExpanded is never called. I have put a breakpoint and a console.log() call at the beginning of the routine, and the breakpoint is not hit and the console.log() message does not appear. It is like something is wrong with the setup for calling subGridRowExpanded, and I don't know what it is.
--
Further info -- if I comment out the grouping configuration, then clicking on the plus sign does invoke the subGridRowExpanded function. Is it possible that, in 4.7 jqGrid, one cannot use both grouping and subgrid in the same grid? The expansion only shows the new column headers, none of the data, I'm trying to figure out now why that would be. If there's a way to use both these features in the same grid, I'd like to know about it

The current code of subGridRowExpanded is wrong. On click on subgrid icon (typically "+") jqGrid add row below the current row with div covering the most columns. The id of the div will be forwarded to subGridRowExpanded as the first parameter. By the code var listGrid = $("#" + subgrid_id); you get jQuery wrapper on the div and you call listGrid.jqGrid({...}) on the div. On the other side jqGrid can be created only on <table> element. You can fix the code by adding .children("table") (I mean the usage listGrid.children("table").jqGrid({...})) or using the template like
subGridRowExpanded: function (subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
parentRowData = $(this).jqGrid("getLocalRow", rowid),
// the next line can be used if parent grid doesn't contain local data
//parentRowData = $(this).jqGrid("getRowData", rowid),
$subgridDataDiv = $("#" + subgridDivId);
$subgridDataDiv.append($subgrid); // place subgrid table on the page
// create subgrid
$subgrid.jqGrid({
// ...
});
}

unable to see output as expected when using forEach logic in js file

My requirement is to display the bar graph.I'm using angularjs and Zingchart to display the bar. Belowis the javascript code which gets invoked to generate the bar. I'm facing issue in iterating the logic(angular.forEach..) in the below mentioned code.
My alert statement inside angular.forEach is displayed 3 times, but on the UI i can only see one bar displayed(i.e.,bar with final data is displayed, first two bars are not getting displayed).
I know i'm missing something which draws each and every bar instead of the last displayed bar. Do i need to use any push statemetns. Please advice.
app.controller('myController',['$rootScope','$scope','$uibModal','myService',function($rootScope,$scope,$uibModal,myService) {
$scope.chart = {};
$scope.chart.options = {
"isStacked": "true",
axisFontSize : 10,
chartArea: {left:0, width: 400,}
};
$scope.chart.type = "bar";
$scope.chart.cssStyle = "height:300px; width:650px;";
$scope.loadChartData = function(){
alert("Chart data loading");
MyService.getChartData($rootScope.myID).then(
function(response) {
$scope.myJson=response;
angular.forEach($scope.myJson,function(value,key){
alert("in foreach"); //displaying 3 times
sub = value.myResults.sub;
spread = value.myResults.spread;
active =value.myResults.active;
$scope.data = {};
$scope.data.valuesOne = [sub];
$scope.data.valuesTwo = [spread];
$scope.data.valuesThree = [active];
$scope.aValues = [$scope.data.valuesOne,$scope.data.valuesTwo,$scope.data.valuesThree];
$scope.myJson = {
type : "bar",
"background-color": "white",
"plot": {
"stacked": true,
"stack-type":"normal"
},
title:{
backgroundColor : "transparent",
fontColor :"black",
text : "Hello world"
},
backgroundColor : "white",
series : [
{
backgroundColor : '#00baf2'
},
{
backgroundColor : '#4caf4f'
}
]
};
});
},
function(errResponse){
console.error('Error while data retrieval');
});
}
}]);
html code:
<div ng-controller="myController">
<div zingchart id="chart-2" zc-json="myJson" zc-width="700px" zc-height="568px" zc-values="aValues"></div>
</div>
With the above mentioned js code i should see 3 bars on the UI, i could able to view only one bar.Please suggest.

You need to call foreach on the data, rather than the whole chart. Like this:
...
function(response) {
$scope.myJson = {
type: "bar",
"background-color": "white",
"plot": {
"stacked": true,
"stack-type": "normal"
},
title: {
backgroundColor: "transparent",
fontColor: "black",
text: "Hello world"
},
backgroundColor: "white",
series: [
{
backgroundColor: '#00baf2'
},
{
backgroundColor: '#4caf4f'
}
]
};
var subs = []
var spreads = []
var actives = []
$scope.aValues = [subs, spreads, actives]
angular.forEach(response, function (value, key) {
subs.push(value.myResults.sub)
spreads.push(value.myResults.spreads)
actives.push(value.myResults.active)
});
},
function(errResponse) {
console.error('Error while data retrieval');
});
...

There are a few things I have to add:
1. Zingchart Syntax
Did you already have a look at these docs: https://www.zingchart.com/docs/chart-types/bar-charts/
It says, the bar chart needs a series object as input with the following structure:
"series": [
{"values":[20,40,25,50,15,45,33,34]},
{"values":[5,30,21,18,59,50,28,33]},
{"values":[30,5,18,21,33,41,29,15]}
]
Is it a must to feed the chart from HTML? Otherwise you just could copy the JS example from the link above.
IMHO this is much cleaner, as you do not push that much data in the scope.
2. Overwriting myJson
Something looks a little wrong with the forEach loop.
There is a angular.forEach that should iterate over the array $scope.myJson. But inside the iterator function, $scope.myJson gets overwrtitten by an object.
3. ng-repeat
ng-repeat will only repeat the chart tag. You need to pass several series to the directive.

ZingChart X-axis labels showing as numbers instead of strings

I am using the ZingChart library to graph results from an API call. When I pass in a normal array for the "values" field of the chart data object, everything works fine. However, when I pass in an array made from Object.keys(titleSet) (where titleSet is a normal Javascript object), the graph displays as follows:
Example Chart
As you can see, the x-axis is now labeled with numbers instead of the array of strings. But when I print out the the result of Object.keys(titleSet) vs. passing in a normal array, they both appear to be the same in the console. Can anyone help me figure out what I'm doing wrong?
//List of movies inputted by the user
var movieList = [];
var movieSet = {};
var IMDBData = {
"values": [],
"text": "IMDB",
};
var metascoreData = {
"values": [],
"text": "Metascore"
};
var RTMData = {
"values": [],
"text": "Rotten Tomatoes Meter"
};
var RTUData = {
"values": [],
"text": "Rotten Tomatoes User"
};
var chartData = {
"type":"bar",
"legend":{
"adjust-layout": true
},
"plotarea": {
"adjust-layout":true
},
"plot":{
"stacked": true,
"border-radius": "1px",
"tooltip": {
"text": "Rated %v by %plot-text"
},
"animation":{
"effect":"11",
"method":"3",
"sequence":"ANIMATION_BY_PLOT_AND_NODE",
"speed":10
}
},
"scale-x": {
"label":{ /* Scale Title */
"text":"Movie Title",
},
"values": Object.keys(movieSet) /* Needs to be list of movie titles */
},
"scale-y": {
"label":{ /* Scale Title */
"text":"Total Score",
}
},
"series":[metascoreData, IMDBData, RTUData, RTMData]
};
var callback = function(data)
{
var resp = JSON.parse(data);
movieSet[resp.Title] = true;
//Render
zingchart.render({
id:'chartDiv',
data:chartData,
});
};

Full Disclosure, I'm a member of the ZingChart team.
Thank you for updating your question. The problem is you have defined your variable movieSet before the variablechartData. When parsing the page, top down, it is executing Object.keys({}) on an empty object when creating the variable chartData. You should just directly assign it into your config later on chartData['scale-x']['values'] = Object.keys(moviSet).
var callback = function(data)
{
var resp = JSON.parse(data);
movieSet[resp.Title] = true;
//Render
zingchart.render({
id:'chartDiv',
data:chartData,
});
};
There is a problem with the above code as well. It seems you are calling render on the chart every time you call this API. You should have one initial zingchart.render() and then from there on out use our API. I would suggest setdata method as it replaces a whole new JSON packet or modify method.
I am making some assumptions on how you are handling data. Regardless, check out the following demo
var movieValues = {};
var myConfig = {
type: "bar",
scaleX:{
values:[]
},
series : [
{
values : [35,42,67,89,25,34,67,85]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 300,
width: '100%'
});
var callback = function(data) {
movieValues[data.title] = true;
myConfig.scaleX.values = Object.keys(movieValues);
zingchart.exec('myChart', 'setdata', {
data:myConfig
})
}
var index = 0;
var movieNamesFromDB = ['Sausage Party', 'Animal House', 'Hot Rod', 'Blazing Saddles'];
setInterval(function() {
if (index < 4) {
callback({title:movieNamesFromDB[index++]});
}
},1000)
<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</script>
<!--Inject End-->
</head>
<body>
<div id='myChart'></div>
</body>
</html>
If you noticed in the demo, the length of scaleX.values determines how many nodes are shown on the graph. If you change values to labels this wont happen.

Highlight Single Bar/Column in Highcharts on load

I have an existing highchart on which I need to highlight a single column.
It is a percentile graph that has been around for a while, I am still pretty new to high charts, but I have seen a similar question here on SO, this question, though deals with stacked bars and a click event...
The code makes sense to me in the example, but I guess I am missing something,
Here is my sample (trying to highlight the 24th column)
https://jsfiddle.net/52t43y3k/2/
Here is the question I saw:
Highlight one bar in a series in highcharts?
for ref, my code is
var col_chart = $('#section-2-chart').highcharts({
chart: {
type: 'column'
},
tooltip: { enabled: false },
credits:false,
title: false,
xAxis: {
title:{text:'PERCENTILES'},
type: 'Percentile',
labels: {
enabled:true,
formatter: function() {
return this.value*2;
}
}
},
yAxis: {
min: 0,
title:{text:'Total Image Weight'}
},
legend: {
enabled: false
},
series: [{
data: [169,12003,38308.5,61739.7,97069,131895.5,161086.7,198758.7,219779.3,243567.7,276607.7,296931.5,327457.5,362840.3,383978,410685.5,443774,467039.5,491654,517205,544754.7,578468.3,605392.5,644214.5,693765,766953.7,806616,855380.7,894161,942282,1001179.7,1062697.7,1125773.3,1186437,1236893.7,1314379.5,1378944,1454090.3,1553065,1689346,1833150,1957396,2077851.5,2228644.7,2390102,2725365.5,3147844.3,3607372,4239281.5,5190061,9422370.8],
tooltip: {
pointFormat: '<b>{point.y:f} Bytes</b>'
}
}]
});
//TRIED THIS AND series.data[24] - essentially the 24th bar should be highlighted
col_chart.series[0].data[24].update({color:'red'});

You need to access the highcharts off of your jquery object:
col_chart.highcharts().series[0].data[24].update({
color: 'red'
});
For clarity
In your example, the following is true:
console.log(col_chart instanceof jQuery); // true
From the highcharts source:
/**
* Register Highcharts as a plugin in jQuery
*/
if (win.jQuery) {
win.jQuery.fn.highcharts = function () {
var args = [].slice.call(arguments);
if (this[0]) { // this[0] is the renderTo div
// Create the chart
if (args[0]) {
new Highcharts[ // eslint-disable-line no-new
isString(args[0]) ? args.shift() : 'Chart' // Constructor defaults to Chart
](this[0], args[0], args[1]);
return this;
}
// When called without parameters or with the return argument, return an existing chart
return charts[attr(this[0], 'data-highcharts-chart')];
}
};
}
Meaning, highcharts() is a plugin for jQuery, so you can access it (assuming it's been attached to the dom element already, as in your case above) by calling highcharts off a jQuery selector instance.