Grid Filters are not opening when the Grid size is 100% in the IE window

[vikramsidParticipant]

Hello JqWidgets Team,

I am using IE8 in my organization, i have a Grid that has some 15 columns to display and the grid width is almost occupying 100% of the window. When i open filter on the last column the filter control (in my case it is dropdown and date filters) opens and closes automatically and not letting me select anything (while opening the filter the screen moves to right a little bit enabling the horizontal scrollbar as the grid column is at the right end of the window).

Also we are facing the same issue with all the controls adjescent to the borders (specially bottom and right) of the IE window. If the resolution is less (which means the page will open with scroll bars in IE window) or if we increase the zoom from 100% to 125%. All the controls open and close automatically. this is frustrating to our users as they are unable to make the selections from controls like dropdowns, datetime etc..

Hope you have a fix for this. Appreciate your quick reply.

Thanks,
Vik

[DimitarParticipant]

Hello vikramsid,

We tested for the reported behaviour the demo Filtering (we resized the browser window so that the grid’s width is almost 100% of it) in Internet Explorer 8, but could not reproduce the reported issue. Please share more information or code example on how to reproduce the behaviour. Make sure you are using the latest version of jQWidgets (3.5.0), too.

Best Regards,
Dimitar

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

[vikramsidParticipant]

Hi,

Here is the sample code where we are creating the grid, it has the width of 1205, the filter you have in your link are default filters but we have a filter row set to true and the filtertype for the last column is date, when we open the filter date the grid is full width(100%) on the screen, it opens up and closes automatically.

$(“#grdQueue”).jqxGrid(
{
width: 1205,
height: 355,
columnsheight: 40,
source: queueAdapter,
theme: theme,
rowsheight: 25,
sortable: true,
pageable: true,
pagesize: 10,
showfilterrow: true,
filterable: true,
ready: function () {
$(“#grdQueue”).jqxGrid(‘clearfilters’);
$(“#grdQueue”).jqxGrid(‘sortby’, ‘id’, ‘asc’);
},
columns: [
{ text: ID’, datafield: ‘Id’, align: ‘center’, cellsalign: ‘center’, width: ‘9%’, cellsrenderer: linkrenderer, renderer: columnsrenderer },
{ text: ‘Version’, datafield: ‘Version’, align: ‘center’, cellsalign: ‘center’, width: ‘8%’, filtertype: ‘checkedlist’, renderer: columnsrenderer },
{ text: ‘Type’, datafield: ‘Type’, align: ‘center’, cellsalign: ‘center’, width: ‘6%’, filtertype: ‘checkedlist’, renderer: columnsrenderer },
{ text: ‘Audit Type’, datafield: ‘auditType’, align: ‘center’, cellsalign: ‘center’, width: ‘6%’, filtertype: ‘checkedlist’, renderer: columnsrenderer },
{ text: ‘Analyst’, datafield: ‘AnalystRacf’, align: ‘center’, cellsalign: ‘center’, width: ‘7%’, filtertype: ‘checkedlist’, renderer: columnsrenderer },
{ text: ‘Location Code’, datafield: ‘locationCode’, align: ‘center’, cellsalign: ‘center’, width: ‘6%’, filtertype: ‘checkedlist’, renderer: columnsrenderer },
{ text: ‘Last Name’, datafield: ‘LastName’, align: ‘center’, cellsalign: ‘center’, width: ‘7%’, filtertype: ‘checkedlist’, renderer: columnsrenderer },
{ text: ‘Status Code’, datafield: ‘statusCode’, align: ‘center’, cellsalign: ‘center’, width: ‘7%’, filtertype: ‘checkedlist’, renderer: columnsrenderer },
{ text: ‘Status Date’, datafield: ‘statusDate’, align: ‘center’, cellsalign: ‘center’, width: ‘8%’, cellsformat: ‘dd.MM.yyyy’, filtertype: ‘date’, cellsformat: ‘d’, renderer: columnsrenderer },
{ text: ‘Product Family’, datafield: ‘productFamily’, align: ‘center’, cellsalign: ‘center’, width: ‘7%’, filtertype: ‘checkedlist’, renderer: columnsrenderer },
{ text: ‘Product Group’, datafield: ‘productGroup’, align: ‘center’, cellsalign: ‘center’, width: ‘7%’, filtertype: ‘checkedlist’, renderer: columnsrenderer },
{ text: ‘Product’, datafield: ‘productCode’, align: ‘center’, cellsalign: ‘center’, width: ‘6%’, filtertype: ‘checkedlist’, renderer: columnsrenderer },
//{ text: ‘Assigned Date’, datafield: ‘assignedDate’, align: ‘center’, cellsalign: ‘center’, width: ‘7%’, cellsformat: ‘dd.MM.yyyy’, filtertype: ‘date’, cellsformat: ‘d’, renderer: columnsrenderer },
{ text: ‘Decision Date’, datafield: ‘DecisionDate’, align: ‘center’, cellsalign: ‘center’, width: ‘8%’, cellsformat: ‘dd.MM.yyyy’, filtertype: ‘date’, cellsformat: ‘d’, renderer: columnsrenderer },
{ text: Last Activity Date’, datafield: ‘LastActivityDate’, align: ‘center’, cellsalign: ‘center’, width: ‘8%’, cellsformat: ‘dd.MM.yyyy’, filtertype: ‘date’, cellsformat: ‘d’, renderer: columnsrenderer }
]
});

var rows = $(‘#grdQueue’).jqxGrid(‘getrows’);
if (rows.length > 0) {
$(“#grdQueue”).jqxGrid(‘clearfilters’);
}

[vikramsidParticipant]

i copied the code in the code block sorry for that.

$(“#grdQueue”).jqxGrid(
{
width: 1205,
height: 355,
columnsheight: 40,
source: queueAdapter,
theme: theme,
rowsheight: 25,
sortable: true,
pageable: true,
pagesize: 10,
showfilterrow: true,
filterable: true,
ready: function () {
$(“#grdQueue”).jqxGrid(‘clearfilters’);
$(“#grdQueue”).jqxGrid(‘sortby’, ‘id’, ‘asc’);
},
columns: [
{ text: ID', datafield: 'Id', align: 'center', cellsalign: 'center', width: '9%', cellsrenderer: linkrenderer, renderer: columnsrenderer },
{ text: 'Version', datafield: 'Version', align: 'center', cellsalign: 'center', width: '8%', filtertype: 'checkedlist', renderer: columnsrenderer },
{ text: 'Type', datafield: 'Type', align: 'center', cellsalign: 'center', width: '6%', filtertype: 'checkedlist', renderer: columnsrenderer },
{ text: 'Audit Type', datafield: 'auditType', align: 'center', cellsalign: 'center', width: '6%', filtertype: 'checkedlist', renderer: columnsrenderer },
{ text: 'Analyst', datafield: 'AnalystRacf', align: 'center', cellsalign: 'center', width: '7%', filtertype: 'checkedlist', renderer: columnsrenderer },
{ text: 'Location Code', datafield: 'locationCode', align: 'center', cellsalign: 'center', width: '6%', filtertype: 'checkedlist', renderer: columnsrenderer },
{ text: 'Last Name', datafield: 'LastName', align: 'center', cellsalign: 'center', width: '7%', filtertype: 'checkedlist', renderer: columnsrenderer },
{ text: 'Status Code', datafield: 'statusCode', align: 'center', cellsalign: 'center', width: '7%', filtertype: 'checkedlist', renderer: columnsrenderer },
{ text: 'Status Date', datafield: 'statusDate', align: 'center', cellsalign: 'center', width: '8%', cellsformat: 'dd.MM.yyyy', filtertype: 'date', cellsformat: 'd', renderer: columnsrenderer },
{ text: 'Product Family', datafield: 'productFamily', align: 'center', cellsalign: 'center', width: '7%', filtertype: 'checkedlist', renderer: columnsrenderer },
{ text: 'Product Group', datafield: 'productGroup', align: 'center', cellsalign: 'center', width: '7%', filtertype: 'checkedlist', renderer: columnsrenderer },
{ text: 'Product', datafield: 'productCode', align: 'center', cellsalign: 'center', width: '6%', filtertype: 'checkedlist', renderer: columnsrenderer },
//{ text: 'Assigned Date', datafield: 'assignedDate', align: 'center', cellsalign: 'center', width: '7%', cellsformat: 'dd.MM.yyyy', filtertype: 'date', cellsformat: 'd', renderer: columnsrenderer },
{ text: 'Decision Date', datafield: 'DecisionDate', align: 'center', cellsalign: 'center', width: '8%', cellsformat: 'dd.MM.yyyy', filtertype: 'date', cellsformat: 'd', renderer: columnsrenderer },
{ text: Last Activity Date', datafield: 'LastActivityDate', align: 'center', cellsalign: 'center', width: '8%', cellsformat: 'dd.MM.yyyy', filtertype: 'date', cellsformat: 'd', renderer: columnsrenderer }
]
});

var rows = $(‘#grdQueue’).jqxGrid(‘getrows’);
if (rows.length > 0) {
$(“#grdQueue”).jqxGrid(‘clearfilters’);
}

[vikramsidParticipant]

Attaching the sample screenshot. looks like my last column width is lesser than the date picker filter may be the reason why it opens and closes immediately?

[Peter StoevKeymaster]

Dear vikramsid,

The Grid’s size in your sample is not ‘100%’. We would suggest you to set the width in percentages if you want it to be fluid. Ex: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/autosize.htm?arctic

Best Regards,
Peter Stoev

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

[Author]

Posts