Using showfilterrow , groupable and autoloadstate

[DeployDuckParticipant]

Hello,
I have been given the task by my management to check, in the future we should change to jqxWidgets for our products. At the moment I am trying to work out if jqxGrid meets our requirements.

I’m stuck with the following situation:
The grid should have a filter line and also the groupable function.
The status of the grid should e.g. after a change / update of the data source can be restored.

This is my columns definition:

CustomerListGridColumns: [
    { text: 'Customer',     datafield: 'customername' ,    width: 200  },
    { text: 'CustomerNo',   datafield: 'customerno',       width: 100  },
    { text: 'State',        datafield: 'customerstate',    
                            displayfield: 'displaystate',   
                            columntype: 'dropdownlist',    
                            width: 180,      
                            filtertype: 'checkedlist'  },

    { text: 'City',         datafield: 'city',  
                            displayfield: 'displaycity',  
                            columntype: 'dropdownlist' ,   
                            filtertype: 'checkedlist'   }
],

I use a data adapter, which provides the grid with data.

$(document).ready(function(){
    function CustomerListGrid(GridDateaSource){
       $("#MyCustomerGridID").jqxGrid({
           width: '100%',  height: '100%',  
           source: GridDateaSource,
           columnsresize: true,
           showfilterrow: true,    
           autosavestate : true,
           autoloadstate: true,   
           groupable: true,
           filterable: true,
           showgroupmenuitems: true,
           showsortmenuitems: false,
           columns:  CustomerListGridColumns, 
           selectionmode :"singlerow",
           pageable: true,
           pagesize: 25,
           pagesizeoptions: ["10","25","50","100"],
           sortable: true,        
           localization: AllGridLocalStringObj,
           theme: GridTheme
       });
    }

    DataAdapter_CustomerList(data).then(function(DataSource) { CustomerListGrid(DataSource); }); 
});

When using showfilterrow AND groupable together, I get the following error message as a result:
Uncaught (in promise) TypeError: Cannot read property ‘style’ of undefined from jqxgrid.filter.js
The error disapears, if I remove autoloadstate.

If I either disable showfilterrow or groupable, it almost works: Only the last column “City”, which should actually extend to the right border of the grid, is now only displayed with a width of 73px and no longer expanded.

I am happy about every proposed solution, which allows me to use all three functions together.

Thanks
The DeployDuck

[TodorParticipant]

Hello DeployDuck,

From your sample code I cannot see where you’re using jqxDataAdapter. You could review the following docs with different Grid Data Sources and how to set the jqxDataAdapter according to your use case. I think the whole issue comes from not using the jqxDataAdapter correctly.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[DeployDuckParticipant]

Hello Todor,
thank you for your answer. I just read the docs but unfortunately I’m not quite smart, which is wrong with my approach. sorry.
In order to clarify where my problem lies, I have created a simplified example that shows the faulty behavior.

https://jsfiddle.net/DeployDuck/y1p692re/

To reproduce the error, drag a column into the grouping area and then run again.
You receive the error message:

Uncaught TypeError: Cannot read property 'style' of undefined
    at d (jqx-all.js:97)
    at c.<computed>._updatefilterrowui (jqx-all.js:97)
    at c.<computed>._updatefilterrow (jqx-all.js:97)
    at c.<computed>._rendercolumnheaders (jqx-all.js:83)
    at c.<computed>.rendergridcontent (jqx-all.js:83)
    at c.<computed>._loadselectionandcolumnwidths (jqx-all.js:95)
    at c.<computed>.loadstate (jqx-all.js:95)
    at o (jqx-all.js:83)
    at b.jqx.dataview.dataview.update (jqx-all.js:83)
    at n (jqx-all.js:83)

I’m glad if you please point me to the right direction.
Many Thanks.

The DeployDuck

[TodorParticipant]

Hello DeployDuck,

It seems that this is an issue. We have created a work item for this case.
Thank you for the feedback!

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[DeployDuckParticipant]

Hello Todor,
can you please let me know as soon as there is a solution or workaround.
Thank you.

DeployDuck

[Author]

Posts