[sun21170Participant]

Hi Peter,

I found the cause of the problem which was that Web Demos were showing up on my mobile device.

When I went to http://www.jqwidgets.com using Chrome browser on my Samsung Galaxy having Android version 4.2.1, then the mobile version of website rendered. I then clicked on the menu button in top right corner and then on Demos. This brought up the Web Demos and to make things more complex, the toolbar that says Mobile Demos etc. is so small that its impossible to notice. But after a lot of research I finally noticed Mobile Demos in very small font and when I clicked on it the Mobile Demos page rendered.

My suggestion is to make the toolbar font bigger so users can see easily, but the best option would be to automatically show Mobile demos when user selects Demos from menu on a mobile device. Right now its automatically showing Web demos on mobile device.

I am sure others may have run into a similar situation.

Thanks
Sunil

[sun21170Participant]

Hi Hristov,

Thanks for the sample with cellrendering.

I think if I wanted to show 3 items i.e. cards within each row, then I would use the beforeLoadComplete event of dataAdapter, in which I would create a new array in which each element would be an array of 3 items. Then in cell-rendering function I would have 3 items, which I could display in same row.

Thanks
Sunil

[sun21170Participant]

Hi Hristov,

There is an example that is very much like what I am wanting. Its the demo at this URL: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/index.htm?(arctic)#demos/jqxdatatable/javascript-datatable-rows-rendering.htm

Even though this demo of Row Template is for jqxdatatable, it should apply equally well to jqxgrid.

Thanks
Sunil

[sun21170Participant]

Hi Hristov,

After reading the cellrender example, it seems I will have to do the following to achieve the card layout.

• STEP 1: Have only one column in the grid and use a cellrenderer function for this column
• STEP 2: In the cellrenderer function, create a card view for each row by creating appropriate html with all values in the row that you want to show in the card view
• STEP 3: Add your styling to each card generated in step 2

The only challenge would be how to achieve a flow layout since each card would belong to a separate row if above steps are followed. May be after all the cellrender functions have been called, all cards would be need to be removed from the rows except first row, and then these cards would be appended to the first row/first cell. Finally all rows except the first would need to be removed.

jqxgrid seems like a very powerful widget.

Thanks
Sunil

[sun21170Participant]

Hi Hristo,

Thanks for your response.

I was looking for something different. For example, let’s say that the data source contains SalesOrderId, CustomerName, OrderDate and IsShipped. Normally, when using jqxgrid, we would see this datasource as rows and columns, where columns would be SalesOrderId, CustomerName, OrderDate and IsShipped. What I was looking at displaying each row as a rectangular block, with the header still being displayed as row of headings. For a page these rectangular blocks would show in a flow manner due to the style of display:inline-block for each rectangular block i.e. these rectangular blocks would be adjacent to each other. I am not sure if this is possible with jqxgrid.

<div style=’border:solid green 1px;display:inline-block;’>
SalesOrderId: 2456
CustomerName: Xyz Inc.
OrderDate:10/01/2015
IsShipped: Yes
</div>
<div style=’border:solid green 1px;display:inline-block;’>
SalesOrderId: 2000
CustomerName: NewLight Inc.
OrderDate:12/07/2015
IsShipped: No
</div>

You can see what card view would look like in screen shot below. Its very useful when displaying grid data on small screen devices like iPhone or Samsung Galaxy 3 etc.
http://screencast.com/t/KVgBw2A6jN

[sun21170Participant]

I hope someone had answered since the answer is too simple, so I could have been saved from hours of research.

The answer is : autoDropDownHeight for filter drop down should be set to false. I had the code below included in my page, which was setting autoDropDownHeight to true.

filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });

[sun21170Participant]

Is there a solution to the problem I described?

[sun21170Participant]

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

[sun21170Participant]

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.

[sun21170Participant]

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>

[sun21170Participant]

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?

[sun21170Participant]

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>

[sun21170Participant]

Hi Peter,

Could you please highlight what errors could result from my code? So far it’s been working well and as expected.
But I may have missed something since I am a new user of these controls.

Thanks
Sunil

[sun21170Participant]

Hi Peter,

I think there is. Please go to this URL in your demos: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/defaultfunctionality.htm

Then, select Redmond theme from the Theme drop-down and you will see chopped headers in IE 11 but nt i Firefox.

Thanks
Sunil

[sun21170Participant]

Hi Peter,

When I put the hide loading panel code in grid’s initialize event, then it does not work and the loading panel will then display many times even when total time taken is less than 400 ms.

Thanks
Sunil

[Author]

Posts