jQWidgets Forums

Tagged: double binding when filtering, grid with remote data

This topic contains 12 replies, has 4 voices, and was last updated by Peter Stoev 9 years, 5 months ago.

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

Author

Grid is binding twice when filtering on a page other than first page Posts

February 6, 2014 at 11:41 pm Grid is binding twice when filtering on a page other than first page #49100

Participant

I am binding a grid to remote data. The grid is paged, sortable and filterable.

But I am finding one strange thing- when filtering on page 2 or page 3 then the grid is calling the remote web service method twice, even though after the first call the filtered records have been retrieved.

Is this a bug or by design or I am missing something?

Thanks

February 7, 2014 at 9:26 am Grid is binding twice when filtering on a page other than first page #49124

Peter Stoev

Keymaster

Hi sun21170,

No, it’s not a bug. The Grid makes server calls on demand only after the developer calls its “updatebounddata” method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 8, 2014 at 2:17 am Grid is binding twice when filtering on a page other than first page #49144

sun21170

Participant

Hi Peter,

I am still not sure why jqxgrid needs to repeat a server call for getting filtered data even though the correct data has been returned after the first call. I am using code that is along same lines as the code in documentation for ASP.Net examples. No matter whether ‘updatebound’ is called or not, I think that jqxgrid should be intelligent enough to not send 2 server calls for the same filter request, and this should be built into the grid rather than having the developer provide some solution to prevent repeating the server call. To me that is not elegant.

Please take a look at this video: http://screencast.com/t/PtlySSzB4dwB

When I am on page 1, then on filtering only one server call is made, but if I go to page 2 and then try to filter, you will see in this video that ‘beforeSend’ event fires twice as two server calls are made one after the other for the same filter request. The second call is not needed.
My asp page code is as below.

Thanks

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqxGridExample.aspx.cs" Inherits="GridViewSamples.jqxGridExample" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-start.css" type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="perf" style="color: red; font-family: arial"></div>
            <div id="jqxgrid">
            </div>
        </div>
    </form>
    <script type="text/javascript">
        var startDate = new Date();
        var ti = null;

        function buildFilterObject(data) {
            if (data.filterscount == 0) {
                return { FilterColumns: null, FilterValues: null, FilterConditions: null, FilterOperators: null };
            }
            var filterColumns = new Array();
            var filterValues = new Array();
            var filterConditions = new Array();
            var filterOperators = new Array();
            var str = '';
            for (var prop in data) {
                if (data.hasOwnProperty(prop)) {
                    if (prop.indexOf('filterdatafield') === 0) {
                        filterColumns.push(data[prop]);
                    }
                    else if (prop.indexOf('filtervalue') === 0) {
                        filterValues.push(data[prop]);
                    }
                    else if (prop.indexOf('filtercondition') === 0) {
                        filterConditions.push(data[prop]);
                    }
                    else if (prop.indexOf('filteroperator') === 0) {
                        filterOperators.push(data[prop]);
                    }
                }
            }
            var filters = new Object();
            filters.FilterColumns = filterColumns;
            filters.FilterValues = filterValues;
            filters.FilterConditions = filterConditions;
            filters.FilterOperators = filterOperators;
            return filters;
        }
        function buildQueryString(data) {
            var str = '';
            for (var prop in data) {
                if (data.hasOwnProperty(prop)) {
                    str += prop + '=' + data[prop] + '&';
                }
            }
            return str.substr(0, str.length - 1);
        }
        $(document).ready(function () {
            source = {
                datatype: "json",
                datafields: [
                    { name: 'SalesOrderID', type: 'integer' },
                    { name: 'SalesOrderNumber', type: 'string' },
                    { name: 'CustomerID', type: 'integer' },
                    { name: 'PurchaseOrderNumber', type: 'string' },
                    { name: 'DueDate', type: 'date' },
                    { name: 'OrderDate', type: 'date' }
                ],
                formatdata: function (data) {
                    data.sortdatafield = data.sortdatafield || '';
                    data.sortorder = data.sortorder || '';
                    var filters = buildFilterObject(data);
                    return JSON.stringify({ pagenum: data.pagenum, pagesize: data.pagesize, sortdatafield: data.sortdatafield, sortorder: data.sortorder, filterscount: data.filterscount, filtercolumns: filters.FilterColumns, filtervalues: filters.FilterValues, filterconditions: filters.FilterConditions, filteroperators: filters.FilterOperators });
                },
                sort: function () {
                    $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
                },
                filter: function () {
                    $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
                },
                id: 'SalesOrderID',
                url: 'WebService1.asmx/GetSalesOrders3',
                type: 'POST'
            };
            var dataAdapter = new $.jqx.dataAdapter(source,
                                                    {
                                                        contentType: 'application/json; charset=utf-8',
                                                        loadError: function (jqXHR, status, error) {
                                                            alert(error);
                                                        },
                                                        downloadComplete: function (data, status, xhr) {
                                                            // update the totalrecords count.
                                                            source.totalrecords = data.d.Count;
                                                            return data.d.Data;
                                                        },
                                                        beforeSend: function (jqXHR, settings) {
                                                            alert('before Send')
                                                        }
                                                    }
                );
            $("#jqxgrid").jqxGrid({
                theme: 'ui-start',
                width: 740,
                source: dataAdapter,
                pageable: true,
                sortable: true,
                filterable: true,
                autoheight: true,
                virtualmode: true,
                rendergridrows: function (args) {
                    return args.data;
                },
                columns: [
                    { text: 'Sales Order ID', dataField: 'SalesOrderID', width: 120 },
                    { text: 'Sales Order Number', dataField: 'SalesOrderNumber', width: 120 },
                    { text: 'Purchase Order Number', dataField: 'PurchaseOrderNumber', width: 120 },
                    { text: 'Customer ID', dataField: 'CustomerID', width: 120 },
                    { text: 'Order Date', dataField: 'OrderDate', width: 130, cellsformat: 'MM-dd-yyyy' },
                    { text: 'Due Date', dataField: 'DueDate', width: 130, cellsformat: 'MM-dd-yyyy' }
                ],
                ready: function () {

                    var localizationObject = {
                        filterstringcomparisonoperators: ['contains', 'does not contain'],
                        // filter numeric comparison operators.
                        filternumericcomparisonoperators: ['less than', 'greater than'],
                        // filter date comparison operators.
                        filterdatecomparisonoperators: ['less than', 'greater than'],
                        // filter bool comparison operators.
                        filterbooleancomparisonoperators: ['equal', 'not equal']
                    }
                    $("#jqxgrid").jqxGrid('localizestrings', localizationObject);
                },
                updatefilterconditions: function (type, defaultconditions) {
                    var stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN'];
                    var numericcomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
                    var datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
                    var booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
                    switch (type) {
                        case 'stringfilter':
                            return stringcomparisonoperators;
                        case 'numericfilter':
                            return numericcomparisonoperators;
                        case 'datefilter':
                            return datecomparisonoperators;
                        case 'booleanfilter':
                            return booleancomparisonoperators;
                    }
                    //alert('2');
                },
                updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
                 columnfilter, filtertype, filterconditions) {
                    var index1 = 0;
                    var index2 = 0;
                    if (columnfilter != null) {
                        var filter1 = columnfilter.getfilterat(0);
                        var filter2 = columnfilter.getfilterat(1);
                        if (filter1) {
                            index1 = filterconditions.indexOf(filter1.comparisonoperator);
                            var value1 = filter1.filtervalue;
                            filterinputfield1.val(value1);
                        }
                        if (filter2) {
                            index2 = filterconditions.indexOf(filter2.comparisonoperator);
                            var value2 = filter2.filtervalue;
                            filterinputfield2.val(value2);
                        }
                    }
                    filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
                    filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
                },
            });
            $('#jqxgrid').on('bindingcomplete', function (event) {
                var endDate = new Date();
                $('#perf').html((endDate.getTime() - startDate.getTime()) + " milliseconds");
            });
            $('#jqxgrid').on('pagechanged', function (event) {
                startDate = new Date();
            });
            $('#jqxgrid').on('pagesizechanged', function (event) {
                startDate = new Date();
            });
            $('#jqxgrid').on('sort', function (event) {
                startDate = new Date();
            });
            $('#jqxgrid').on('filter', function (event) {
                startDate = new Date();
            });
        });
    </script>
</body>
</html>

February 8, 2014 at 7:25 am Grid is binding twice when filtering on a page other than first page #49148

sun21170

Participant

You said: “The Grid makes server calls on demand only after the developer calls its “updatebounddata” method.”

Then, can you point out where in my code am I calling ‘updatebounddata’ twice on filtering. I can only see it being called once. So it looks like a bug unless you can show where is a double call to updatebounddata?

February 8, 2014 at 6:41 pm Grid is binding twice when filtering on a page other than first page #49153

sun21170

Participant

I found a hack to overcome the problem of double binding when filtering on a page greater than 1, but it is not impressive and it lowers developer productivity, if a developer has to provide hacks to solve issues with the widget.
I use a flag called ‘x’ and abort ‘beforeSending’ event when binding for a second time during filtering.
If this is what I have to do to be able use jqxGrid, then my productivity is going to be very bad. This is my opinion.
It would have been better if you could have at least pointed out where in my code updatebound is being called twice. I am not sure if I can use your widgets with this type of support.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqxGridExample.aspx.cs" Inherits="GridViewSamples.jqxGridExample" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-start.css" type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="perf" style="color: red; font-family: arial"></div>
            <div id="jqxgrid">
            </div>
        </div>
    </form>
    <script type="text/javascript">
        var startDate = new Date();
        var ti = null;
        var x = 0;
        function getDataType(columnName)
        {
            if (columnName === 'SalesOrderID')
            {
                return 'number';
            } else if (columnName === 'SalesOrderNumber') {
                return 'string';
            }
            else if (columnName === 'CustomerID') {
                return 'number';
            } else if (columnName === 'PurchaseOrderNumber') {
                return 'string';
            } else if (columnName === 'OrderDate') {
                return 'date';
            }
              else if (columnName === 'DueDate') {
                return 'date';
            }

        }
        function buildFilterObject(data) {
            if (data.filterscount == 0) {
                return { FilterColumns: null, FilterValues: null, FilterConditions: null, FilterOperators: null, DataTypes:null };
            }
            var filterColumns = new Array();
            var filterValues = new Array();
            var filterConditions = new Array();
            var filterOperators = new Array();
            var dataTypes = new Array();
            var str = '';
            
            for (var prop in data) {
                if (data.hasOwnProperty(prop)) {
                    if (prop.indexOf('filterdatafield') === 0) {
                        filterColumns.push(data[prop]);
                        dataTypes.push(getDataType(data[prop]));
                    }
                    else if (prop.indexOf('filtervalue') === 0) {
                        filterValues.push(data[prop]);
                    }
                    else if (prop.indexOf('filtercondition') === 0) {
                        filterConditions.push(data[prop]);
                    }
                    else if (prop.indexOf('filteroperator') === 0) {
                        filterOperators.push(data[prop]);
                    }
                }
            }
            var filters = new Object();
            filters.FilterColumns = filterColumns;
            filters.FilterValues = filterValues;
            filters.FilterConditions = filterConditions;
            filters.FilterOperators = filterOperators;
            filters.DataTypes = dataTypes;
            return filters;
        }
        function buildQueryString(data) {
            var str = '';
            for (var prop in data) {
                if (data.hasOwnProperty(prop)) {
                    str += prop + '=' + data[prop] + '&';
                }
            }
            return str.substr(0, str.length - 1);
        }
        $(document).ready(function () {
            source = {
                datatype: "json",
                datafields: [
                    { name: 'SalesOrderID', type: 'number' },
                    { name: 'SalesOrderNumber', type: 'string' },
                    { name: 'CustomerID', type: 'number' },
                    { name: 'PurchaseOrderNumber', type: 'string' },
                    { name: 'DueDate', type: 'date' },
                    { name: 'OrderDate', type: 'date' }
                ],
                formatdata: function (data) {
                    data.sortdatafield = data.sortdatafield || '';
                    data.sortorder = data.sortorder || '';
                    var filters = buildFilterObject(data);
                    if (filters != null) {
                        filtering = true;
                    }
                    return JSON.stringify({ pagenum: data.pagenum, pagesize: data.pagesize, sortdatafield: data.sortdatafield, sortorder: data.sortorder, filterscount: data.filterscount, filtercolumns: filters.FilterColumns, filtervalues: filters.FilterValues, filterconditions: filters.FilterConditions, filteroperators: filters.FilterOperators, dataTypes: filters.DataTypes });
                },
                sort: function () {
                    $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
                },
                filter: function () {
                    x = 5;
                    $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
                },
                id: 'SalesOrderID',
                url: 'WebService1.asmx/GetSalesOrders3',
                type: 'POST'
            };
            var dataAdapter = new $.jqx.dataAdapter(source,
                                                    {
                                                        contentType: 'application/json; charset=utf-8',
                                                        loadError: function (jqXHR, status, error) {
                                                            alert(error);
                                                        },
                                                        downloadComplete: function (data, status, xhr) {
                                                            // update the totalrecords count.
                                                            source.totalrecords = data.d.Count;
                                                            return data.d.Data;
                                                        },
                                                        beforeSend: function (jqXHR, settings) {
                                                            x = x + 1;
                                                             if (x === 7) {
                                                                    jqXHR.abort();
                                                                    return;
                                                             }
                                                        }
                                                    }
                );
            $("#jqxgrid").jqxGrid({
                theme: 'ui-start',
                width: 740,
                source: dataAdapter,
                pageable: true,
                sortable: true,
                filterable: true,
                autoheight: true,
                virtualmode: true,
                rendergridrows: function (args) {
                    return args.data;
                },
                updatefilterconditions: function (type, defaultconditions) {
                    var stringcomparisonoperators = ['EMPTY', 'NOT_EMPTY', 'CONTAINS', 
                    'DOES_NOT_CONTAIN',  'STARTS_WITH', 
                    'ENDS_WITH', 'EQUAL', 'NULL', 'NOT_NULL'];
                    var numericcomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'];
                    var datecomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'];
                    var booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
                    switch (type) {
                        case 'stringfilter':
                            return stringcomparisonoperators;
                        case 'numericfilter':
                            return numericcomparisonoperators;
                        case 'datefilter':
                            return datecomparisonoperators;
                        case 'booleanfilter':
                            return booleancomparisonoperators;
                    }
                },
                
                updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
               columnfilter, filtertype, filterconditions) {
                    var index1 = 0;
                    var index2 = 0;
                    if (columnfilter != null) {
                        var filter1 = columnfilter.getfilterat(0);
                        var filter2 = columnfilter.getfilterat(1);
                        if (filter1) {
                            index1 = filterconditions.indexOf(filter1.comparisonoperator);
                            var value1 = filter1.filtervalue;
                            filterinputfield1.val(value1);
                        }
                        if (filter2) {
                            index2 = filterconditions.indexOf(filter2.comparisonoperator);
                            var value2 = filter2.filtervalue;
                            filterinputfield2.val(value2);
                        }
                    }
                    filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
                    filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
                },
                columns: [
                    { text: 'Sales Order ID', dataField: 'SalesOrderID', width: 120 },
                    { text: 'Sales Order Number', dataField: 'SalesOrderNumber', width: 120 },
                    { text: 'Purchase Order Number', dataField: 'PurchaseOrderNumber', width: 120 },
                    { text: 'Customer ID', dataField: 'CustomerID', width: 120 },
                    { text: 'Order Date', dataField: 'OrderDate', width: 130, cellsformat: 'MM-dd-yyyy' },
                    { text: 'Due Date', dataField: 'DueDate', width: 130, cellsformat: 'MM-dd-yyyy' }
                ]
            });
            $('#jqxgrid').on('bindingcomplete', function (event) {
                var endDate = new Date();
                $('#perf').html((endDate.getTime() - startDate.getTime()) + " milliseconds");
                x = 0;
            });
            $('#jqxgrid').on('pagechanged', function (event) {
                startDate = new Date();
                x = 0;
            });
            $('#jqxgrid').on('pagesizechanged', function (event) {
                startDate = new Date();
                x = 0;
            });
            $('#jqxgrid').on('sort', function (event) {
                startDate = new Date();
                x = 0;
            });
            $('#jqxgrid').on('filter', function (event) {
                x = 0;
                startDate = new Date();
            });
        });
    </script>
</body>
</html>

February 8, 2014 at 9:28 pm Grid is binding twice when filtering on a page other than first page #49165

sun21170

Participant

Hi Peter,
After debugging the code in IE, I found that two calls are made because:
1) The developer calls updatebounddata in code below, which is fine and needed for server-side filtering to work. This is unavoidable.

filter: function () {
                    $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
                }

2)An internal call from jqxgrid is made for updatebounddata(‘pagechanged’).

So, its wrong for you to say that developer is making calls to updatebounddata twice as only one call from developer’s side is being made. The second call is made by the widget and the widget should be intelligent enough to not make a second call in this case.

You had said: The Grid makes server calls on demand only after the developer calls its “updatebounddata” method, when the second call was coming from the widget and not from the developer.

February 8, 2014 at 9:43 pm Grid is binding twice when filtering on a page other than first page #49168

Peter Stoev

Keymaster

Hi Sunil,

Sorry, I am human and sometimes I make mistakes. I confirm that I made a mistake and I am very sorry about that! May be the Grid really has one unnecessary call and may be it requires some improvements in that direction. I don’t know that. I will report it to the Developers.

Best Regards,
Peter Stoev

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

February 8, 2014 at 10:04 pm Grid is binding twice when filtering on a page other than first page #49170

sun21170

Participant

Hi Peter,

Thanks for your response at last. I hope your support doesn’t take this long, if I buy jqwidget controls.
This bug/problem is invisible to most developers, but if the developer is very detailed then this will get noticed.
In my case, when I used the flag approach to prevent the duplicate call, I doubled the performance of my grid, which means a lot to me, and I am sure to all developers using jqxgrid.

Thanks
Sunil

November 13, 2015 at 8:17 am Grid is binding twice when filtering on a page other than first page #78087

kgolofelos

Participant

Hi Peter,

I seemed to be experiencing the same issue and applied the same hack. After clicking the filter button, the grid performs one ajax call with the filter variables in the request and immediately performs another UNEXPECTED ajax call without the filter variables in the request. This causes the grid not to display filtered results as the second ajax call overrides the first ajax call:

First ajax call:
index.php?r=log%2Fvisitor&ajax=1&action=view&terminal_id=96&create_dateoperator=and&filtervalue0=2015-11-10+00%3A00%3A00&filtercondition0=EQUAL&filteroperator0=0&filterdatafield0=create_date&filterscount=1&groupscount=0&pagenum=0&pagesize=15&recordstartindex=0&recordendindex=15&_=1447402196211

Second ajax call:
index.php?r=log%2Fvisitor&ajax=1&action=view&terminal_id=96&filterscount=0&groupscount=0&pagenum=0&pagesize=15&recordstartindex=0&recordendindex=15&_=1447402196633

Here is my code:

var url = “index.php?r=log%2Fvisitor&ajax=1&action=view”+”&is_export=”+is_export+”&terminal_id=”+id;

// prepare the data
var source =
{
datatype: “json”,
filter: function () {
// update the grid and send a request to the server.
x = 5;
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
sort: function () {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
},
id: ‘id’,
url: url,
root: ‘data’,
beforeprocessing: function(data)
{
source.totalrecords = data.TotalRows;
source.displayfields= data.fields;
}
};

// Populate grid with fields
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
// HACK FIX
x = x + 1;
if (x > 2) {
$(“#jqxgrid”).jqxGrid();
jqXHR.abort();
return;
}

displayfields = source.displayfields;

// ID, Site Name, Terminal Name, Log Date and DB Creation Date are standard
field_count=5;
var fields = [
{ text: ‘ID’, dataField: ‘visitor_log_id’ , width: 70},
{ text: ‘Site Name’, dataField: ‘name’, width: 100},
{ text: ‘Terminal Name’, dataField: ‘terminal_txt’, width: 100},
{ text: ‘Log Date’, dataField: ‘log_create_date’, filtertype: ‘date’, cellsformat:’yyyy-MM-dd HH:mm:ss’, width: 150},
{ text: ‘DB Creation Date’, dataField: ‘create_date’,filtertype: ‘date’, cellsformat:’yyyy-MM-dd HH:mm:ss’, width: 150} ];

// Populatate dynamic fields
for(var key in displayfields) {
var value = displayfields[key];
fields[field_count] = {text: displayfields[key], dataField: key, width: 100};
field_count++;
}

// Populate all fields to grid
$(“#jqxgrid”).jqxGrid({columns: fields});
},
downloadComplete: function () {

},
beforeSend: function (jqXHR, settings) {

}
}
);

// Draw empty grid
drawgrid(dataAdapter);

function drawgrid(dataAdapter){
var $window = $(window);
var height = $window.height() – 345;

$(“#jqxgrid”).jqxGrid(
{
width: ‘99%’,
height: height,
source: dataAdapter,
altrows: true,
pageable: true,
sortable: true,
filterable: true,
columnsresize: true,
virtualmode: true,
theme: ‘energyblue’,
selectionmode: ‘multiplecellsextended’,
pagesize: 15,
pagesizeoptions: [’10’,’20’,’30’,’40’,’50’,’100′,’1000′,’2000′],
rendergridrows: function()
{
return dataAdapter.records;
},

});

$(“#excelExport”).jqxButton();
}

Regards
KG

December 15, 2015 at 7:51 am Grid is binding twice when filtering on a page other than first page #79303

vikram

Participant

Hi Peter Stoev i am getting same error. Ajax request called twice.
Did you solved this bug in new version ??
Thanks.

December 15, 2015 at 8:49 am Grid is binding twice when filtering on a page other than first page #79309

Peter Stoev

Keymaster

Hi vikram,

We do not consider this to be a bug so there are no changes.

Best Regards,
Peter Stoev

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

December 15, 2015 at 9:46 am Grid is binding twice when filtering on a page other than first page #79313

vikram

Participant

Hello Peter Please verify this link . When i click on filter reset then grid bound call only one ajax request . But when i call externally filter request its call ajax request twice..
Here is video link..

And here is my code

var source =
{
datatype: “json”,
datafields: [
{name: ‘path’, type: ‘string’},
{name: ‘name’, type: ‘string’},
{name: ‘surname’, type: ‘string’},
{name: ‘age’, type: ‘string’},
{name: ‘business’, type: ‘string’},
{name: ‘blood_group’, type: ‘string’},
{name: ‘mobile’, type: ‘string’},
{name: ’email’, type: ‘string’},
{name: ‘pincode’, type: ‘string’},
{name: ‘familyid’, type: ‘string’}

],
cache: false,
url: ‘datatableajax’,
filter: function ()
{
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
alert(‘data filtrt’);
},
sort: function ()
{
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
root: ‘Rows’,
beforeprocessing: function (data)
{
if (data != null)
{
source.totalrecords = data[0].TotalRows;
}
}
};

},
downloadComplete:function (jqXHR, settings) {

}

}
);

var render = function (row, datafield, value) {
var img = (value == “”) ? ‘default.png’ : value;
return ‘‘;
};

var links = function (row, datafield, value) {

var link = value;
return ‘<div class=”action”>{% if (app.user == ‘admin’ or app.user == ‘guest’ or app.user == ‘andheri’ ) %}<i class=”fa fa-pencil-square-o”></i>{% endif %}\n\
<i class=”fa fa-th-list”></i></div>’;

};
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
source: dataadapter,
width: ‘1140’,
autoheight: true,
autorowheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function (obj)
{
return obj.data;
},
columns: [
{text: ‘Preview’, datafield: ‘path’, width: 60, cellsrenderer: render},
{text: ‘Name’, datafield: ‘name’, width: 120},
{text: ‘Surname’, datafield: ‘surname’, width: 120},
{text: ‘Age’, datafield: ‘age’, width: 50},
{text: ‘Business’, datafield: ‘business’, width: 150},
{text: ‘Blood Group’, datafield: ‘blood_group’, width: 90},
{text: ‘Mobile’, datafield: ‘mobile’, width: 100},
{text: ‘Email’, datafield: ’email’, width: 250},
{text: ‘Area pincode’, datafield: ‘pincode’, width: 100},
{text: ‘Action’, datafield: ‘familyid’, width: 100, cellsrenderer: links}