JavaScript - Generate Kendo Ui Grid using xml Data

Question

I've Been using XSLT to display my xml page. I make use of the following to get the data from the xml file:

< xsl:value-of select="ClinicalDocument/component/structuredBody/component[3]/section/text/table/tbody"/ >

After this, I have the following javascript to clean up the data and do the conversion:

 -----------Get Content for Grids---------- //Split Content into array var purposeArray = document.getElementById('purposeOfVisit').innerHTML.split("\\n"); var activeProblemArray = document.getElementById('activeProblems').innerHTML.split("\\n"); //------------ Remove All Unwanted Values-----------\\\\*/ var newDataString =""; for( var k = 0; k < purposeArray.length; k++ ) { newDataString += purposeArray[k] + "__"; } newDataString = newDataString.replace(/ /g,""); newDataString = newDataString.replace(/__________/g,"__-__"); var newDataArray = newDataString.split("__"); //------------- Save Values in final Array -------------\\\\*/ var semiFinalArray = new Array(); for( var x=0; x < newDataArray.length; x++) { if(newDataArray[x].length != 0) { semiFinalArray.push(newDataArray[x]); } } var finalArray = new Array(); var counter = 0; //------------ Find Number of Columns in row ------------\\\\*/ var numberOfRows = document.getElementById('numberOfRows').innerHTML; var numberOfColumns = document.getElementById('numberOfColumns').innerHTML; var columnsPerRow = parseInt(numberOfColumns) / parseInt(numberOfRows); //------------------------------Testing ------------------------------// var dataNamePre = "dataValue"; var temporaryArray = new Array(); var dataName; //----------- Generate Grid Values -----------// for( var b=0 ; b < semiFinalArray.length ; b = b + columnsPerRow) { var problemComment = ""; counter = 0; var obj; for( var a=0 ; a < columnsPerRow ; a++) { dataName = dataNamePre + counter.toString() + ""; //-------Generate Grid Titles------// temporaryArray.push("Title " + (counter+1)); var key = "key"+a; obj = { values : semiFinalArray[b+a] }; var problemComment = ""; finalArray.push(obj); counter++; } } //---------------------Generate GridArray---------------------------// var gridArray = []; var gridArrayHead = new Array(); counter = 0; var objectValue = new Array(); for( var x = 0; x < finalArray.length; x++ ) { objectValue = { head:temporaryArray[x], values: finalArray[x].values } gridArray.push(objectValue); } var provFacilities = []; for( var x = 0; x < finalArray.length; x++ ) { provFacilities[x] = { head:temporaryArray[x], values: finalArray[x].values } } //alert(gridArray); $("#grid").kendoGrid( { columns: [{ title:gridArray.head, template:'#= values #' }], dataSource: { data:finalArray, pageSize:10 }, scrollable:false, pageable:true }); 

This may be a roundabout method, but I'm still prettry new to this method of coding. Currently, all the data is being presented in one column, with the last value in my temporaryArray as the title for the column.

Everything works until I try to set the DataSource for the Kendo Grid. When working in the columns property in the grid, I made the following change:

title:gridArray[0].head

When this is done, the title is changed to the first value in the array.

What I want to know is how can I generate columns in the Kendo Grid According to the title? Is there a way to loop through all the values and create the objects from there, seeing that the date that is being sent to the grid are objects in an Array?

What I basically want is something to make this work, without the repitition:

var myGrid = $("#grid").kendoGrid( { columns: [ { title: temporaryArray[0],
field: finalArray[0].values }, { title: temporaryArray[1],
field: finalArray[1].values }, { title: temporaryArray[2],
field: finalArray[2].values }, { title: temporaryArray[3],
field: finalArray[3].values }, { title: temporaryArray[4],
field: finalArray[4].values } ] )};

Any help appreciated, thanks!

Answer 1

This issue has been fixed using the following coding:

var arrayData = [];

for( var x = 0; x < semiFinalArray.length; x=x+5 )
{
    var tempArr = new Array();

    for( var y = 0; y < 5; y++ )
    {
        var num = x + y;
        tempArr.push(semiFinalArray[num]);
    }
    arrayData.push(tempArr);
}

var dataTitles = [];
for( var x = 0; x < titleArray.length; x++ )
{
    var head = "";
    head = titleArray[x];
    head = head.replace(/ /g,"");
    dataTitles.push(head);
}


var counter = 0;
var columnDefs = [];
for (var i = 0; i < columnsPerRow.length; i++) 
{
    if (counter == (columnsPerRow - 1)) 
    {
        counter = 0;
    }
    columnDefs.push({ field: dataTitles[counter], template: arrayData[i].values });
    counter++;
}
// Create final version of grid array
var gridArray = [];
for (var i = 0; i < arrayData.length; i++) 
{
    var data = {};
    for (var j = 0; j < dataTitles.length; j++) 
    {
        data[dataTitles[j]] = arrayData[i][j];
    }
    gridArray.push(data);
}
// Now, create the grid using columnDefs as argument
$("#grid").kendoGrid(
{
    dataSource: 
    {
        data: gridArray,
        pageSize: 10
    },
    columns: columnDefs,
    scrollable: false,
    pageable: true
}).data("kendoGrid");

With this, the data is displayed in the DataGrid.