Grid Colums Header

[eliasMember]

Hi all,

I have been trying to display json data from database, into the grid. It does not display the header ,and it shows empty rows.

this is the code:

var source =
{
datatype: “json”,
localdata: dataGrid,
datafields: [
{ name: ‘Group Name’},
{ name: ‘Contact Initials’},
{ name: ‘Contact First Name’},
{ name: ‘Contact Last Name’},
{ name: ‘Role’},
{ name: ‘Total’}
],
};

var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (dataGrid) { },
loadError: function (xhr, status, error) { }
});

$(“#jqxgrid”).jqxGrid(
{
showheader: true,
pageable: true,
editable: false,
columnsresize: true,
width: ‘70%’,
source: dataAdapter,
theme: ‘classic’,
columns: [
{ text: ‘Group Name’ , datafield: ‘groupName’, width: 200 },
{ text: ‘Contact Initials’ , datafield: ‘contactPersonInitials’, width: 50 },
{ text: ‘Contact First Name’ , datafield: ‘contactPersonFirstName’, width: 100 },
{ text: ‘Contact Last Name’ , datafield: ‘contactPersonLastName’, width: 100 },
{ text: ‘Role’ , datafield: ‘role’, width: 150 },
{ text: ‘Total’ , datafield: ‘groupTotal’, width: 100, cellsalign: ‘right’, cellsformat: ‘D2’ }
]
});

regards

elias

[Peter StoevKeymaster]

Hi elias,

In the columns definition, you use datafield names that does not match to the datafields in the source object. For example, in the “Total” column, the datafield is ‘groupTotal’, but you don’t have such datafield in the datafields array.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[eliasMember]

Hi peter,

I have changed the data source to:

var source =
{
datatype: “json”,
localdata: dataGrid,
datafields: [
{ name: ‘groupName’},
{ name: ‘contactPersonInitials’},
{ name: ‘contactPersonFirstName’},
{ name: ‘contactPersonLastName’},
{ name: ‘role’},
{ name: ‘groupTotal’}
]
};

It does not display the headers.

regards
Elias

[Peter StoevKeymaster]

Hi Elias,

I don’t know what’s going wrong on your side. You can examine how our online samples work and take a look at the help topics about jqxGrid. It that does not help, provide us a small sample which we can use to test your scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[eliasMember]

Hi,

this is data from the server:

"[{"id":0,"groupName":"Botanical Society","role":null,"contactPersonLastName":"Green","contactPersonFirstName":"James","contactPersonInitials":"JG","groupTotal":5000.00}]"

regards
Elias

[Peter StoevKeymaster]

Hi Elias,

What stands for: localdata: dataGrid? Could you provide the full initialization code including the HTML part.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[eliasMember]

Hi Peter,

this is the code:

$(‘#jqxTree’).bind(‘select’, function (event) {

//$(“.show_hide”).show();
var fromVar = $(“#from”).val();
var toVar = $(“#to”).val();

var dateStringFrom = null;
var dateStringTo = null;
var dateString = null;

if (fromVar.length == 0) {
alert(“Please Select a Date to Run the report”);
var newdateObject = new Date();
dateString = newdateObject.getFullYear() + ‘-‘ + (newdateObject.getMonth() + 1) + ‘-‘ + newdateObject.getDate();
dateStringFrom = dateString;
}

if (fromVar.length > 0 ) {
var fromVarSql = $(“#from” );
dateStringFrom = fromVarSql.getFullYear() + ‘-‘ + (fromVarSql.getMonth() + 1) + ‘-‘ + fromVarSql.getDate();
}

if (toVar.length > 0) {
var toVarSql = $(“#to” );
dateStringTo = toVarSql.getFullYear() + ‘-‘ + (toVarSql.getMonth() + 1) + ‘-‘ + toVarSql.getDate();
}

var item = $(‘#jqxTree’).jqxTree(‘getSelectedItem’);
var reportId = item.parentId;
var branchId = item.id;

if (reportId == “1”) {

var listDocument = ‘ListEodReports’;
var param = ‘reportId=’ + reportId + ‘&branchId=’ + branchId+’&from=’ + dateStringFrom;

jQuery.ajax({
url: listDocument,
async: false,
type: ‘POST’,
data: param,
error: function(data) {
alert(data);
},
success: function(data) {
dataGrid = getResultOflistDocument(data);
}
});

eodReport(dataGrid);
}
});

function eodReport (dataGrid) {
var source =
{
datatype: “json”,
localdata: dataGrid,
datafields: [
{ name: ‘groupName’},
{ name: ‘contactPersonInitials’},
{ name: ‘contactPersonFirstName’},
{ name: ‘contactPersonLastName’},
{ name: ‘role’},
{ name: ‘groupTotal’}
]
};

var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (dataGrid) { },
loadError: function (xhr, status, error) { }
});

$(“#jqxgrid”).jqxGrid(
{
showheader: true,
pageable: true,
editable: false,
columnsresize: true,
width: ‘70%’,
source: dataAdapter,
theme: ‘classic’,
columns: [
{ text: ‘Group Name’ , datafield: ‘groupName’, width: 200 },
{ text: ‘Contact Initials’ , datafield: ‘contactPersonInitials’, width: 50 },
{ text: ‘Contact First Name’ , datafield: ‘contactPersonFirstName’, width: 100 },
{ text: ‘Contact Last Name’ , datafield: ‘contactPersonLastName’, width: 100 },
{ text: ‘Role’ , datafield: ‘role’, width: 150 },
{ text: ‘Total’ , datafield: ‘groupTotal’, width: 100, cellsalign: ‘right’, cellsformat: ‘D2’ }
]
});
}

function getResultOflistDocument(data) {
dataGrid = data.transactionList;
return dataGrid;
}

the html:

Select the date range to search for.
From

to

regards
Elias

[Peter StoevKeymaster]

Hi Elias,

If you bind the Grid in such way, change the datatype to ‘array’ or make your json data a json string.

Here’s a working sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var data = '[{ "id": 0, "groupName": "Botanical Society", "role": null, "contactPersonLastName": "Green", "contactPersonFirstName": "James", "contactPersonInitials": "JG", "groupTotal": 5000.00 }]';
            var source =
            {
                datatype: 'json',
                localdata: data,
                datafields: [
                    { name: 'groupName'},
                    { name: 'contactPersonInitials'},
                    { name: 'contactPersonFirstName'},
                    { name: 'contactPersonLastName'},
                    { name: 'role'},
                    { name: 'groupTotal'}
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid({
                source: dataAdapter,
                editable: true,
                sortable: true,
                filterable: true,
                showfilterrow: true,
                columns: [
                    { text: 'Group Name', datafield: 'groupName', width: 200 },
                    { text: 'Contact Initials', datafield: 'contactPersonInitials', width: 50 },
                    { text: 'Contact First Name', datafield: 'contactPersonFirstName', width: 100 },
                    { text: 'Contact Last Name', datafield: 'contactPersonLastName', width: 100 },
                    { text: 'Role', datafield: 'role', width: 150 },
                    { text: 'Total', datafield: 'groupTotal', width: 100, cellsalign: 'right', cellsformat: 'D2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts