jQuery UI Widgets Forums Grid Column width changes in filter row on sort or filter

This topic contains 2 replies, has 2 voices, and was last updated by  sp 2 years, 10 months ago.

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

  • sp


    I’m using a jqxgrid for a while now and it really worked fine until I updated jQWidgets from 4.4.0 to 4.5.4.
    After this update the cells of the filterrow decrease in width when sorting or filtering for the first time. It also happens if I resize a column manually.
    I had a look at the release history to find a change that could have caused this change in behavior, but I could not find anything.
    Today I upgraded to 5.2.0 but the issue is still there.

    My html:

        <meta charset="UTF-8">
        <link rel='stylesheet' type='text/css' href='/styles/rss.css'>
        <link rel='stylesheet' type='text/css' href='/styles/chart.css'>
        <link rel='stylesheet' type='text/css' href='/styles/gauge.css'>
        <link rel='stylesheet' type='text/css' href='/jqwidgets/styles/jqx.base.css'>
        <link rel='stylesheet' type='text/css' href='/styles/rs-jqwidgets.css'>
        <script type='text/javascript' src='/scripts/jquery-1.11.1.min.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxcore.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxdata.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxdraw.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxchart.core.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxgauge.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxscrollbar.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxbuttons.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxdatatable.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/jqxtooltip.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxinput.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxmenu.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxgrid.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxgrid.filter.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxgrid.sort.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxgrid.selection.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxgrid.edit.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxgrid.columnsresize.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxpanel.js'></script>
        <script type='text/javascript' src='/jqwidgets/jqxcheckbox.js'></script>
        <script type='text/javascript' src='/jqwidgets/globalize.js'></script>
        <script type='text/javascript'>
          $(document).ready(function () {
            var getLocalization = function () {
              var localizationobj = {};
              localizationobj.decimalseparator = ",";
              localizationobj.thousandsseparator = ".";
              return localizationobj;
            var retrieveFilterinformation = function(){
              var filterinfo_json = sessionStorage.getItem("rss_filterinformation");
              var filterinfo = JSON.parse(filterinfo_json);
              return filterinfo;
            var buttonRenderer = function (row, column, cellvalue, htmlstring, columnsettings, rowData) {
              var form = "<form id ='ShowDetailsForm' style='height:40px ;text-align: center; margin-top: 7.5px;' method='post' align='center' action='/Cucs.page' >";
              form += "<input type='hidden' name='Cuc' value=" + rowData.TenantName + ">";
              form += "<input type='hidden' name='Rev' value=" + rowData.Revision + ">";
              form += "<input type='submit' name='submit' onclick='storeFilterinformation()' id='RSButton' value='Show Details' >";
              form += "</form>";
              return form;
            var addprefilterTenant = function () {
              var filtergroup = new $.jqx.filter();
              var filter_or_operator = 1;
              var filtervalue= '/Host';
              var filtercondition = 'equal';
              var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
              filtergroup.addfilter(filter_or_operator, filter);
              $('#jqxgrid').jqxGrid('addfilter', 'Tenant', filtergroup);
            var restorefilter = function () {
              var filterinfo = retrieveFilterinformation();
                for(var i=0; i<filterinfo.length; i++){
                  var column = filterinfo[i];
                  var columndatafield = column.filtercolumn.filtercolumn;
                  var filtergroup = new $.jqx.filter();
                  for(var j=0; j<column.filters.length; j++){
                    var filterdetails = column.filters[j];
                    var filter = filtergroup.createfilter(filterdetails.type, filterdetails.value, filterdetails.condition);
                  $('#jqxgrid').jqxGrid('addfilter', columndatafield, filtergroup);
            var data = [
              {'Diff': 'false', 'TenantName': 'cuc_test', 'Name': 'cuc_test', 'Revision': '1', 'Status': 'operational', 'Encoding': 'legacy', 'Tenant': '/Host', 'TenantID': '0', 'EditBy': 'user1', 'EditOn': '2014-06-25 10:27:24', 'Action': 'cuc_test'},
              {'Diff': 'false', 'TenantName': 'cuc_test2', 'Name': 'cuc_test2', 'Revision': '1', 'Status': 'operational', 'Encoding': 'legacy', 'Tenant': '/Host', 'TenantID': '0', 'EditBy': 'user1', 'EditOn': '2014-06-25 10:27:11', 'Action': 'cuc_test2'},
              {'Diff': 'false', 'TenantName': 'test1', 'Name': 'test1', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host', 'TenantID': '0', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:11:42', 'Action': 'test1'},
              {'Diff': 'false', 'TenantName': 'test2', 'Name': 'test2', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host', 'TenantID': '0', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:11:55', 'Action': 'test2'},
              {'Diff': 'false', 'TenantName': 'test3', 'Name': 'test3', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host', 'TenantID': '0', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:12:06', 'Action': 'test3'},
              {'Diff': 'false', 'TenantName': 'test5', 'Name': 'test5', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host', 'TenantID': '0', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:12:39', 'Action': 'test5'},
              {'Diff': 'false', 'TenantName': 'test6', 'Name': 'test6', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host', 'TenantID': '0', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:13:06', 'Action': 'test6'},
              {'Diff': 'false', 'TenantName': 'test7', 'Name': 'test7', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host', 'TenantID': '0', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:13:22', 'Action': 'test7'},
              {'Diff': 'false', 'TenantName': 'test8', 'Name': 'test8', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host', 'TenantID': '0', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:13:33', 'Action': 'test8'},
              {'Diff': 'false', 'TenantName': 'test9', 'Name': 'test9', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host', 'TenantID': '0', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:13:47', 'Action': 'test9'},
              {'Diff': 'false', 'TenantName': 'test1', 'Name': 'test1', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host/t1', 'TenantID': '1', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:11:42', 'Action': 'test1'},
              {'Diff': 'false', 'TenantName': 'test2', 'Name': 'test2', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host/t1', 'TenantID': '1', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:11:55', 'Action': 'test2'},
              {'Diff': 'false', 'TenantName': 'test4', 'Name': 'test3', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host/t1', 'TenantID': '1', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:12:21', 'Action': 'test4'},
              {'Diff': 'false', 'TenantName': 'test1', 'Name': 'test1', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host/t1/t11', 'TenantID': '2', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:11:42', 'Action': 'test1'},
              {'Diff': 'false', 'TenantName': 'test4', 'Name': 'test5', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host/t1/t11', 'TenantID': '2', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:12:21', 'Action': 'test4'},
              {'Diff': 'false', 'TenantName': 'test2', 'Name': 'test2', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host/t1/t11/t111', 'TenantID': '3', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:11:55', 'Action': 'test2'},
              {'Diff': 'false', 'TenantName': 'test4', 'Name': 'test6', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host/t1/t11/t111', 'TenantID': '3', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:12:21', 'Action': 'test4'},
              {'Diff': 'false', 'TenantName': 'test4', 'Name': 'test7', 'Revision': '1', 'Status': 'challenger', 'Encoding': 'legacy', 'Tenant': '/Host/t1/t12', 'TenantID': '4', 'EditBy': 'user1', 'EditOn': '2015-11-06 13:12:21', 'Action': 'test4'}
            var source = {
              datatype: 'json',
              datafields: [
                { name: 'Diff', type: 'bool' },
                { name: 'TenantName', type: 'string' },
                { name: 'Name', type: 'string' },
                { name: 'Revision', type: 'number' },
                { name: 'Status', type: 'string' },
                { name: 'Encoding', type: 'string' },
                { name: 'Tenant', type: 'string' },
                { name: 'TenantID', type: 'number' },
                { name: 'EditBy', type: 'string' },
                { name: 'EditOn', type: 'string' },
              localdata: data
            var dataAdapter = new $.jqx.dataAdapter(source);
              width: '100%',
              height: '80%',
              rowsheight: 40,
              theme: 'rs-jqwidgets',
              columnsResize: true,
              altrows: true,
              editable: true,
              sortable: true,
              showsortcolumnbackground: false,
              filterable: true,
              showfilterrow: true,
              showfiltercolumnbackground: false,
              ready: function () {
                if(sessionStorage.getItem("rss_filterinformation") !== null)
              selectionmode: 'none',
              source: dataAdapter,
              localization: getLocalization(),
              columns: [
                { text: '    ', datafield: 'Diff', columntype: 'checkbox',width:'3%', threestatecheckbox: false, cellsalign: 'center', align: 'center', editable: true, filterable:false},
                { text: 'Tenant specific name', datafield: 'TenantName', columntype: 'textbox', filtertype:'checkedlist', width:'15%', cellsalign: 'left', align: 'center', editable: false},
                { text: 'Name', datafield: 'Name', columntype: 'textbox', filtertype:'checkedlist', width: '15%', cellsalign: 'left', align: 'center', editable: false},
                { text: 'Revision', datafield: 'Revision', filtertype:'number', width: '6%', cellsalign: 'center', align: 'center', editable: false},
                { text: 'Status', datafield: 'Status', filtertype:'checkedlist', width: '6%', cellsalign: 'left', align: 'center', editable: false},
                { text: 'Encoding', datafield: 'Encoding', filtertype:'checkedlist', width: '6%', cellsalign: 'left', align: 'center', editable: false},
                { text: 'Tenant', datafield: 'Tenant', columntype: 'textbox', filtertype:'checkedlist', width: '15%', cellsalign: 'left', align: 'center', editable: false},
                { text: 'Tenant ID', datafield: 'TenantID', filtertype:'number', width: '6%', cellsalign: 'center', align: 'center', editable: false},
                { text: 'Last edited by', datafield: 'EditBy', columntype: 'textbox', filtertype:'checkedlist', width: '10%', cellsalign: 'left', align: 'center', editable: false},
                { text: 'Last edited on', datafield: 'EditOn', columntype: 'textbox', filtertype:'textbox', width: '10%', cellsalign: 'right', align: 'center', editable: false},
                { text: 'Action', datafield: 'Action', align: 'center', cellsalign: 'center', cellsRenderer: buttonRenderer, editable: false, filterable: false, sortable: false}
            var numberOfSelectedRows = Number('0');
            var row1 = Number('-1');
            var row2 = Number('-1');
            $('#jqxgrid').bind('cellendedit', function (event)
              var rowindex = event.args.rowindex;
              if (event.args.value) {
                if(numberOfSelectedRows == 0){
                  numberOfSelectedRows += 1;
                  row1 = rowindex;
                else if(numberOfSelectedRows == 1){
                  numberOfSelectedRows += 1;
                  row2 = rowindex;
                else if(numberOfSelectedRows >= 2){
                  $('#jqxgrid').jqxGrid('unselectrow', row1);
                  $('#jqxgrid').jqxGrid('setcellvalue', row1, "Diff", "false")
                   row1 = row2;
                   row2 = rowindex;
                numberOfSelectedRows -= 1;
                if(rowindex == row2){
                  $('#jqxgrid').jqxGrid('unselectrow', row2);
                  row2 = -1;
                  $('#jqxgrid').jqxGrid('unselectrow', row1);
                  row1 = row2;
                  row2 = -1;
            $('#clearfilteringbutton').jqxButton({ theme: 'rs-jqwidgets',height: 25, width: 200});
            $('#clearfilteringbutton').click(function () {
            $('#jqxButton').jqxButton({ theme: 'rs-jqwidgets', height : 25, width: 200 });
            $('#jqxButton').on('click', function () {
              var getselectedrowindexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
              if (getselectedrowindexes.length != 2)
                alert('Exactly two revisions have to be selected: You selected ' + getselectedrowindexes.length);
                return false;
              if (getselectedrowindexes.length == 2)
                var selectedRowData1 = $('#jqxgrid').jqxGrid('getrowdata', getselectedrowindexes[0]);
                var selectedRowData2 = $('#jqxgrid').jqxGrid('getrowdata', getselectedrowindexes[1]);
                var Cuc1 = selectedRowData1.Name;
                var Cuc2 = selectedRowData2.Name;
                var Revision1 = selectedRowData1.Revision;
                var Revision2 = selectedRowData2.Revision;
                $('form[name=diffForm]').append('<input type="hidden" name="Diff" value="Diff" >');
                $('form[name=diffForm]').append('<input type="hidden" name="Cuc1" value=' + Cuc1 + ' >');
                $('form[name=diffForm]').append('<input type="hidden" name="Cuc2" value=' + Cuc2 + ' >');
                $('form[name=diffForm]').append('<input type="hidden" name="Rev1" value=' + Revision1 + ' >');
                $('form[name=diffForm]').append('<input type="hidden" name="Rev2" value=' + Revision2 + ' >');
        <div class='page' style='position:absolute;left:20px;top:20px;bottom:20px;right:20px'>
          <h1>Document Revisions</h1>
          <div id='jqxWidget' style='float: left; width:100%; height:90%;'>
            <div id='jqxgrid'>
              <script type='text/javascript'>
                var storeFilterinformation = function(){
                var filterinfo = new Array;
                var jqx_filtergroups = $('#jqxgrid').jqxGrid('getfilterinformation');
                for(var i=0; i< jqx_filtergroups.length; i++){
                  var column= new Object;
                  var jqx_filtergroup = jqx_filtergroups[i];
                  var filters = new Array;  
                  var jqx_filters = jqx_filtergroup.filter.getfilters();
                  for(var j = 0; j < jqx_filters.length; j++){
                  column={ filtercolumn: jqx_filtergroup, filters: filters};
                var filterinfo_json =JSON.stringify(filterinfo);
                sessionStorage.setItem("rss_filterinformation", filterinfo_json);
            <input style='margin-top: 10px;' value='Remove Filter' id='clearfilteringbutton' type='button' >
            <form name="diffForm" method='post' action='/Cucs.page'>
              <input type='submit' value='Compare Selected Revisions' id='jqxButton' style='margin-top: 10px;' >

    Could you please advice about what I’m doing wrong?
    Thanks in advance,


    Hello Sabrina,

    We couldn’t reproduce the given issue, but we found another.
    When you resize, sort or filter any of the columns, the input box of the Revision and Tenant ID columns change width.
    Those are the only things I manage to find.
    That can be easily fixed by just making the width of the element bigger, even now the spaces on the right and left aren’t equal.

    Best Regards,

    jQWidgets Team


    Hello Stanislav,

    Thanks for your help.
    I deleted the manual width configuration for the columns and everything works fine.

    Best Regards,

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

You must be logged in to reply to this topic.