grid is not sorting

[MarinaParticipant]

I’m using grid on page and everything working fine, but sorting not working. Here is my code.
References in master page for grid

    <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.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>

asp.net.cs page has this code for grid

<div id="jqxgrid"  ></div>

javascript to get data and display in grid on page

////////////////////MESSAGES///////////////////////////////////////////////////////////////////

        function getRecentMessagesData() {

            var messagessource = {};
            $.ajax({
                type: 'POST',
                url: 'wsCallsAndMessages.asmx/GetMessages',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                datafields: [
                    { name: 'MessageID' },
                    { name: 'UserID' },
                    { name: 'CompanyName', type: 'string' },
                    { name: 'ShortMessageText' },
                    { name: 'UserName', type: 'string' },
                    { name: 'SubjectLine', type: 'string' },
                    { name: 'MessageStatus', type: 'string' },
                    { name: 'ModifiedByFlag', type: 'string' },
                    { name: 'ReceivedDisplayTime', type: 'date', format: 'MM/dd/yyyy hh:mm:ss tt' },
                    { name: 'MapColor' },
                     { name: 'PicIcon' },
                    { name: 'LocationEnabled' }

                    ],
                async: false,
                // cache: false,
                //data: '{CompanyID: ' + CompanyID + '}',
                id: 'MessageID',

                success: function (data) {

                    messagessource = $.parseJSON(data.d);

                },
                error: function (err) {
                    alert('Error');
                }
            });

            // create data adapter.perform Data Binding.
            if (messagessource == null) messagessource = "";
            return messagessource;
        }

        function getRecentMessages() {

            var source = getRecentMessagesData();
            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();
           

            //grid control
            $("#jqxgrid").jqxGrid(

            {
                width: '100%',
                source: dataAdapter,
                autoheight: true,
                sortable: true,
                //showsortmenuitems:false,
                filterable: false,
                selectionmode: 'none',
                pageable: true,
                pagesize: 20,
                altrows: true,
                theme: 'dpgray',
               
                columns: [
                  { text: 'Account', datafield: 'CompanyName', width: '15%' },
                  { text: 'User', datafield: 'UserName', width: '15%' },
                  { text: 'Subject Line', datafield: 'SubjectLine', width: '15%' },
                  { text: 'Text', datafield: 'ShortMessageText', width: '10%' },
                  { text: 'By', datafield: 'ModifiedByFlag', width: '10%' },
                  { text: 'Date And Time', datafield: 'ReceivedDisplayTime', width: '15%', cellsformat: 'MM/dd/yyyy hh:mm:ss tt'
                      , cellsrenderer:
                      function (row, column, value) {
                          var parsedDate = new Date(parseInt(value.substr(6)));
                          var formattedValue = $.jqx.dataFormat.formatdate(parsedDate, 'MM/dd/yyyy hh:mm:ss tt')
                          return formattedValue;
                      }

                  },
                  { text: 'Color', datafield: 'MapColor', width: '5%'
                   , cellsrenderer:
                      function (row, column, value) {

                          //return '<span style="margin: 4px; width: 5px; height: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;border-radius: 5px;  background:' + value + '; ">&nbsp;&nbsp;</span>';
                          return '<div class ="circle" style="color:' + value + '; background-color:' + value + '; ">' + '&nbsp;' + '</div>';
                      }

                  },
                  { text: 'Status', datafield: 'MessageStatus', width: '5%' },
                  { text: 'Pic', datafield: 'PicIcon', width: '5%'
                  , cellsrenderer:
                      function (row, column, value) {
                          
                          if (value == 1)
                              return '<div style="width: 100%"><img src="Images/pic.gif" style="margin-left: 25%" /></div>';
                          else
                              return '<div></div>';
                      }

                  },
                  { text: 'Loc', datafield: 'LocationEnabled', width: '5%'

                  , cellsrenderer:
                      function (row, column, value) {

                          if (value == 1)
                              return '<div style="width: 100%"><img src="Images/locpin.png" style="margin-left: 25%" /></div>';
                          else
                              return '<div></div>';
                      }

                  }
              ]

              });

            

          }

          /////////////////////////////////// END MESSAGES/////////////////////////////////////////////

I’m calling to display data in grid using getRecentMessages();
Do you see any issues??? Data displays correctly, but not sorting.

[MarinaParticipant]

any ideas?????

[mbizhaniParticipant]

Hi,

Based on what I got from PHP and Java examples of jQWidgets, the default sorting is done locally. To enable remote sorting, you should set sort function in the data source and in the set function, call $(‘#<id>’).jqxGrid(‘updatebounddata’, ‘sort’).

In example http://jspexamples.jqwidgets.com/examples/grid-sorting-paging-filtering.htm?arctic, the data source is as follows:

var source = {
datatype: “json”,
datafields: [{
name: ‘FirstName’,
type: ‘string’
}, {
name: ‘LastName’,
type: ‘string’
}, {
name: ‘Title’,
type: ‘string’
}, {
name: ‘BirthDate’,
type: ‘date’
}],
cache: false,
url: ‘jsp/select-filtered-data.jsp’,
filter: function() {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
sort: function() {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
beforeprocessing: function(data) {
if (data != null && data.length > 0) {
source.totalrecords = data[0].totalRecords;
}
}
};
var filterChanged = false;
var dataadapter = new $.jqx.dataAdapter(source, {
/*
// remove the comment to debug
formatData: function(data) {
alert(JSON.stringify(data));
return data;
},*/
downloadComplete: function(data, status, xhr) {
if (!source.totalRecords) {
source.totalRecords = data.length;
}
},
loadError: function(xhr, status, error) {
throw new Error(error);
}
});

[MarinaParticipant]

why do I need remote sorting and why default local sorting can’t be use in my case?

[mbizhaniParticipant]

In my case, I want remote pagination, and I also want remote sorting. At first settings, my sorting didn’t work either. After adding the mentioned sorting mechanism, my sorting worked. I thought you have the same problem. Sorry if I didn’t understand your problem correctly.

[MarinaParticipant]

in any case it did not help either. Still can’t make sorting working? Any other ideas anyone?

[Peter StoevKeymaster]

Hi Marina,

Your Grid data binding is incorrect. I would suggest you to look at our demos and documentation about jqxGrid in order to learn how to data bind it at first and then use it. The source object in your code is created incorrectly. The datafields are not created correctly, too because datatype is missing in some of them. It’s actually interesting that you see any data in the Grid with that binding.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts