jQWidgets Forums

Tagged: jqxGrid ;, sort

This topic contains 2 replies, has 2 voices, and was last updated by Yavor Dashev 4 years, 2 months ago.

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

Author

Sort Data Inside any Group when Expand Posts

February 25, 2021 at 1:48 pm Sort Data Inside any Group when Expand #114679

ajayetw2009

Participant

Hi JqWidgets Team,

Is there is any way to Sort Data Inside any Group when Expand Group without affecting group order.

Scenario 1:-
–Suppose We have 4-5 Groups and Third group have 35 Records, Now I wanna sort the data inside the third
group.

Scenario 2:-
–Suppose We have 4-5 Groups and Third group have 35 Records, Now I wanna add some data in this group (3rd
Group) and after added some data then I want to sort the data inside the third group.

Please suggest me how to achieve this.
Thanks in Advance.

Thanks And Regards,
Ajay K.

February 27, 2021 at 1:37 pm Sort Data Inside any Group when Expand #114715

ajayetw2009

Participant

Please suggest Sir.
Thanks in advance.

March 1, 2021 at 10:04 am Sort Data Inside any Group when Expand #114734

Yavor Dashev

Participant

Hi ajayetw2009,

Unfortunately the jqxGrid doesn’t support sorting in one group only.
However one option for you will be to use the sortable property of the grid. And in the ‘source’ you can set the column to be sorted from and sort order and with this the entire grid will be sorted.
For the second scenario you can bind to the event that adds new data and sort the data.
I have prepared a example to showcase you this functionality.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is demonstrated how to override the built-in rendering of the Groups headers. The Grouping of Product and Ship Date columns is disabled.</title>
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.aggregates.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
          
            
            
            // prepare the data
            var data = generatedata(200);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                datatype: "array",
            };
            //source.localdata.sort(compare)
            var dataAdapter = new $.jqx.dataAdapter(source);
           
            // initialize jqxGrid
            $("#grid").jqxGrid(
            {
                width: getWidth('Grid'),
                source: dataAdapter,
                groupable: true,
                
                selectionmode: 'singlecell',
                sortable: true,
                groups: ['price'],
                columns: [
                  { text: 'First Name', groupable: true, datafield: 'firstname', width: 90 },
                  { text: 'Last Name', groupable: true, datafield: 'lastname', width: 90 },
                  { text: 'Product', groupable: false, columntype: 'dropdownlist', datafield: 'productname', width: 180 },
                  { text: 'Ship Date', groupable: false, datafield: 'date', width: 90, cellsalign: 'right'},
                  { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right'},
                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2'}
                ]
            });
            $("#refreshButton").click(function () {
                //On clicking the button we set by which column to sort the grid 
                $('#grid').jqxGrid('sortby', 'firstname', 'asc');
              
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="grid"></div>

    </div>
    <div style='margin-left: 10px; float: left;'>
        <input type="button" value=" Refresh" id='refreshButton' />
    </div>

<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.