jQWidgets Forums

jQuery UI Widgets Forums Grid Issues with jqGrid

This topic contains 3 replies, has 3 voices, and was last updated by  Peter Stoev 11 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Issues with jqGrid #12932

    FirmTel
    Member

    Hello,

    We have multiple issues with jqGrid functionality.

    1. We have implemented filter row functionality. The problem is in that when you are trying to use drop down filter, you have to select it twice, before it will filter data as you expect.

    2. Subsequent filtering doesn’t work as expected. When first select on a dropdown value (grid refreshes with data matching the selection) followed by a filter value in one of the input fields the chosen dropdown value is lost. And the filter you’ve given is lost too.

    3. When we are filtering on some column, first column  become highlighted together with column you are filtering on, like you do a filter on both columns.

    4. The selected value of a dropdown list is not ‘remembered’ after the grid has reloaded with the filtered results.

    All results from out backend are correct. All issues appear on UI.

    Code we are using:

            var source =
                {
                    datatype: “json”,
                    datafields: [
                         { name: ‘Company’ },
                         { name: ‘ICCID’ },
                         { name: ‘MSISDN’ },
                         { name: ‘SubscriptionID’ },
                         { name: ‘CompanyName’ },
                         { name: ‘UserName’ },
                         { name: ‘UserDepartment’ },
                         { name: ‘MxNENAme’ },
                         { name: ‘State’ }
                    ],
                    id: ‘SubscriptionID’,
                    root: ‘Rows’,
                    url: ‘Subscription/GetSubscriptionsListByXsp’,
                    sort: function () {
                        $(“#jqxgrid”).jqxGrid(‘updatebounddata’);
                    },
                    filter: function () {
                        $(“#jqxgrid”).jqxGrid(‘updatebounddata’);
                    },
                    beforeprocessing: function (data) {
                        source.totalrecords = data.TotalRows;
                    }
                };
     
            var dataadapter = new $.jqx.dataAdapter(source);
     
            var actionsrenderer = function (row, column, value) {
                var state = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row)[“State”];
                var html = ‘<center><div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”><a id=”action” href=”#” onclick=”return menu(‘ + state + ‘, ‘ + value + ‘);”>[Actions]</a></div></center>’;
                return html;
            };
     
            function stateFormatter(row, column, value) {
                var template = ‘<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>{0}</div>’;
                switch (cellvalue) {
                    case 1:
                        return template.replace(‘{0}’, ‘Suspended’);
                    case 3:
                        return template.replace(‘{0}’, ‘Blocked’);
                    case 4:
                        return template.replace(‘{0}’, ‘Active’);
                    case 5:
                        return template.replace(‘{0}’, ‘Porting’);
                    default:
                        return template.replace(‘{0}’, ‘Unknown’);
                }
            }
     
            // initialize jqxGrid
            $(“#jqxgrid”).jqxGrid(
                {
                    width: 910,
                    height: 350,
                    source: dataadapter,
                    theme: theme,
                    sortable: true,
                    filterable: true,
                    pagesize: 20,
                    pageable: true,
                    pagesizeoptions: [’20’, ’50’, ‘100’],
                    virtualmode: true,
                    autoheight: true,
                    columnsresize: true,
                    showfilterrow: true,
                    rendergridrows: function () {
                        return dataadapter.records;
                    },
                    columns: [
                  { text: ‘ICCID’, datafield: ‘ICCID’, width: 150, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’ },
                  { text: ‘MSISDN’, datafield: ‘MSISDN’, width: 100, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’ },
                  { text: ‘Network’, datafield: ‘MxNENAme’, width: 80, filtertype: ‘list’, filteritems: [@Html.Raw(ViewBag.MxNEs)] },
                  { text: ‘Status’, datafield: ‘State’, width: 100, filtertype: ‘list’, cellsrenderer: stateFormatter, filteritems: [‘Active’, ‘Porting’, ‘Blocked’, ‘Suspended’] },
                  { text: ‘Company name’, datafield: ‘CompanyName’, width: 140, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’ },
                  { text: ‘User name’, datafield: ‘UserName’, width: 140, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’ },
                  { text: ‘UserDepartment’, datafield: ‘UserDepartment’, width: 140, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’ },
                  { text: ‘Actions’, datafield: ‘SubscriptionID’, width: 60, cellsrenderer: actionsrenderer, cellsalign: ‘center’, align: ‘center’, sortable: false, filterable: false }]
                });

    Thank you!

    Best regards,
    Anton.

    Issues with jqGrid #12954

    Peter Stoev
    Keymaster

    Hi Anton,

    Our Grid Server Sorting, Paging and Filtering online sample demonstrates how to correctly implement server sorting, paging and filtering: serverfiltering_paging_and_sorting.htm. In case of a filter row, see this sample: serverfiltering.htm. The examples require at least jQWidgets 2.6.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Issues with jqGrid #13522

    antonomase
    Participant

    Hi,

    I had a lot of problems with filtering :
    – a column containing numerical values (55, 56, 57, 58) : impossible to filter with textbox nor list. The resultat was not good
    – applying a filter on one column put this column gray (normal) and another one also gray (not normal)

    I have resolved all the problems when I indicate the type of values :

    filter does not work :
    datafields: [{name: ‘NOM’}, {name: ‘VILLE’}, {name: ‘DEPA’}, {name: ‘IDE’]]

    filter works :
    datafields: [{name: ‘NOM’, type: ‘string’}, {name: ‘VILLE’, type: ‘string’}, {name: ‘DEPA’, type: ‘string’}, {name: ‘IDE’, type: ‘bool’}]

    Issues with jqGrid #13529

    Peter Stoev
    Keymaster

    Hi antonomase,

    For filtering of numbers, you should specify the “type” when you define the datafields array and set it to “number”. In addition, you should specify that your filter is numeric. I suggest you to take a look at the online samples and their implementation. There are columns with numbers.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.