Blogs

In this post we will see how to populate the GridView with this data:

var data = new Array(); data[0] = { Country: “United States”, PercentageVisits: 26.19 }; data[1] = { Country: “South Korea”, PercentageVisits: 19.43 }; data[2] = { Country: “India”, PercentageVisits: 18.18 }; data[3] = { Country: “Germany”, PercentageVisits: 16.60 }; data[4] = { Country: “China”, PercentageVisits: 15.35 }; data[5] = { Country: “Italy”, PercentageVisits: 14.25 }; data[6] = { Country: “Spain”, PercentageVisits: 13.77 }; data[7] = { Country: “France”, PercentageVisits: 12.99 }; data[8] = { Country: “United Kingdom”, PercentageVisits: 8.52 }; data[9] = { Country: “Taiwan”, PercentageVisits: 5.71 };

and the resulting GridView to look like the image below:



The first step is to create the source object. We set its ‘datatype’ member to ‘array’, the ‘localdata’ member points to the data array and we add the datafields.

var source =
{
    datatype: "array",
    localdata: data,
    datafields: [
        { name: 'Country' },
        { name: 'PercentageVisits' }
    ]
};

var dataAdapter = new $.jqx.dataAdapter(source);

In the html markup, we add two elements – the header tag and a DIV tag that will display the GridView:

<h4>Top Visitors</h4>
<div id="jqxgrid"></div>

The final step is to create the jqxGrid. In the initialization, we create three columns. The first column displays the row number. The second column displays the countries. The third column displays the Visits in percentages. To make it look pretty, we use a cellsrenderer function that returns a html string. The function accepts three parameters – the rendered row, column and the cell’s value. The GridView expects a html string as a result from this function. The html string that we build has 1 container DIV and two nested DIV tags. The first nested tag shows the value as a percent bar and the second tag displays the percentages as text.

$("#jqxgrid").jqxGrid(
{
    width: 300,
    autoheight: true,
    altrows: true,
    source: dataAdapter,
    theme: 'classic',
    columns: [
        { width: 50, columntype: 'number' },
        { text: 'Country/Territory', datafield: 'Country', width: 150 },
        { text: '% Visits', datafield: 'PercentageVisits', width: 100,
            cellsrenderer: function (row, colum, value) {
                var cell = '<div style="margin-top:5px;">';
                cell += '<div style="background: #058dc7; float: left; width: ' + value + 'px; height: 16px;"></div>';
                cell += '<div style="margin-left: 5px; float: left;">' + value.toString() + '%' + '</div>';
                cell += '</div>';
                return cell;
            }
        }
    ]
});