We Keep Coding

How to improve datatable loading performance when datatable has a rendered chart inside each column?

I have a datatable rendered with a chart on each column, the datatable generated from ajax response data having more than 1000 records. Rendering the chart inside the columns results in performance issues. How to improve the performance?
Here is the code i use:
ajax:
var resData = [];
$.ajax({
'type': "POST",
'url': "CoxModel/processTypes/execution",
'data': dataList,
'beforeSend': function() {
$(".graphloadertraining").show();
},
'success': function(data) {
response = $.parseJSON(data);
response = response.data
$.each(response, function(index, value) {
var jsonObject = JSON.stringify(response);
var count = JSON.parse(jsonObject).length;
resData.push(value);
})
variableData(resData);
// return data;
}
});
chart generate:
function variableData(data) {
$(".graphloader").hide();
var newAry = {};
var newAryy = [];
i = 0;
$.each(data, function(index, value) {
var pd = value.PROCESSDATE;
var pt = value.PROCESS_TYPE;
var mn = value.MODELNAME;
var vn = value.VARIABLENAME;
var vc = value.VARIABLECONTRIBUTION;
if (!newAry[pt]) {
newAry[pt] = {};
}
if (!newAry[pt][mn]) {
newAry[pt][mn] = {};
}
if (!newAry[pt][mn][vn]) {
newAry[pt][mn][vn] = {};
}
if (!newAry[pt][mn][vn]['pd']) {
newAry[pt][mn][vn]['pd'] = [];
}
if (!newAry[pt][mn][vn]['vc']) {
newAry[pt][mn][vn]['vc'] = [];
}
newAry[pt][mn][vn]['pd'].push(pd);
newAry[pt][mn][vn]['vc'].push(vc);
i++;
});
if ($.fn.DataTable.isDataTable("#cox-model-modelgraph-variable")) {
$('#cox-model-modelgraph-variable').DataTable().clear().destroy();
}
tableWithChart = $('#cox-model-modelgraph-variable tbody');
tableBodyContent = '';
$.each(newAry, function(pType, pTypeValue) {
$.each(pTypeValue, function(mName, mNameValue) {
$.each(mNameValue, function(vName, vNameValue) {
tableBodyContent += '<tr><td>' + pType + '</td>';
tableBodyContent += '<td>' + mName + '</td>';
tableBodyContent += '<td>' + vName + '</td>';
tableBodyContent += '<td><div id="model-graph-' + pType + '-' + mName + '-' + vName + '" data-value="' + vNameValue.pd + '|' + vNameValue.vc + '"></div></td>';
tableBodyContent += '</tr>';
});
});
});
tableWithChart.html(tableBodyContent);
$(".chartContainer").empty();
$("#cox-model-modelgraph-variable").dataTable({
pageLength: 50,
deferRender: true,
processing: true,
"columns": [{
"title": "PROCESS TYPE"
}, {
"title": "MODEL NAME"
}, {
"title": "VARIABLE NAME"
}, {
"sortable": false,
"render": function(data, type, row, meta) {
dataId = $(data).attr('id');
dataValue = $(data).data('value');
return $("<div></div>", {
"id": dataId
}).append(modelGraphVariableChart(dataId, dataValue)).prop("outerHTML");
}
}]
});
$(".graphloader").hide();
$("#cox-model-modelgraph-variable tbody").removeClass('tr-loading');
}
function modelGraphVariableChart(chartContainer, chartValue) {
chartValue = chartValue.split('|');
for (i in chartValue) {
chartValue[i] = chartValue[i].split(',');
for (j in chartValue[i]) {
if (chartValue[i][j] == '') chartValue[i][j] = 0;
else if (parseFloat(chartValue[i][j]) == chartValue[i][j]) {
chartValue[i][j] = parseFloat(chartValue[i][j]);
} else {
chartValue[i][j] = chartValue[i][j];
}
}
}
newchart[chartContainer] = Highcharts.chart(chartContainer, {
chart: {
type: 'spline',
height: 100,
scrollablePlotArea: {
minWidth: 300,
maxWidth: 300,
scrollPositionX: 1
}
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: chartValue[0]
},
yAxis: {
labels: false,
title: {
text: null
},
endOnTick: false,
minorGridLineWidth: 0,
gridLineWidth: 1,
alternateGridColor: null,
},
tooltip: {
valueSuffix: null
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [{
name: 'VC',
data: chartValue[1]
}]
});
return newchart;
}
My table looks like this:

Building Project with portfolio items in rally tree grid

I want to build project team-wise portfolio items
project -1
- Feature -1
- Feature -2
project - 2
- Feature -1
- Feature -2
I am unable to get project and features as children in rally tree builder, I have tried like below:
Rally.onReady(function() {
Ext.define('Rally.example.SimpleTreeGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
models: ['PortfolioItem/Feature'],
autoLoad: true,
enableHierarchy: true
}).then({
success: this._onStoreBuilt,
scope: this
});
},
_onStoreBuilt: function(store) {
this.add({
xtype: 'rallytreegrid',
store: store,
context: this.getContext(),
enableEditing: false,
enableBulkEdit: false,
shouldShowRowActionsColumn: false,
enableRanking: false,
childEls: ["title"],
columnCfgs: [
'Name',
'State',
'Owner'
]
});
}
});
Rally.launchApp('Rally.example.SimpleTreeGrid', {
name: 'Simple Tree Grid Example'
});
});

Got it..! I have taken grouped by grid as reference and built the grid
_createGrid: function ()
{
var filter = Ext.create('Rally.data.wsapi.Filter', { property: 'Release.Name', operator: '=', value: ReleaseBoxValue });
if (!this.down('#storygrid'))
{
this.grid = this.add({
xtype: 'rallygrid',
itemId: 'storygrid',
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name', dataIndex: 'Name'
},
{
text: 'Accepted', dataIndex: 'FormattedID',
renderer: function (value)
{
var Release = value;
var html = "";
var userStoriesCount = 0;
_.each(acceptedStories, function (record)
{
if (record.key == Release)
{
userStoriesCount++;
}
}, this);
html = '<span>' + userStoriesCount + '</span>';
return html;
}
},
{
text: 'Completed', dataIndex: 'FormattedID',
renderer: function (value)
{
var Release = value;
var html = "";
var userStoriesCount = 0;
_.each(completedPercentage, function (record)
{
if (record.key == Release)
{
userStoriesCount++;
}
}, this);
html = '<span>' + userStoriesCount + '</span>';
return html;
}
},
{
text: 'Defined', dataIndex: 'FormattedID',
renderer: function (value)
{
var Release = value;
var html = "";
var userStoriesCount = 0;
_.each(definedStories, function (record)
{
if (record.key == Release)
{
userStoriesCount++;
}
}, this);
html = '<span>' + userStoriesCount + '</span>';
return html;
}
},
{
text: 'Grooming', dataIndex: 'FormattedID',
renderer: function (value)
{
var Release = value;
var html = "";
var userStoriesCount = 0;
_.each(grommedStories, function (record)
{
if (record.key == Release)
{
userStoriesCount++;
}
}, this);
html = '<span>' + userStoriesCount + '</span>';
return html;
}
},
{
text: 'In-Progress', dataIndex: 'FormattedID',
renderer: function (value)
{
var Release = value;
var html = "";
var userStoriesCount = 0;
_.each(inProgressStories, function (record)
{
if (record.key == Release)
{
userStoriesCount++;
}
}, this);
html = '<span>' + userStoriesCount + '</span>';
return html;
}
},
{
text: 'Grand Total', dataIndex: 'FormattedID',
renderer: function (value)
{
var Release = value;
var html = "";
var userStoriesCount = 0;
_.each(totalStories, function (record)
{
if (record.key == Release)
{
userStoriesCount++;
}
}, this);
html = '<span>' + userStoriesCount + '</span>';
return html;
}
},
{
text: 'Optum Accepted Stories', dataIndex: 'FormattedID',
renderer: function (value)
{
var Release = value;
var html = "";
var userStoriesCount = 0;
_.each(acceptedStories, function (record)
{
if (record.key == Release)
{
userStoriesCount++;
}
}, this);
html = '<span>' + userStoriesCount + '</span>';
return html;
}
},
{
text: 'Stories yet to be accepted', dataIndex: 'FormattedID',
renderer: function (value)
{
var Release = value;
var html = "";
var userStoriesCount = 0;
_.each(completedPercentage, function (record)
{
if (record.key == Release)
{
userStoriesCount++;
}
}, this);
html = '<span>' + userStoriesCount + '</span>';
return html;
}
}
,
{
text: 'Total Stories', dataIndex: 'FormattedID',
renderer: function (value)
{
var Release = value;
var html = "";
var userStoriesCount = 0;
_.each(totalStories, function (record)
{
if (record.key == Release)
{
userStoriesCount++;
}
}, this);
html = '<span>' + userStoriesCount + '</span>';
return html;
}
}
,
{
text: 'Optum Accepted Stories (%)', dataIndex: 'FormattedID',
renderer: function (value)
{
var Release = value;
var html = "";
var accepetedCount = 0;
_.each(acceptedStories, function (record)
{
if (record.key == Release)
{
accepetedCount++;
}
}, this);
var totalStoriesCount = 0;
_.each(totalStories, function (record)
{
if (record.key == Release)
{
totalStoriesCount++;
}
}, this);
var decTotal = accepetedCount / totalStoriesCount;
if (!isNaN(decTotal))
{
html = '<span>' + Math.round((decTotal) * 100) + '%</span>';
}
else
{
html = '<span>0%</span>';
}
return html;
}
}
,
{
text: 'Stories yet to be accepted (%)', dataIndex: 'FormattedID',
renderer: function (value)
{
var Release = value;
var html = "";
var completedCount = 0;
_.each(completedPercentage, function (record)
{
if (record.key == Release)
{
completedCount++;
}
}, this);
var totalStoriesCount = 0;
_.each(totalStories, function (record)
{
if (record.key == Release)
{
totalStoriesCount++;
}
}, this);
var decTotal = completedCount / totalStoriesCount;
if (!isNaN(decTotal))
{
html = '<span>' + Math.round((decTotal) * 100) + '%</span>';
}
else
{
html = '<span>0%</span>';
}
return html;
}
}
],
context: this.getContext(),
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: '{name} ({rows.length})'
}
],
filters: [filter],
storeConfig: {
model: 'portfolioitem/feature',
groupField: 'Name',
groupDir: 'ASC',
fetch: ['FormattedID', 'Name', 'Release', 'Project', 'UserStories', 'HierarchicalRequirement'],
filters: [filter],
getGroupString: function (record)
{
var owner = record.get('Project');
return (owner && owner._refObjectName) || 'No Name';
}
}
});
}
else
{
var filter = Ext.create('Rally.data.wsapi.Filter', { property: 'Release.Name', operator: '=', value: ReleaseBoxValue });
var treeGrid = this.down('rallygrid'),
treeStore = treeGrid.getStore();
treeStore.clearFilter(true);
treeStore.filter(filter);
}
}

Why don't the jquery datatable never reinitialize?

I have trying to get it right but failed. The problem is that when I call filltblServicesReport function which initializes database mainly, it works for the first time but when I call it again then it doesn't load the new data. Eventhough I am destroying it but still it doesn't.
I am loading it via click event of a button.
function filltblServicesReport() {
$('tfoot td#tdTotal').text("");
var url = '#Url.Action("DetailedServiceReport")';
var data = { FromDate: $("#FromDate").val(), ToDate: $("#ToDate").val() }
$.post(url, data, function (response) {
if (response.ReturnStatusJSON == true) {
$("#tbodytblServicesReport").html("");
var i = 1;
$.each(response.lstDetailedServicesReturned, function (i, val) {
$("#tblServicesReport").append($('<tr>').append($('<td>').html(i))
.append($('<td>').html((val.EntryDateTime === null || val.EntryDateTime === "") ? "N/A" : formatJSONDate(val.EntryDateTime)))
.append($('<td>').html(val.InvoiceNo))
.append($('<td>').html(val.CustomerName))
.append($('<td>').html(val.VehicleRegNo))
.append($('<td>').html(val.ServiceName))
.append($('<td>').html(val.ServicePrice))
.append($('<td>').html(val.Commission))
)
i++;
$('tfoot td#tdTotal').text(val.TotalCost);
$('tfoot td#tdTotalCommission').text(val.TotalCommission);
})
$('#tblServicesReport').show();
// $('#tblServicesReport').dataTable().fnDestroy();
$('#tblServicesReport').DataTable({
destroy: true,
bPaginate: false,
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
{
extend: 'pdfHtml5',
footer: true,
title: 'Services Report (' + $('#FromDate').val() + ' - ' + $('#ToDate').val() + ')',
customize: function (doc) {
doc.styles.title = {
color: 'gray',
fontSize: '15',
alignment: 'center'
}
doc.content[1].table.widths =
Array(doc.content[1].table.body[0].length + 1).join('*').split('');
doc.styles.tableHeader.fontSize = 10;
doc.styles.tableHeader.alignment = 'left';
doc.styles.tableHeader.color = 'white'
}
},
{
extend: 'print',
footer: true
//title: 'Sales Report'
}
]
});
}
else {
swal("Sorry !", "No Record Found", "error");
$("#tbodytblServicesReport").html("");
}
});
}

$('#tblServicesReport').DataTable.ajax.url.load
Solved it. You can use .ajax.url.load with data table to reinitialize it.

javascript code not picking up code_description value for first record

I have something similar to the JSFiddle mentioned here. The JSFiddle works fine, however, I am seeing a strange behaviour in my code. The description of very first
cell is always empty even though I am seeing that in the returned data (in JSON format) from the webservice, the description is present for each record. Please
take a look at the code below and let me know if I am missing anything:
this.processEmployees = function (data_, textStatus_, jqXHR_) {
var collection = data_.employees;
// A helper function used for employee codes below.
var isUsedKey = function (arrayOfObject, key) {
for (var i = 0; i < arrayOfObject.length; i += 1) {
if (arrayOfObject[i].key == key) {
return true;
}
}
return false;
};
var employeeCodes = [];
for (var i = 0; i < collection.length; i++) {
if (i == 0) {
var newItem = {};
newItem.key = collection[i].code_value;
newItem.dates = [collection[i].code_assignment_date];
newItem.description = collection[i].code_description;
newItem.hiringCriterion = collection[i].hiring_criteria;
newItem.name = collection[i].name;
console.log("Would like to check code_description for first item:",collection[i].code_description);
//debugger;
employeeCodes.push(newItem);
} else {
var item = collection[i];
var itemName = item.code_value;
var itemDate = item.code_assignment_date;
var itemDescription = item.code_description;
var hiringCriterion = item.hiring_criteria;
var itemCodeName = item.name;
if (isUsedKey(employeeCodes, itemName)) {
for (var j = 0; j < employeeCodes.length; j++) {
if (employeeCodes[j].key == itemName) {
var index = employeeCodes[j].dates.length;
employeeCodes[j].dates[index] = itemDate;
}
}
} else {
var nextNewItem = {};
nextNewItem.key = itemName;
nextNewItem.dates = [itemDate];
nextNewItem.code_description = itemDescription;
nextNewItem.hiring_criteria = hiringCriterion;
nextNewItem.name = itemCodeName;
employeeCodes.push(nextNewItem);
}
}
}
var newSource = {
localdata: employeeCodes,
datafields: [{
name: 'code_value',
type: 'string',
map: 'key'
},
{
name: 'code_assignment_date',
type: 'date',
map: 'dates>0'
},
{
name: 'name',
type: 'string'
},
{
name: 'code_description',
type: 'string'
},
{
name: 'hiring_criteria',
type: 'string'
}
],
datatype: "array"
};
var newAdapter = new $_.jqx.dataAdapter(newSource);
var iconrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
var icon = '';
if (employeeCodes[row].dates.length > 1) {
icon = '<img src="images/icon-down.png" style="position: absolute; right: 5px;" />';
}
return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">' + newAdapter.formatDate(value, 'd') + icon + '</span>';
};
$_(self.gridSelector).jqxGrid({
source: newAdapter,
editable: true,
width: '600',
pageable: true,
sortable: true,
autoheight: true,
theme: 'classic',
height: '170',
columnsResize: true,
columns: [
{
text: 'Employee Name',
datafield: 'name',
width: 85,
},
{
text: 'Code Value',
datafield: 'code_value',
width: 75,
editable: false
},
{
text: 'Latest Date(s)',
datafield: 'code_assignment_date',
cellsformat: 'd',
columntype: 'combobox',
width: 100
createeditor: function (row, column, editor) {
var info = $_(self.gridSelector).jqxGrid('getrowdata', row);
console.log("length of info: " + info);
var groupName = info.code_value;
console.log("Contents of groupName: " + groupName);
var dates = [];
for (var i = 0; i < employeeCodes.length; i++) {
if (employeeCodes[i].key == groupName) {
dates = employeeCodes[i].dates;
}
}
editor.jqxComboBox({ autoDropDownHeight: false, source: dates, promptText: "Previous Date(s):", scrollBarSize: 10 });
},
initeditor: function (row, column, editor) {
var info = $_(self.gridSelector).jqxGrid('getrowdata', row);
var groupName = info.code_value;
var dates = [];
for (var i = 0; i < employeeCodes.length; i++) {
if (employeeCodes[i].key == groupName) {
dates = employeeCodes[i].dates;
}
}
editor.jqxComboBox({
autoDropDownHeight: false,
source: dates,
promptText: "Dates:",
width: 100,
scrollBarSize: 10,
renderer: function (index_, label_, value_) {
return formatDateString(value_);
},
renderSelectedItem: function (index, item) {
var records = editor.jqxComboBox('getItems');
var currentRecord = records[index].label;
return formatDateString(currentRecord);;
}
});
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}
},
{
text: 'Description',
datafield: 'code_description'
},
{
text: 'Hiring Criterion',
datafield: 'hiring_criteria',
editable: false,
hidden: true
}
],
});
}; // End of processEmployees
For Example, if my JSON is the following:
{
"employees": [{
"code_value": "B1",
"code_assignment_date": "2016-12-13 23:04:00.0",
"code_type": 7,
"code_description": "This employee has received his salary",
"name": "Peter",
"hiring_criteria": null
}, {
"code_value": "A1",
"code_assignment_date": "2016-05-20 05:00:00.0",
"code_type": 7,
"code_description": "Employee has 5 vacation days left",
"name": "Jack",
"hiring_criteria": null
}],
"webServiceStatus": {
"status": "SUCCESS",
"message": "2 results"
}
}
I am not seeing the very first code_description value which is This employee has received his salary in the above JSON response whereas the following
line mentioned in the above code clearly shows it in the console panel:
console.log("Would like to check code_description for first item:",collection[i].code_description);

newItem.description = collection[i].code_description;
---Replace newItem.description to newItem.code_description in First object condition
newItem.hiringCriterion = collection[i].hiring_criteria;
---Replace newItem.hiringCriterion to newItem.hiring_criteria in First object condition

fetchItemByIdentity() doesn't work as expected

I have an ItemFileWriteStore on my page. When I click any row in my DataGrid I can get the id of that row, but then when I try to do fetchItemByIdentity using that id, it always returns null. Any idea why this could be?
I'm using Dojo 1.5.
function getRemoveFormatter(id) {
return '<img src="/images/icons/delete.png" />';
}
function deleteItem(id) {
console.log(id);
window.grid.store.fetchItemByIdentity({
identity: id,
onItem: function(item, request) { console.log(item); }
});
//window.grid.store.deleteItem(id);
}
dojo.ready(function() {
var store = new dojo.data.ItemFileWriteStore({data:{items:[]}});
window.grid = new dojox.grid.DataGrid({
store: store,
structure: [
{ name: "id", field: "id", width: "50px" },
{ name: "Stylist", field: "stylist", width: "100px" },
{ name: "Service", field: "service", width: "200px" },
{ name: "Length", field: "length", width: "50px" },
{ name: "Remove", field: "remove", width: "30px", formatter: getRemoveFormatter }
],
identifier: "id",
label: "id"});
dojo.byId("services_grid").appendChild(grid.domNode);
grid.startup();
observeAppointmentServiceAddClick(window.grid);
getAppointmentItems();
});

Try making a small change in the way you declare the store and the grid. The identifier and label properties belong in the data section of the store next to items.
var store = new dojo.data.ItemFileWriteStore({data:{
items:[],
identifier: "id",
label: "id"}});
window.grid = new dojox.grid.DataGrid({
store: store,
structure: [
{ name: "id", field: "id", width: "50px" },
{ name: "Stylist", field: "stylist", width: "100px" },
{ name: "Service", field: "service", width: "200px" },
{ name: "Length", field: "length", width: "50px" },
{ name: "Remove", field: "remove", width: "30px", formatter: getRemoveFormatter }
]});

Here is a simpler code and answer on jsfiddle.
http://jsfiddle.net/martlark/UkKXW/1/
<html>
<head><!--dojo stuff--></head>
<body>
<div id='store'></div>
<div id='log'></div>
</body>
</html>
dojo.require("dojo.data.ItemFileWriteStore");
var store = null;
function getItem(id) {
store.fetchItemByIdentity({
identity: id,
onItem: function (item, request) {
var v = store.getValue(item, 'value');
dojo.byId('log').innerHTML = 'getItem(' + id + ') =' + v;
}
});
}
dojo.ready(function () {
var items = [];
for (var p = 0; p < 5; p++) {
items.push({
id: p,
value: 'v ' + p
});
}
store = new dojo.data.ItemFileWriteStore({
data: {
identifier: 'id',
items: items
}
});
var gotList = function (items, request) {
var itemsList = "<ul>";
dojo.forEach(items, function (i) {
itemsList += '<li> id:' + p + ' = ' + store.getValue(i,
"value") + "</li>";
});
itemsList += '</ul>';
dojo.byId('store').innerHTML = itemsList;
}
var gotError = function (error, request) {
alert("The request to the store failed. " + error);
}
// Invoke the search
store.fetch({
onComplete: gotList,
onError: gotError
});
getItem('2');
});