jQWidgets Forums

Tagged: datagrid control

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 12 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Kindly help, data is not being displayed in virtual paging. Posts

January 6, 2013 at 8:36 pm Kindly help, data is not being displayed in virtual paging. #13192

Zafar

Member

Hi!

Kindly help, data is not being displayed in virtual paging.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>In this demo jqxGrid uses a virtualized paging which enables you to handle very large data sets without any impact on client side performance.</title>
<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/jqxmenu.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/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../scripts/gettheme.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var theme = getTheme();
// prepare the data
var data = new Array();
var jsonObject = { “contactList”:[

{“age”:1,”SId”:”S1234567″,”gender”:”male”},
{“age”:1,”SId”:”S1234567″,”gender”:”male”},
{“age”:1,”SId”:”S1234567″,”gender”:”male”},
{“age”:1,”SId”:”S1234567″,”gender”:”male”},
{“age”:1,”SId”:”S1234567″,”gender”:”male”},
{“age”:1,”SId”:”S1234567″,”gender”:”male”},
{“age”:1,”SId”:”S1234567″,”gender”:”male”},
{“age”:1,”SId”:”S1234567″,”gender”:”male”},
{“age”:1,”SId”:”S1234567″,”gender”:”male”},

], “totalrecords”:9};

//alert(“jsonObject.totalrecords : ” + jsonObject.totalrecords);

// generate sample data.
var generatedata = function (startindex, endindex) {
var data = {};
for (var i = startindex; i < endindex; i++) {

//alert(startindex + ” ” + endindex);
var row = {};

row[“age”] = jsonObject.contactList[i].age;
row[“gender”] = jsonObject.contactList[i].gender;
row[“SId”] = jsonObject.contactList[i].SId;
data[i] = row;
}
return data;
}
var source =
{
datatype: “array”,
localdata: {},
totalrecords: jsonObject.totalrecords
};

// load virtual data.
var rendergridrows = function (params) {

alert(“rendergridrows : ” + source.totalrecords);
//alert(“rendergridrows : ” + params.startindex + ” ” + params.endindex);
var data = generatedata(params.startindex, params.endindex);
return data;
}
var totalcolumnrenderer = function (row, column, cellvalue) {
var cellvalue = $.jqx.dataFormat.formatnumber(cellvalue, ‘c2’);
return ‘<span style=”margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;”>’ + cellvalue + ‘</span>’;
}
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 670,
autoheight: true,
source: dataAdapter,
theme: theme,
virtualmode: true,
pageable: true,
rendergridrows: rendergridrows,
columns: [

{ text: ‘Age’, datafield: ‘age’, width: 50 },
{ text: ‘SId’, datafield: ‘SId’, width: 120 },
{ text: ‘Gender’, datafield: ‘gender’, width: 80 },

]
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”></div>
</div>
</body>
</html>

January 7, 2013 at 6:48 am Kindly help, data is not being displayed in virtual paging. #13209

Peter Stoev

Keymaster

Hi Zafar,

Here’s updated and working code:

<!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/jqxmenu.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).ready(function () {
                // prepare the data
                var data = new Array();
                var jsonObject = { "contactList":[
                {"age":1,"SId":"S1234567","gender":"male"},
                {"age":1,"SId":"S1234567","gender":"male"},
                {"age":1,"SId":"S1234567","gender":"male"},
                {"age":1,"SId":"S1234567","gender":"male"},
                {"age":1,"SId":"S1234567","gender":"male"},
                {"age":1,"SId":"S1234567","gender":"male"},
                {"age":1,"SId":"S1234567","gender":"male"},
                {"age":1,"SId":"S1234567","gender":"male"},
                {"age":1,"SId":"S1234567","gender":"male"}
                ], "totalrecords":9};
                var generatedata = function (startindex, endindex) {
                    var data = {};
                    for (var i = startindex; i < endindex; i++) {
                        var row = {};
                        if (jsonObject.contactList[i]) {
                            row["age"] = jsonObject.contactList[i].age;
                            row["gender"] = jsonObject.contactList[i].gender;
                            row["SId"] = jsonObject.contactList[i].SId;
                        }
                        data[i] = row;
                    }
                    return data;
                }
                var source =
                {
                    datatype: "array",
                    localdata: {},
                    totalrecords: jsonObject.totalrecords
                };
                // load virtual data.
                var rendergridrows = function (params) {
                    var data = generatedata(params.startindex, params.endindex);
                    return data;
                }
                var totalcolumnrenderer = function (row, column, cellvalue) {
                    var cellvalue = $.jqx.dataFormat.formatnumber(cellvalue, 'c2');
                    return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + cellvalue + '</span>';
                }
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    autoheight: true,
                    source: dataAdapter,
                    virtualmode: true,
                    pageable: true,
                    rendergridrows: rendergridrows,
                    columns: [
                    { text: 'Age', datafield: 'age', width: 50 },
                    { text: 'SId', datafield: 'SId', width: 120 },
                    { text: 'Gender', datafield: 'gender', width: 80 },
                    ]
                });
            });      
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.