jqxgrid sorting issue

[jsoniParticipant]

First of all, Million thanks to you for this great plugin.

I am having trouble to get sort columns work. Everything is good but this error on console

Error: jqxGrid: Missing references to the following module(s): jqxgrid.sort.js

...etHeight)-8)/2;if(Q&&u){var f=(w.height-w.rowdetailsheight-b(I.firstChild).heigh...

So not sure why it is showing this? I have included all required js files including menu js as well.

FYI, I am using PHP, MySQL

Could you please help me to sort this out?

[Peter StoevKeymaster]

Hi jsoni,

In order to use Sorting, you have to add reference to jqxgrid.sort.js as it is shown in the Demos & Documentation. You will have to add references to additional files as well. Look at: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-getting-started.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jsoniParticipant]

Hello,
Thanks for the quick response.

I have added all require files. This is also happening with Filtering. So just wonder what I am doing wrong!

Since I am following the same trend as your documentation. I have query file which is referring in javascript url: params and on the same php page I have the markup to render the grid.

Here is my full code

<script type='text/javascript' src='http://192.168.0.107/housefax/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxcore.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxdata.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxbuttons.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxscrollbar.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxmenu.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxlistbox.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxdropdownlist.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.selection.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.columnsresize.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.filter.js.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.sort.js.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.pager.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.grouping.js?ver=1.0'></script>

HTML Element

<div class="table-responsive">
    <div id="jqxgrid">
    </div>
</div>

Javascript on the same php page

<script type="text/javascript">

    jQuery(document).ready(function() {

        var url = '<?php echo abcd_root_url('abcd_core/data_source/data_daily_reports.php'); ?>';
        var theme = 'bootstrap';
        // prepare the data
        var source =
                {
                    datatype: "json",
                    datafields: [
                        {name: 'id', type: 'intiger'},
                        {name: 'date', type: 'date'},
                        {name: 'chats_init_customer', type: 'intiger'}
                    ],
                    url: url,
                    filter: function() {
                        // update the grid and send a request to the server.
                        $("#jqxgrid").jqxGrid('updatebounddata');
                    },
                    root: 'Rows',
                    //cache: false,
                    beforeprocessing: function(data) {
                        source.totalrecords = data[0].TotalRows;
                    }
                };

        var dataAdapter = new jQuery.jqx.dataAdapter(source, {
            loadError: function(xhr, status, error) {
                alert(error);
            }
        });
        //var dataAdapter = new jQuery.jqx.dataAdapter(source);
        jQuery("#jqxgrid").jqxGrid(
                {
                    columnsresize: true,
                    source: dataAdapter,
                    width: 1170,
                    theme: theme,
                    autoheight: true,
                    filterable: true,
                    pageable: true,
                    virtualmode: true,
                    //sortable: true,
                    rendergridrows: function() {
                        return dataadapter.records;
                    },
                    columns: [
                        {text: 'ID', datafield: 'id'},
                        {text: 'Date', datafield: 'date'},
                        {text: 'Chats Init Customer', datafield: 'chats_init_customer'}
                    ]
                });

    });

</script>

Query Code in different file

$pagenum  = $_GET['pagenum'];
$pagesize = $_GET['pagesize'];
$start    = $pagenum * $pagesize;
$query    = "SELECT SQL_CALC_FOUND_ROWS * FROM hf_abcd_daily_report LIMIT $start, $pagesize";
if (isset($_GET['sortdatafield'])) {
$sortfield  = $_GET['sortdatafield'];
$sortorder  = $_GET['sortorder'];
$result     = mysql_query($query) or die("SQL Error 1: " . mysql_error());
$sql        = "SELECT FOUND_ROWS() AS <code>found_rows</code>;";
$rows       = mysql_query($sql);
$rows       = mysql_fetch_assoc($rows);
$total_rows = $rows['found_rows'];

if ($sortfield != NULL) {

if ($sortorder == "desc") {
$query = "SELECT * FROM hf_abcd_daily_report ORDER BY" . " " . $sortfield . " DESC LIMIT $start, $pagesize";
} else if ($sortorder == "asc") {
$query = "SELECT * FROM hf_abcd_daily_report ORDER BY" . " " . $sortfield . " ASC LIMIT $start, $pagesize";
}
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
}
} else {
$result     = mysql_query($query) or die("SQL Error 1: " . mysql_error());
$sql        = "SELECT FOUND_ROWS() AS <code>found_rows</code>;";
$rows       = mysql_query($sql);
$rows       = mysql_fetch_assoc($rows);
$total_rows = $rows['found_rows'];
}

while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$customers[] = array(
'id'                  => $row['id'],
'date'                => $row['date'],
'chats_init_customer' => $row['chats_init_customer']
);
}
$data[] = array(
'TotalRows' => $total_rows,
'Rows'      => $customers
);
echo json_encode($data);

I am able to render grid without sorting and filtering

Hope this will helps you to find what I am doing wrong.

[Peter StoevKeymaster]

Hi jsoni,

jqxgrid.sort.js.js should be changed to jqxgrid.sort.js according to me. The same is valid for jqxgrid.filter.js.js

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jsoniParticipant]

Okay I found stupid issue it was two time .js.js for both files. Now but after fixing this I got the block but data still not loading and always shows the loading image.

Any idea please?

[Peter StoevKeymaster]

Hi jsoni,

 rendergridrows: function() {
                        return dataadapter.records;
    },

is using undefined variable called “dataadapter”. As far as I see from your code it should be: “dataAdapter”.

I suggest you to read the Getting Started help topic about using jqxGrid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jsoniParticipant]

Okay thanks a lot…… I found it and fixed it. But now filter doesn’t take effect. Means when I add value and hit filter button, nothing happen. It is not filtering anything.

Any idea?

[Peter StoevKeymaster]

Hi jsoni,

In Server Paging mode, you should use Server Filtering and Server Sorting. You may find such demo available online in the PHP Integration demo section or in the help documentation, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jsoniParticipant]

Hi Peter,

Sorry for being delay,

Yes I am using Paging mode. I have followed your documentation and written code what I have posted above. Do I need to write anything extra than this?

[Peter StoevKeymaster]

Hi jsoni,

Here’s a sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering_paging_and_sorting.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[joppy20032001Participant]

Hi,

I got an issue rendering the grid when using sorting.
I’m creating a cell coloring when rendering on the grid and the first load it’s working ok but if I sorted it the color is not following the right condition.My condition is if I got like 1111 in the row value in first column then I will show red and 2222 for orange something like that but when I click the sorting then the color is not going to the right cells.

[joppy20032001Participant]

this is my sample code for the coloring the cell

$(“#jqxgridPolicyHeader”).jqxGrid(
{
width: 1800,
height: 850,
rowsheight: 25,
source: adapterPolicyHeader,
pageable: true,
altrows: true,
showfilterrow: true,
filterable: true,
sortable: true,
pagesizeoptions: [’25’, ’50’, ‘100’],
pagesize: 20,
theme: ‘energyblue’,
rendergridrows: function () {
return adapterPolicyHeader.records;
},
//rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 200, rowdetailshidden: true },
columns: [
{ text: ‘Status ‘, dataField: ‘StatusCdId’, width: 200, cellsrenderer: headerRenderer, columntype: ‘textbox’, filtertype: ‘number’, pinned: true },
{ text: ‘Header Id’, dataField: ‘PolicyHeaderId’, width: 200, cellsrenderer: headerRenderer, columntype: ‘textbox’, filtertype: ‘number’, pinned: true },
{ text: ‘Policy No’, dataField: ‘PolicyNo’, width: 200, cellsrenderer: headerRenderer, columntype: ‘textbox’, filtertype: ‘number’, pinned: true },
{ text: ‘Effective Date’, dataField: ‘PolicyEffectiveDt’, width: 200, cellsrenderer: headerRenderer, columntype: ‘textbox’, filtertype: ‘input’, pinned: true },
{ text: ‘Expiration Date’, dataField: ‘PolicyExpirationDt’, width: 200, cellsrenderer: headerRenderer, columntype: ‘textbox’, filtertype: ‘input’ },
{ text: ‘Earnings Days’, dataField: ‘PolicyEarningsDays’, width: 200, cellsrenderer: headerRenderer, columntype: ‘textbox’, filtertype: ‘number’ },
{ text: ‘Insured Names’, dataField: ‘InsuredNm’, width: 200, cellsrenderer: headerRenderer, columntype: ‘textbox’, filtertype: ‘input’}]
});

var headerRenderer = function (row, column, value, defaultHtml) {
var rows = $(“#jqxgridPolicyHeader”).jqxGrid(‘getrows’);
var defaultRow = rows[0];
var firstRow = rows[row];
getDefaultHtml = defaultHtml
var getstatusimg = ”;
var cellValue1 = ”;
if (value == ” || value == null) {
var getDefaultHtml = defaultHtml.replace(“</div>”, “&nbsp</div>”)
}
var element = $(getDefaultHtml);
if (firstRow === undefined && defaultRow === null) {
return ‘<div id=”statusRefresh” class=”default”> </div> ‘;
}
else {
if (firstRow === undefined && defaultRow !== null) {
cellValue1 = firstRow.StatusCdId;
} if (firstRow !== undefined && defaultRow !== null) {
cellValue1 = firstRow.StatusCdId;
}
// 1
if (cellValue1 == 43744) {
getstatusimg = ‘<div id=”ib’ + row + ‘” ><span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span> </div> ‘;
}
// 2
else if (cellValue1 == 1111) {
element.css({ ‘background-color’: ‘red’,’color’: ‘white’});
getstatusimg = element[0].outerHTML;
}
// 3
else if (cellValue1 == 2222) {
getstatusimg = ‘<div id=”ib’ + row + ‘” ><span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span> </div> ‘;
}
return getstatusimg;
}
};

[Peter StoevKeymaster]

Hi joppy20032001,

The coloring login is inside custom function so it depends only on your own logic which cells will be colored. This does not depend on us.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[joppy20032001Participant]

but my error is not on the logic. I created a cellsrenderer but if I do sorting does render stays in the same rows. like for example i have a custom buttons and when I render.. say the button is in 3rd rows.. when I sorted the button is still there and it should be in last row or something because it should follow the data. i think the error occurs when we use the sorting.

[Peter StoevKeymaster]

Hi joppy20032001,

The result of the custom defined cellsrenderer function is displayed on the screen. If what’s displayed on the screen is not what you expect, then I suggest you to check the implementation of the function which you wrote. This does not depend on sorting, filtering or anything else. The cell’s value is passed as function argument and depending on that cell value you should return appropriate HTML String to be displayed in the cell.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts