Problem getting dynamic datafields to work

[tomintexParticipant]

Here is test#1. It loads the grid data just fine.

$(document).ready(function () {

datafields = new Array();
columns = new Array();

urlhdr = “JQWidgets.aspx/GetMonthlyGridHeaders”;
urldata = “JQWidgets.aspx/GetMonthlyGridData”;

datafields = [{name: ‘Category’, type: ‘string’},
{name: ‘PracticeName’, type: ‘string’},
{name: ‘M20160501’, type: ‘number’},
{name: ‘M20160601’, type: ‘number’},
{name: ‘M20160701’, type: ‘number’},
{name: ‘M20160801’, type: ‘number’},
{name: ‘M20160901’, type: ‘number’},
{name: ‘M20161001’, type: ‘number’},
{name: ‘M20161101’, type: ‘number’},
{name: ‘M20161201’, type: ‘number’},
{name: ‘M20170101’, type: ‘number’},
{name: ‘M20170201’, type: ‘number’},
{name: ‘M20170301’, type: ‘number’},
{name: ‘M20170401’, type: ‘number’},
{name: ‘M20170501’, type: ‘number’}];

var source = {
datatype: ‘xml’,
datafields: datafields,
async: false,
root: ‘Table’,
url: urldata
};
var dataAdapter = new $.jqx.dataAdapter(source,
{ contentType: ‘application/json; charset=utf-8’,
autoBind: true,
}
);
});

Here is test #2 – It uses a datafield array constructed by a function and returns from the jqx.dataAdapter with the following exception:

Unable to get property ‘nodeType’ of undefined or null reference\n
at attr (http://localhost:65048/vendor/jquery/jquery.min.js:3:31424)\n
at S (http://localhost:65048/vendor/jquery/jquery.min.js:3:155)\n
at attr (http://localhost:65048/vendor/jquery/jquery.min.js:3:31262)\n
at a.jqx.dataAdapter.prototype.loadxml (http://localhost:65048/jqwidgets/jqxdata.js:7:7510)\n
at success (http://localhost:65048/jqwidgets/jqxdata.js:6:21618)\n
at i (http://localhost:65048/vendor/jquery/jquery.min.js:2:27598)\n
at j.fireWith (http://localhost:65048/vendor/jquery/jquery.min.js:2:28311)\n
at g (http://localhost:65048/jqwidgets/jqxdata.js:7:27274)\n
at c (http://localhost:65048/jqwidgets/jqxdata.js:8:1026)\n
at send (http://localhost:65048/jqwidgets/jqxdata.js:8:1152)”

$(document).ready(function () {

datafields = new Array();
columns = new Array();

urlhdr = “JQWidgets.aspx/GetMonthlyGridHeaders”;
urldata = “JQWidgets.aspx/GetMonthlyGridData”;

$.ajax({
type: “GET”,
url: urlhdr,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
async: false,
success: function (response, txtstatus, XMLHttpRequest) {
//console.log(response.d);
SetupGridHeaders(response);
},
failure: function (XMLHttpRequest, textStatus, errorThrown) {
alert(‘An ajax error occurred – check console for more information’);
console.log(textStatus);
console.log(errorThrown);
}
});

alert(datafields);

var source = {
datatype: ‘xml’,
datafields: datafields,
async: false,
root: ‘Table’,
url: urldata
};
var dataAdapter = new $.jqx.dataAdapter(source,
{ contentType: ‘application/json; charset=utf-8’,
autoBind: true,
}
);
});

function SetupGridHeaders(response) {
var str = response.d;
var colList = new Array();
var colList = str.split(“,”);
var i;

//datafields = [];
datafields.push(“{ name: ‘Category’, type: ‘string’ }”);
datafields.push(“{ name: ‘PracticeName’, type: ‘string’ }”);

//columns = [];
columns.push(“{ text: ‘Category’, datafield: ‘Category’, width: ‘14%’ }”);
columns.push(“{ text: ‘Practice’, datafield: ‘PracticeName’, cellsalign: ‘left’, width: ‘8%’ }”);

for (i = 0; i < colList.length; ++i) {
str = colList[i]; //str holds the datafield name

if ((str.substring(0, 2) == ‘”M’) || (str.substring(0, 2) == ‘”W’) || (str.substring(0, 2) == ‘”Q’)) {
str = str.substring(1, 10);
datafields.push(“{ name: ‘” + str + “‘, type: ‘number’ }”);
// { text: ’05/31/2016′, datafield: ‘M20160501’, cellsalign: ‘right’, cellsformat: ‘d2’, width: ‘6%’ , cellsrenderer: cellsrenderer },
var str2 = str.substring(1, 9); //str2 holds the grid column display text
var m = str2.substring(4, 6);
var d = str2.substring(6, 8);
var y = str2.substring(0, 4);
str2 = m + “/” + d + “/” + y;
//columns = columns + “, { text: ‘” + str2 + “‘, datafield: ‘” + str + “‘, cellsalign: ‘right’, cellsformat: ‘d2’, width: ‘6%’ , cellsrenderer: cellsrenderer }”
columns.push(“{ text: ‘” + str2 + “‘, datafield: ‘” + str + “‘, cellsalign: ‘right’, cellsformat: ‘d2’, width: ‘6%’ }”);
continue;
}
}

When I use alert to display the constructed array – it looks identical to the hard-coded array example in test #1 Does anyone have an idea what I am missing???

[StanislavParticipant]

Hi tomintex,

I would suggest you to first take a look at our Dynamic columns. It should be a similar case to what you are trying to achieve here.

[Author]

Posts