Lini Susan V Lini Susan V - 1 month ago 11
HTML Question

How to invert or transpose table using jqxDataTable?

I am using jqxDataTable for dynamic tables in my project. For some cells we are getting percentage symbol along with text. The jqxDataTable plugin is behaving unexpectedly when % is present. PFB some sample scenarios.

Actual Data




  1. Apple, value added (% of MRP)

  2. Books kept in bag (% of books 10-12 per bag)

  3. Cat drink 20% milk



Displayed Data




  1. 0

  2. Books kept in bag (% of books 10-12 per bag)

  3. 20



Please let me know if anybody have figure out any solution for this issue.




Update



On analyzing the issue, we think the issue might be because of the column mapping being provided when initializing jqxDataTable.

We are getting data from web service in JSON format and we are converting the JSON to HTML before loading to jqxDataTable. This is done to enable the users to view table in inverted style. i.e, users can toggle the table to view columns as rows and vice versa.

Please suggest any alternate way to invert the table view using inbuilt functionalities of jqxDataTable.

function buildDataTableTranspose2(dimension, dataSource, dataFields, fromload) {
var gridfieldname = gbl_metadata.GridDataFields[dimension][0]["name"];
var gridfieldcaption = gbl_metadata.ColumnNames[dimension][0]["columnName"];
var dataAdapterMetadata = new $.jqx.dataAdapter(dataSource, {
loadComplete: function (records) {
var dataTableColumns = new Array();
var columnArray = new Array();
columnArray = "[{ text: \'" + gridfieldcaption + "\',dataField:\'" + gridfieldcaption + "\', width: 300, pinned: true },";
var header = "<thead><tr><th>" + dataFields[0]['text'] + "</th>";
var column = "";
for (var k = 0; k < records.length; k++) {
if (k == 0) column = "{" + "text:\'" + escapeEx(records[k][gridfieldname]) + "\'," + "dataField:\'" + escapeEx(records[k][gridfieldname] + k) + "\'," + "width:300, columntype:\'custom\', cellsrenderer: cellsrenderer, rendered: rendered, createeditor: createeditor, initeditor: initeditor }";
else column = ",{" + "text:\'" + escapeEx(records[k][gridfieldname]) + "\'," + "dataField:\'" + escapeEx(records[k][gridfieldname] + k) + "\'," + "width:300, columntype:\'custom\', cellsrenderer: cellsrenderer, rendered: rendered, createeditor: createeditor, initeditor: initeditor }";
columnArray = columnArray + column;
header = header + "<th>" + records[k][gridfieldname] + k + "</th>";
}
columnArray = columnArray + "]";
Array(columnArray);
columnArray = eval(columnArray);
header = header + "</tr></thead>";
var table = "<tbody>";
for (i = 1; i < dataFields.length; i++) {
var row = "<tr><td>" + dataFields[i]['text'] + "</td>";
for (j = 0; j < records.length; j++) {
var dataValue = records[j][dataFields[i]['dataField']];
row = row + "<td>" + escapeEx(dataValue == null ? "" : dataValue) + "</td>";
}
table = table + row + "</tr>";
}
table = table + "</tbody>";
table = "<table id='" + dimension + "_metadata_transposetable'>" + header + table + "</table>";
$('#' + dimension + '_metadataTable').html(table);
$('#' + dimension + '_metadataTable table').jqxDataTable({
sortable: true,
width: '100%',
height: getGridHeight(),
filterable: false,
columnsReorder: true,
columnsResize: true,
columns: columnArray
});
}
});
// perform data binding.
dataAdapterMetadata.dataBind();
}

Answer

I managed to solve this by transposing JSON before binding to jqxDataTable.