jQuery UI Widgets Forums Grid Using showfilterrow , groupable and autoloadstate

This topic contains 4 replies, has 2 voices, and was last updated by  DeployDuck 10 months, 2 weeks ago.

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

  • DeployDuck

    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.

        function CustomerListGrid(GridDateaSource){
               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.

    The DeployDuck


    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,

    jQWidgets Team


    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.


    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


    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,

    jQWidgets Team


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


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

You must be logged in to reply to this topic.