jQWidgets Forums

jQuery UI Widgets Forums Grid Grid Filter IE7 and IE8 compatibility mode issue

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • rduclos
    Member

    In IE7 and IE8 compatibility mode the jqxGrid column filters has a few of issues.

    Issue 1: The Filter/Clear buttons are getting the bottom cutoff when displayed.

    Issue 2: Once the grid is populated with data the dropdownlists/comboboxes popup display behind the rest of the filter popup. This makes it where you can’t see the options to choose for a comparison filter.

    Issue 3: Once the grid is populated with data the dropdownlists/comboboxes display width is shrunk requiring scroll bars in the popup.

    I believe issue 2 is likely a z-index issue though I’m not sure of the best way to fix it.


    Peter Stoev
    Keymaster

    Hi rduclos,

    We are unable to reproduce the reported behavior using jQWidgets 2.5.5 and our samples. We tested the Filtering sample with IE7 and IE8 as reported and the results were as expected.

    Please, send us a sample which reproduces the reported behavior. In addition, make sure that you use jQWidgets 2.5.5 and jQuery version 1.6+

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    rduclos
    Member

    var addfilter = function () {
    var filtergroup = new $.jqx.filter();
    var filter_or_operator = 1;
    var filtervalue = ‘filter1’;
    var filtercondition = ‘contains’;
    var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
    filtervalue = ‘filter2’;
    filtercondition = ‘contains’;
    var filter2 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter1);
    filtergroup.addfilter(filter_or_operator, filter2);
    // clear filters
    $(‘#dashboardGrid’).jqxGrid(‘clearfilters’);
    // add the filters.
    $(“#dashboardGrid”).jqxGrid(‘addfilter’, ‘anything’, filtergroup);
    // apply the filters.
    $(“#dashboardGrid”).jqxGrid(‘applyfilters’);
    };

    $(“#dashboardGrid”).jqxGrid(
    {
    width: ‘100%’,
    height: 300,
    sortable: true,
    altrows: true,
    showemptyrow: false,
    filterable: true,
    selectionmode: ‘singlerow’,
    theme: ‘energyblue’,
    enabletooltips: true,
    columnsresize: true,
    columns: [
    { text: ‘Owner’, dataField: ‘Owner’, width: ‘10%’ },
    { text: ‘Account Name’, dataField: ‘AccountName’, width: ‘20%’ },
    { text: ‘Service Location’, dataField: ‘ServiceLocation’, width: ‘20%’ },
    { text: ‘Order Number’, dataField: ‘OrderNumber’, width: ‘10%’, cellsrenderer: cpoOrderLinkRenderer },
    { text: ‘Product/Service Name’, dataField: ‘ProductServiceDisplayName’, width: ‘20%’ },
    { text: ‘PTD’, dataField: ‘PTD’, align: ‘center’, cellsalign: ‘center’, minwidth: ‘10%’ },
    { text: ‘NDD’, dataField: ‘NDD’, align: ‘center’, cellsalign: ‘center’, minwidth: ‘10%’ }
    ],
    ready: function () {
    addfilter();
    var localizationObject = {
    filterstringcomparisonoperators: [‘contains’, ‘does not contain’],
    // filter numeric comparison operators.
    filternumericcomparisonoperators: [‘equal’, ‘less than’, ‘greater than’],
    // filter date comparison operators.
    filterdatecomparisonoperators: [‘equal’, ‘less than’, ‘greater than’],
    // filter bool comparison operators.
    filterbooleancomparisonoperators: [‘equal’, ‘not equal’]
    };
    $(“#dashboardGrid”).jqxGrid(‘localizestrings’, localizationObject);
    },
    updatefilterconditions: function (type, defaultconditions) {
    var stringcomparisonoperators = [‘CONTAINS’, ‘DOES_NOT_CONTAIN’];
    var numericcomparisonoperators = [‘EQUAL’, ‘LESS_THAN’, ‘GREATER_THAN’];
    var datecomparisonoperators = [‘EQUAL’, ‘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;
    };
    },
    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 });
    }
    });


    rduclos
    Member

    I can reproduce issues 1 and 2 on your site using IE8 in compatibility mode set for IE7 standards.

    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/filtering.htm?energyblue


    Peter Stoev
    Keymaster

    The correct way to test for IE7 and IE8 is the following:

    The Browser Mode should be set to either IE7 with IE7 standards or IE8 with IE8 Standards.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    cloudsurfer
    Member
    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 });
    }
    });

    I would like to have only one filterdropdown, one one filterinputfield and no filteroperatordropdown. How can I do that?


    Peter Stoev
    Keymaster

    Hi cloudsurfer,

    It is not possible to customize the Filter Menu. For custom filtering implementations, you can use this approach: customfiltering.htm

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.