jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Server-side paging problems when sorting enabled

Tagged: , ,

This topic contains 4 replies, has 3 voices, and was last updated by  elmemo14 12 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Server-side paging problems when sorting enabled Posts
  • June 29, 2012 at 6:31 am Server-side paging problems when sorting enabled #5483

    vudh
    Member

    Hi,

    I have a problem of virtual paging when sorting enabled, when I go to the next page, I got the error: Uncaught TypeError: Cannot read property ‘value’ of undefined, below is the code:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jqxGrid Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <script src="base/jquery-1.7.1.min.js"></script>
    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jqxcore.js"></script>
    <script type="text/javascript" src="scripts/jqxdata.js"></script>
    <script type="text/javascript" src="scripts/jqxbuttons.js"></script>
    <script type="text/javascript" src="scripts/jqxscrollbar.js"></script>
    <script type="text/javascript" src="scripts/jqxlistbox.js"></script>
    <script type="text/javascript" src="scripts/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="scripts/jqxgrid.js"></script>
    <script type="text/javascript" src="scripts/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="scripts/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="scripts/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="scripts/jqxgrid.selection.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = {
                datatype: 'jsonp',
                datafields: [{ name: 'Beskrivelse' }, { name: 'Nummer' }, { name: 'Start' }, { name: 'Slutt' }, { name: 'Status' }
         ],
                url: 'http://vaf.vegasmb.com:8101/ServiceDebug/Service.svc/Test?method=?',
                root: 'Rows',
                beforeprocessing: function (data) {
                    var json = $.parseJSON(data.TestResult);
                    source.totalrecords = json.TotalRows;
                }
            };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data) {
                    return $.parseJSON(data['TestResult']);
                }
            });

            $("#jqxgrid").jqxGrid(
                    {
                        width: 670,
                        source: dataAdapter,
                        columnsresize: true,
                        pageable: true,
                        sortable: true,
                        virtualmode: true,
                        rendergridrows: function () {
                            return dataAdapter.records;
                        },
                        columns: [{ text: 'Description', dataField: 'Beskrivelse', minwidth: 100, classname: 'header', cellclassname: 'textcell' }, { text: 'Number', dataField: 'Nummer', minwidth: 100, classname: 'header', cellclassname: 'textcell' }, { text: 'Start', dataField: 'Start', minwidth: 100, classname: 'header', cellclassname: 'textcell' }, { text: 'End', dataField: 'Slutt', minwidth: 100, classname: 'header', cellclassname: 'textcell' }, { text: 'Status', dataField: 'Status', minwidth: 100, classname: 'header', cellclassname: 'textcell' }
                                ],
                        ready: function () {
                            $("#jqxgrid").jqxGrid('sortby', 'Beskrivelse', 'asc');
                        }
                    });
        });
    </script>
    <style type="text/css">
        .header
        {
            font-weight: bold;
            font-size: 14px; /*margin-top:5px;*/
        }

        .textcell
        {
            /*color:Black;*/
        }

        .numbercell
        {
            color: Red;
        }
    </style>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

    Please help me to investigate this problem…

    Thanks and best regards,
    vudh

    June 29, 2012 at 7:19 am Server-side paging problems when sorting enabled #5486

    Peter Stoev
    Keymaster

    Hi vudh,

    Please take a look at this help topic which shows how to implement Server Side Paging and Sorting: php-server-side-grid-paging-and-sorting.htm. If the help topic does not help, please send a sample project which demonstrates the issue to support@jqwidgets.com.

    Best Regards,
    Peter Stoev

    jQwidgets Team
    http://www.jqwidgets.com

    June 29, 2012 at 10:14 am Server-side paging problems when sorting enabled #5491

    vudh
    Member

    Hi Peter,

    Thanks for your help ! it works now.

    By the way, the grid doesn’t show the loading image when paging takes a long time to response. How can I show it?

    Thanks once again,
    vudh

    June 30, 2012 at 4:01 am Server-side paging problems when sorting enabled #5511

    Peter Stoev
    Keymaster

    Thanks for the feedback! We’ll test the reported behavior.

    Best Regards,
    Peter Stoev

    jQwidgets Team
    http://www.jqwidgets.com

    July 12, 2012 at 11:29 am Server-side paging problems when sorting enabled #5878

    elmemo14
    Member

    vudh i am having the same sorting problem you had so if it possible please tell me how you solved the problem

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.