jQWidgets Forums

Tagged: datagrid component, ui grid table

This topic contains 5 replies, has 2 voices, and was last updated by gpatrick@devnext.net 11 years, 11 months ago.

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

Author

ColumnReordered and checkedlist filter Posts

May 2, 2013 at 9:34 pm ColumnReordered and checkedlist filter #20490

Participant

I’m having an issue with the grid where when you move a column and there is a filter applied on any column that uses either the checkedlist or the number filter types the items selected in the list are lost, even though the filter is still applied. I have tried numerous things to try and fix this, but nothing seems to work.

The closest thing I have come to fixing this is to call refreshfilterrow on the columnreordered event. However, this only correctly applies the checked items, or in the case of the number filter type, only correctly applies the selected item every other time you move a column. I do believe this also happens with the date filter type.

Here are some of the options I have turned on in the grid:

showfilterrow
paging
columnreorder
columnresize
sorting
autosavestate
autoloadstate
aggregates

Yes, I want it all!

Can you guys reproduce this behavior? I notice that you guys don’t have any examples where all of these features are sued at one time. However, I still think they should all work together.

Thanks

May 2, 2013 at 11:31 pm ColumnReordered and checkedlist filter #20501

Peter Stoev

Keymaster

Hi,

We cannot reproduce that behavior with the current version of jQWidgets.

Test sample is below:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example illustrates the Grid filtering feature. Enter some data into the Filter Row.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.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/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.columnsreorder.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.storage.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date'},
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 685,
                source: dataAdapter,
                showfilterrow: true,
                columnsreorder: true,
                filterable: true,
                theme: theme,
                sortable: true,
                showaggregates: true,
                showstatusbar: true,
                autoloadstate: true,
                autosavestate: true,
                pageable: true,
                autoheight: true,
                statusbarheight: 50,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: 115 },
                  {
                      text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
                  },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                  { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 210, cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Qty.', datafield: 'quantity', filtertype: 'number',  cellsalign: 'right', aggregates: ['min', 'max'] }
                ]
            });
            $('#clearfilteringbutton').jqxButton({ height: 25, theme: theme });
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton" type="button" />
</body>
</html>

Best Regards,
Peter Stoev

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

May 3, 2013 at 7:08 pm ColumnReordered and checkedlist filter #20540

gpatrick@devnext.net

Participant

After slowly taking features away from my implementation, I discovered that the issue goes away once I have all of the columns visible. When I hide a column, that’s when it starts.

Let me know if you can reproduce and if you have any suggestions.

Thanks

May 3, 2013 at 8:29 pm ColumnReordered and checkedlist filter #20542

Peter Stoev

Keymaster

Hi,

We confirm the behavior when there is a hidden column. We will enhance the Columns Reorder feature when the Filter Row is enabled in a future version of jQWidgets. At present, we cannot provide a work around.

Best Regards,
Peter Stoev

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

June 14, 2013 at 5:30 am ColumnReordered and checkedlist filter #23136

gpatrick@devnext.net

Participant

Any idea about when the next version will be available? I am currently on 2.8.3, and I am hoping that the next version will fix this issue.

Thanks

June 25, 2013 at 5:21 am ColumnReordered and checkedlist filter #23785

gpatrick@devnext.net

Participant

FYI, you can mark this resolved now. I just tested with v2.9.0 and all looks good. Thanks

Author

Posts

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

You must be logged in to reply to this topic.