jQWidgets Forums

Tagged: grid grouping

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 5 months ago.

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

Author

bug in groupable:true editable grid Posts

November 16, 2013 at 8:22 pm bug in groupable:true editable grid #32788

assaf.frank123

Participant

Hi,

I am experiencing something strange –

only when my grid has groups (groupable:true) – and the grid is loaded by default with a grouped column,
the event cellvaluechanged does not fire only on the last group (perhaps the last row of the last group..

All other rows are fine and event is fired , only on the last group/row after the cell value of a plan text column is changed the value
is erased in the cell and the event is not fired.

Is this a know issue? Any workaround?

Many thanks.

November 16, 2013 at 8:52 pm bug in groupable:true editable grid #32789

assaf.frank123

Participant

Bug happens in your example – groupsrenderer.htm.

Try editing last rows of last group.

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.

$(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);
var text = data.groupcolumn.text + ‘: ‘ + number;
if (data.subItems.length > 0) {
var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, [‘sum’], true, data.subItems);
}
else {
var rows = new Array();
var getRows = function (group, rows) {
if (group.subGroups.length > 0) {
for (var i = 0; i < group.subGroups.length; i++) {
getRows(group.subGroups[i], rows);
}
}
else {
for (var i = 0; i < group.subItems.length; i++) {
rows.push(group.subItems[i]);
}
}
}
getRows(data, rows);
var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, ['sum'], true, rows);
}

return '

‘ + text + ‘, ‘ + ‘‘ + “Total” + ‘ (‘ + aggregate.sum + ‘)’ + ‘‘;
}
else {
return ‘

‘ + text + ‘‘;
}
}
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,
groupable: true,
editable: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’}
]
});
$(“#jqxgrid”).on(‘cellvaluechanged’, function (event)
{

var column = args.datafield;
var row = args.rowindex;
var value = args.newvalue;
var oldvalue = args.oldvalue;

alert(value+’ ‘+column);
});
});

November 16, 2013 at 8:53 pm bug in groupable:true editable grid #32790

assaf.frank123

Participant

I see the code is cut off.
Just add –
editable:true -to the grid
cellvaluechanged event – as in example.

Thanks

November 16, 2013 at 9:59 pm bug in groupable:true editable grid #32791

Peter Stoev

Keymaster

Hi assaf.frank123,

I suppose that you do not use the latest version – 3.0.4.

You can find below working samples. The “cellvaluechanged” event is raised for each cell after editing.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Basic grouping Grid showing collapsible data groups that can
        be customized via the 'Group By' header menu option or via drag and drop of grid
        column headers.</title>
    <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.grouping.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.sort.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/customers.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:CustomerID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 600,
                source: dataAdapter,
                groupable: true,
                editable: true,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'City', datafield: 'City', width: 120 },
                  { text: 'Country', datafield: 'Country' }
                ],
                groups: ['City']
            });
            $("#jqxgrid").on('cellvaluechanged', function () {
                alert('value changed');
            });
      
            $("#expand").jqxButton({ theme: theme });
            $("#collapse").jqxButton({ theme: theme });
            $("#expandall").jqxButton({ theme: theme });
            $("#collapseall").jqxButton({ theme: theme });
            // expand group.
            $("#expand").on('click', function () {      
                var groupnum = parseInt($("#groupnum").val());
                if (!isNaN(groupnum)) {
                    $("#jqxgrid").jqxGrid('expandgroup', groupnum);
                }
            });
            // collapse group.
            $("#collapse").on('click', function () {
                var groupnum = parseInt($("#groupnum").val());
                if (!isNaN(groupnum)) {
                    $("#jqxgrid").jqxGrid('collapsegroup', groupnum);
                }
            });
            // expand all groups.
            $("#expandall").on('click', function () {
                $("#jqxgrid").jqxGrid('expandallgroups');
            });
            // collapse all groups.
            $("#collapseall").on('click', function () {
                $("#jqxgrid").jqxGrid('collapseallgroups');
            });
            // trigger expand and collapse events.
            $("#jqxgrid").on('groupexpand', function (event) {
                var args = event.args;
                $("#expandedgroup").text("Group: " + args.group + ", Level: " + args.level);
            });
            $("#jqxgrid").on('groupcollapse', function (event) {
                var args = event.args;
                $("#collapsedgroup").text("Group: " + args.group + ", Level: " + args.level);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div style="margin-top: 30px;">
            <div style="float: left; margin-left: 20px;">
                <input value="Expand Group" type="button" id='expand' />
                <br />
                <input style="margin-top: 10px;" value="Collapse Group" type="button" id='collapse' />
                <br />
                <span style="margin-top: 10px;">Group:</span>
                <input value="1" id="groupnum" style="margin-top: 10px; width: 20px;" type="text" />
            </div>
            <div style="float: left; margin-left: 20px;">
                <input value="Expand All Groups" type="button" id='expandall' />
                <br />
                <input style="margin-top: 10px; margin-bottom: 10px;" value="Collapse All Groups"
                    type="button" id='collapseall' />
                <br />
            </div>
            <div style="float: left; margin-left: 20px;">
                <div style="font-weight: bold;">
                    <span>Event Log:</span>
                </div>
                <div style="margin-top: 10px;">
                    <span>Expanded Group:</span> <span id="expandedgroup"></span>
                </div>
                <div style="margin-top: 10px;">
                    <span>Collapsed Group:</span> <span id="collapsedgroup"></span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

The second sample is:

<!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.edit.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="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",
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var toThemeProperty = function (className) {
                return className;
            }
            var groupsrenderer = function (text, group, expanded, data) {
                if (data.groupcolumn.datafield == 'price' || data.groupcolumn.datafield == 'quantity') {
                    var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
                    var text = data.groupcolumn.text + ': ' + number;
                    if (data.subItems.length > 0) {
                        var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, ['sum'], true, data.subItems);
                    }
                    else {
                        var rows = new Array();
                        var getRows = function (group, rows) {
                            if (group.subGroups.length > 0) {
                                for (var i = 0; i < group.subGroups.length; i++) {
                                    getRows(group.subGroups[i], rows);
                                }
                            }
                            else {
                                for (var i = 0; i < group.subItems.length; i++) {
                                    rows.push(group.subItems[i]);
                                }
                            }
                        }
                        getRows(data, rows);
                        var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, ['sum'], true, rows);
                    }
                    
                    return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + ', </span>' + '<span class="' + toThemeProperty('jqx-grid-groups-row-details') + '">' + "Total" + ' (' + aggregate.sum + ')' + '</span></div>';
                }
                else {
                    return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + '</span>';
                }
            }
            $("#jqxgrid").on('cellvaluechanged', function () {
                alert('value changed');
            });
       
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                editable: true,
                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,
Peter Stoev

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

Author

Posts

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

You must be logged in to reply to this topic.