jQWidgets Forums

Tagged: grouping, jqxgrid, key value column

This topic contains 3 replies, has 2 voices, and was last updated by mohamedazher 10 years, 4 months ago.

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

Author

Grid Column Grouping Key Value Column Posts

December 25, 2014 at 2:29 pm Grid Column Grouping Key Value Column #64697

mohamedazher

Participant

Hi,

From what i see, there seems to be something wrong with the way the grid handles grouping on key value columns.

If a column being grouped has a displayfield set then the group name is set as the disaplyfield value.

columns: [{ text: ‘Employee Name’, datafield: ‘EmployeeID’, displayfield: ‘Employee_Name_from_DB’, editable: false, width: 150}]

In this case the group name in bold is Employee_Name_from_DB which is strange.

I know that we can customise the groups using groupsrenderer but when trying to use groups rendered, the data.groupcolumn property is null for columns which have displayfield property set.

So how do i change the group name in the grid for columns that have a displayfield set?

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.11.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            // var theme = getDemoTheme();
            var employeesSource =
             {
                 datatype: "xml",
                 datafields: [
                     { name: 'FirstName', type: 'string' },
                     { name: 'LastName', type: 'string' }
                 ],
                 root: "Employees",
                 record: "Employee",
                 id: 'EmployeeID',
                 url: "../sampledata/employees.xml",
                 async: false
             };
             var employeesAdapter = new $.jqx.dataAdapter(employeesSource, {
                autoBind: true,
                beforeLoadComplete: function (records) {
                    var data = new Array();
                    // update the loaded records. Dynamically add EmployeeName and EmployeeID fields. 
                    for (var i = 0; i < records.length; i++) {
                        var employee = records[i];
                        employee.EmployeeName = employee.FirstName + " " + employee.LastName;
                        employee.EmployeeID = employee.uid;
                        data.push(employee);
                    }
                    return data;
                }
            });
            // prepare the data
            var ordersSource =
            {
                datatype: "xml",
                datafields: [
                    // name - determines the field's name.
                    // value - the field's value in the data source.
                    // values - specifies the field's values.
                    // values.source - specifies the foreign source. The expected value is an array.
                    // values.value - specifies the field's name in the foreign source. 
                    // values.name - specifies the field's value in the foreign source. 
                    // When the ordersAdapter is loaded, each record will have a field called "EmployeeName". The "EmployeeName" for each record comes from the employeesAdapter where the record's "EmployeeID" from orders.xml matches to the "EmployeeID" from employees.xml. 
                    { name: 'EmployeeName', value: 'EmployeeID', values: { source: employeesAdapter.records, value: 'EmployeeID', name: 'EmployeeName' } },
                    { name: 'EmployeeID', map: 'm\\:properties>d\\:EmployeeID' },
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: "../sampledata/orders.xml",
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                }
            };
                var groupsrenderer = function (text, group, expanded, data) {
                if (data.groupcolumn==null) {
                    alert("data.groupcolumn is null");
                   return '<div class="' + 'jqx-grid-groups-row' + '" style="position: absolute;"><span>' + text + '</span>';
                    
                }
            }

            var ordersAdapter = new $.jqx.dataAdapter(ordersSource);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: ordersAdapter,
                selectionmode: 'singlecell',
                groupsrenderer: groupsrenderer,
                pageable: true,
                autoheight: true,
                groupable: true,
                columns: [
                    { text: 'Employee Name', datafield: 'EmployeeID', displayfield: 'EmployeeName', editable: false, width: 150},
                    { text: 'Ship City', datafield: 'ShipCity', width: 150},
                    { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                    { text: 'Ship Name', datafield: 'ShipName'}
                ]
            });
            $("#jqxgrid").on('cellselect', function (event) {
                var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
                var value = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.datafield);
                var displayValue = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.displayfield);
                $("#eventLog").html("<div>Selected Cell<br/>Row: " + event.args.rowindex + ", Column: " + column.text + ", Value: " + value + ", Label: " + displayValue + "</div>");
            });
            $("#jqxgrid").on('cellendedit', function (event) {
                var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
                if (column.displayfield != column.datafield) {
                    $("#eventLog").html("<div>Cell Edited:<br/>Index: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value.value + ", Label: " + event.args.value.label
                        + "<br/>Old Value: " + event.args.oldvalue.value + ", Old Label: " + event.args.oldvalue.label + "</div>"
                        );
                }
                else {
                    $("#eventLog").html("<div>Cell Edited:<br/>Row: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value
                        + "<br/>Old Value: " + event.args.oldvalue + "</div>"
                        );
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div style="font-size: 13px; "margin-top: 20px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;" id="eventLog"></div>
    </div>
</body>
</html>

Also, another thing strange is that it only shows 1 group with name Andrew Fuller and add all items into it and ignores everything else.

Looking forward for your reply.

-Mohamed Azher

December 25, 2014 at 2:58 pm Grid Column Grouping Key Value Column #64701

mohamedazher

Participant

Hi,

The last comment about only Andrew Fuller being shown can be ignored. I forgot the data was paginated.

But the main problem with the group name and grouprenderer remains.

-Mohamed Azher

December 26, 2014 at 3:36 pm Grid Column Grouping Key Value Column #64714

Peter Stoev

Keymaster

Hello mohamedazher,

If you want to customize how the grouping is rendered by default you can use the groupsrenderer callback. If we find something wrong on our side testing your code, we’ll add a work item.

Best Regards,
Peter Stoev

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

December 26, 2014 at 6:11 pm Grid Column Grouping Key Value Column #64721

mohamedazher

Participant

Hi,

Thanks for your reply.

As i mentioned, the problem remains with the data.groupcolumn property being null for columns that have a displayfield set. So in effect, no proper grouping can be done on columns that have the displayfield property set as it uses the datafield as the label.

Looking forward for this issue to be resolved.

Regards,
Mohamed Azher

Author

Posts

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

You must be logged in to reply to this topic.