CODEWITHSUNDEEP
jqueryjqgrid
amber
amber

Reputation: 1137

jqGrid client side data disappears when clicking on the sort columns

I have a jqGrid where if I click on the headers to sort, all of my grid data disappears and I don't know why it's happening. Here's a sample page I cooked up that repro's the problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Disappearing Sort Repro</title>
    <link type="text/css" rel="Stylesheet" href="js/jQuery/plugins/jqGrid4/ui.jqgrid.css" />

</head>
<body>
    <table id="ooTruckGrid">
    </table>
    <div id="ooTruckPager">
    </div>
    <script language="javascript" type="text/javascript" src="js/jquery/jquery-1.6.2.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/jquery-ui.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/plugins/jqGrid4/grid.locale-en.js"></script>
    <script language="javascript" type="text/javascript" src="js/jQuery/plugins/jqGrid4/jquery.jqGrid.js"></script>
    <script language="javascript" type="text/javascript">
        _truckList = [];

        $(document).ready(function () {
            $("#ooTruckGrid").jqGrid({
                datatype: "clientSide",
                colNames: ['id', 'VIN', 'Plate', 'Make', 'Model', 'Year', 'RFID #', 'Description'],
                colModel: [
                    { name: 'id', index: 'id', hidden: true, sorttype: "int" },
                    { name: 'vin', index: 'vin', width: 120, sorttype: "text" },
                    { name: 'plate', index: 'plate', width: 75, sorttype: "text" },
                    { name: 'make', index: 'make', width: 80, sorttype: "text" },
                    { name: 'model', index: 'model', width: 80, sorttype: "text" },
                    { name: 'year', index: 'year', width: 40, sorttype: "int" },
                    { name: 'rfidNo', index: 'rfidNo', width: 50, sorttype: "text" },
                    { name: 'description', index: 'description', width: 100, sortable: false }
                ],
                datatype: 'local',
                hidegrid: false,
                jsonReader: {
                    repeatitems: false
                },
                loadonce: true,
                multiselect: true,
                pgbuttons: false,
                pginput: false,
                rowNum: '',
                pager: '#ooTruckPager',
                sortable: false,
                viewrecords: true
            });

            // Add truck         
            addTruckData(-1, 0, "11111111111111111", "Make 1", "Model 1-1", "2009", "US", "WA", "1D1D1D", "", "Test truck 1");
            addTruckData(-1, 0, "22222222222222222", "Make 2", "Model 2-1", "2010", "US", "WA", "2A2A2A", "11111", "Test truck 2");
            addTruckData(-1, 0, "33333333333333333", "Make 2", "Model 2-2", "2011", "US", "WA", "3B3B3B", "", "Test truck 3");
            addTruckData(-1, 0, "44444444444444444", "Make 1", "Model 1-2", "2006", "US", "WA", "4C4C4C", "22222", "Test truck 4");
            addTruckData(-1, 0, "55555555555555555", "Make 3", "Model 3-1", "2003", "US", "WA", "5E5E5E", "", "Test truck 5");
        });

        function addTruckData(rowId, id, vin, make, model, year, country, state,
            plate, rfid, description) {

            var rowId = -1;
            var method = '';

            var truck = new truckData(-1, // rowId 
            id, vin, make, model, year, country,
            state, plate, rfid, description);

            if (_truckList.length > 0) {
                for (var xx = 0; xx < _truckList.length; xx++) {
                    if (_truckList[xx].vin == vin) {
                        // The vin is already in the list, update it.
                        rowId = _truckList[xx].rowId;
                        break;
                    }
                }
            }

            if (rowId == -1 && _truckList.length == 0) {
                _truckList = [truck];
                rowId = 0;
                method = 'addRowData';
            }
            else if (rowId == -1) {
                rowId = _truckList.length;
                _truckList.push(truck);
                method = 'addRowData';
            }
            else {
                _truckList[rowId] = truck;
                method = 'setRowData';
            }

            truck.rowId = rowId;
            result = $('#ooTruckGrid').jqGrid(method, rowId, truck.toJqGridData());
        }

        function truckData(rowId, truckId, vin, make, model, year, country, state, plateNum, description, rfid, truckType) {
            return {
                rowId: rowId,
                id: truckId,
                vin: $.trim(vin),
                make: make,
                model: model,
                year: year,
                plateCountry: country,
                plateState: state,
                plateNumber: $.trim(plateNum),
                description: $.trim(description),
                rfid: $.trim(rfid),
                truckType: truckType,
                toJqGridData: function () {
                    return { "id": this.id, 'action': '', 'vin': this.vin,
                        'plate': this.plateCountry + '-' + this.plateState + '-' +
                        this.plateNumber, 'make': this.make, 'model': this.model,
                        'year': this.year, 'rfidNo': this.rfid,
                        'description': this.description
                    };
                }
            };
        }
    </script>
</body>
</html>

If you go to that link, and then click on one of the headers, all of the data vanishes rather than sorting the grid.

Upvotes: 2

Views: 4253

Answers (2)

hitesh
hitesh

Reputation: 1

add the following line in jqgrid creation scope:

rowNum: 9007199254740992

this sets the maximum capacity for rows within jqgrid

Upvotes: -1

Oleg
Oleg

Reputation: 221997

The error, which produce disappearing of data on the column sorting, is the option rowNum: ''. If you don't need paging of data you should set some larger enough value for rowNum like rowNum: 10000. Such change will solve your main problem.

Your code have many other small errors or bad written parts which I want to mention:

  • You test page don't includes jquery-ui.css which is really important. On the other side you includes jquery-ui.js which is not needed for jqGrid. You should include it only if you use some jQuery UI functionality.
  • The addTruckData function contain rowId parameter, but you define local variable with the same name and assign the value var rowId = -1 later in the code. It's wrong of course.
  • You should include <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> in the page header.
  • You should remove deprecated language="javascript" attribute of <script>.
  • If you want have correct XHTML 1.0 Transitional page you should include an empty cell <tr><td/></tr> inside the <table> element. The empty cell will removed during jqGrid initialization.
  • You use < and & characters in the JavaScript code. So to have correct XHTML code you should modify the code or just include the line //<![CDATA[ at the beginning of the script and the line //]]> at it's end.
  • You should follow JavaScript standards for classes and remove function truckData to TruckData.
  • You should use the less global variable and global functions as possible. For example functions TruckData and addTruckData like the variable _truckList (better truckList) can be moved inside of $(document).ready(function () {/*here*/});
  • You should define variables before you use there. For example you use result without the definition. In the case result will be interpret as global variable and will be add as the property to the windows object.
  • You use datatype: "clientSide" and datatype: 'local' in the same grid. You should remove datatype: "clientSide".
  • You should remove loadonce: true because in case of datatype: 'local' it has no sense and will be ignored.
  • You should remove properties of colModel which are default like sorttype: "text" and remove jqGrid options which are also default like sortable: false. On the other side you can consider to include height: 'auto' parameter.
  • I recommend you to use JSLint to improve quality of your JavaScript code and use W3 validator to verify HTML markup.

I modified your page once to show how above changes could be done. The demo here has not JSLint or W3 validator errors.

Upvotes: 6

Related Questions