jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Grid(Grouping)

Tagged: , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 11 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Grid(Grouping) Posts
  • August 19, 2013 at 7:08 am Grid(Grouping) #27106

    Anil Kumar
    Participant

    I want to group grid but without header- like this i want group city write code ( groups: [‘City’]) then group like;

    City :Berlin(2) but i don’t want to this . i want to Berlin(2) .not City: Berlin(2). and if city is only one then no need to group like: City:Berlin(1).

    August 20, 2013 at 5:18 am Grid(Grouping) #27167

    Dimitar
    Participant

    Hello Anil Kumar,

    This can be achieved by using groupsrenderer. Here is an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.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/gettheme.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                // 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",
                    updaterow: function (rowid, rowdata) {
                        // synchronize with the server - send update command   
                    }
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                var toThemeProperty = function (className) {
                    return className + " " + className + "-" + theme;
                };
                var groupsrenderer = function (text, group, expanded, data) {
                    if (data.groupcolumn.datafield == 'price' || data.groupcolumn.datafield == 'quantity') {
                        var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
                        return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + number + '</span>';
                    } else {
                        return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + group + '</span>';
                    };
                };
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: dataAdapter,
                    theme: theme,
                    groupable: true,
                    groupsrenderer: groupsrenderer,
                    selectionmode: 'singlecell',
                    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' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.