jQuery UI Widgets Forums Grid Grid not recognizing totalrecords

This topic contains 3 replies, has 1 voice, and was last updated by  SoftwareIsHappiness 8 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Grid not recognizing totalrecords #89337

    SoftwareIsHappiness
    Participant

    Hi,

    The beforeprocessing sets source.totalrecords and this can be confirmed when I dump source to the JavaScript console however the grid component doesn’t recognize totalrecords (and data cannot be paginated).

    I have followed the documentation. Code below. Screen shot is available at: https://drive.google.com/file/d/0B3pVkDbt5U54dnFHcURUS2R6ZGc/view?usp=sharing

    HTML/JavaScript

    <script type="text/javascript">
        $(document).ready(function () {
            var url = "/admin/user/find";
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'id', type: 'int' },
                    { name: 'name', type: 'string' },
                    { name: 'email', type: 'string' },
                    { name: 'created_at', type: 'date' },
                    { name: 'updated_at', type: 'date' }
                ],
                id: 'id',
                root: 'data',
                beforeprocessing: function (data) {
                    source.totalrecords = data.totalrecords;
                    console.dir(source);
                },
                url: url,
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid({
                theme: theme,
                width: '100%',
                source: dataAdapter,
                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: true,
                autoheight: true,
                columnsresize: true,
                columns: [
                    { text: 'Id', datafield: 'id', width: '10%' },
                    { text: 'Name', datafield: 'name', width: '20%' },
                    { text: 'Email', datafield: 'email', width: '30%' },
                    { text: 'Created', datafield: 'created_at', width: '20%', cellsformat: 'd' },
                    { text: 'Update', datafield: 'updated_at', width: '20%', cellsformat: 'd' }
                ]
            });
        });
    </script>
    
    <div id='jqxWidget' style="width: 100%;">
        <div id="jqxgrid">
        </div>
    </div>
    

    JSON

    {
       "data":[
          {
             "id":1,
             "name":"Administrator",
             "email":"Admin@SoftwareIsHappiness.com",
             "created_at":null,
             "updated_at":null
          },
          {
             "id":2,
             "name":"User1",
             "email":"User1@SoftwareIsHappiness.com",
             "created_at":null,
             "updated_at":null
          },
          {
             "id":3,
             "name":"User2",
             "email":"User2@SoftwareIsHappiness.com",
             "created_at":null,
             "updated_at":null
          },
          {
             "id":4,
             "name":"User3",
             "email":"User3@SoftwareIsHappiness.com",
             "created_at":null,
             "updated_at":null
          },
          {
             "id":5,
             "name":"User4",
             "email":"User4@SoftwareIsHappiness.com",
             "created_at":null,
             "updated_at":null
          },
          {
             "id":6,
             "name":"User5",
             "email":"User5@SoftwareIsHappiness.com",
             "created_at":null,
             "updated_at":null
          },
          {
             "id":7,
             "name":"User6",
             "email":"User6@SoftwareIsHappiness.com",
             "created_at":null,
             "updated_at":null
          },
          {
             "id":8,
             "name":"User7",
             "email":"User7@SoftwareIsHappiness.com",
             "created_at":null,
             "updated_at":null
          },
          {
             "id":9,
             "name":"User8",
             "email":"User8@SoftwareIsHappiness.com",
             "created_at":null,
             "updated_at":null
          },
          {
             "id":10,
             "name":"User9",
             "email":"User9@SoftwareIsHappiness.com",
             "created_at":null,
             "updated_at":null
          }
       ],
       "totalrecords":100
    }

    Thanks,
    Michael

    Grid not recognizing totalrecords #89338

    SoftwareIsHappiness
    Participant

    NOTE: Using jQWidgets v4.3.0 (2016-Oct)

    Grid not recognizing totalrecords #89345

    SoftwareIsHappiness
    Participant

    Hi,

    I followed the documentation for “Server-Side Paging with jQuery Grid” at: http://www.jqwidgets.com/server-side-paging-with-jquery-grid/

    Why isn’t the grid/adapter recognizing source.totalrecords?

    We intend to purchase jQuery Widgets but are attempting to implement CRUD/Grid functionality first. Assistance is so greatly appreciated!

    Thanks,
    Michael

    Grid not recognizing totalrecords #89346

    SoftwareIsHappiness
    Participant

    Hi,

    This post is resolved. I had omitted virtualmode: true and rendergridrows callback— both are necessary in addition to pageable: true.

            $("#jqxgrid").jqxGrid({
                theme: theme,
                width: '100%',
                source: dataAdapter,
                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: true,
                virtualmode: true,
                rendergridrows: function()
                {
                    return dataAdapter.records;
                },
                autoheight: true,
                columnsresize: true,
                columns: [
                    { text: 'Id', datafield: 'id', width: '10%' },
                    { text: 'Name', datafield: 'name', width: '20%' },
                    { text: 'Email', datafield: 'email', width: '30%' },
                    { text: 'Created', datafield: 'created_at', width: '20%', cellsformat: 'd' },
                    { text: 'Update', datafield: 'updated_at', width: '20%', cellsformat: 'd' }
                ]
            });

    Thanks,
    Michael

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

You must be logged in to reply to this topic.