jQWidgets Forums

Tagged: add, addrow, checkbox, columntype, filter, filter row, grid, group, groupable, grouping, id, jqxgrid, row, selection, selectionmode

This topic contains 9 replies, has 4 voices, and was last updated by Dimitar 10 years, 10 months ago.

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

Author

Grid Grouping | Custom Checkbox Column Posts

September 19, 2013 at 3:54 am Grid Grouping | Custom Checkbox Column #29197

rskbuvan

Spectator

Hi,

Recently I’ve updated the jqWidgets library version from 2.8.0 to 3.0.2 and I noticed that custom checkbox column (i.e. check all – Header Checkbox) for grouping grid is not working as expected like previous version (2.8.0).

For your better understanding, I hereby posted the complete demo code which I worked out from the latest version.

<!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" />
    <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="../../jqwidgets/jqxgrid.filter.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 = "";
            // 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 : 'viewAllowed',type : 'bool'},
                    { 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 '<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>';
                }
            }
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                groupable: true,
                groupsrenderer: groupsrenderer,
                selectionmode: 'singlecell',
                groups: ['price'],
				editable: true,
				groupsexpandedbydefault: true,
				editmode: 'dblclick',
				filterable: true,
				showfilterrow: true,
				ready: function(){
					$(".checkText").closest('.jqx-grid-column-header').css('overflow','visible');
					$(".checkText").closest('.jqx-grid-column-header').parent().css('z-index','100');
				},
                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: 'View Allowed', groupable: false, filterable: false, datafield: 'viewAllowed', width: 90, columntype: 'checkbox', cellsalign: 'right',
				  renderer: function () {
					return '<div class="checkText" style="text-align:center;line-height:25px"><label>View</label><br /><div id="AccountView" style="left: 50%; margin-left: -10px; top:34px; position:absolute"></div></div>';
					},
				  rendered: function (element) {
					var myChkboxView = $(element).find('#AccountView');
					$(myChkboxView).jqxCheckBox({ theme: theme, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
					//columnCheckBoxView = $(myChkboxView);
					$(myChkboxView).on('change', function (event) {
						var checked = event.args.checked;
						if (checked == null) return;
						var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
						for (var i = 0; i < rowscount; i++) {
						$("#jqxgrid").jqxGrid('setcellvalue', i, 'viewAllowed', event.args.checked);
						}
					});
					return true;
				}
				  
				  },
                  { 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>

FYI, If I’ve not applied the grouping, the checkbox column is working fine (i.e. checkall – Header Checkbox).

Can anyone suggest me a solution.

Thanks & Cheers,
\_rssb

September 20, 2013 at 6:14 am Grid Grouping | Custom Checkbox Column #29270

Dimitar

Participant

Hello rssb,

Here is a properly working example based on the Filter Row demo:

<!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/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.grouping.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 = "";
            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,
                filterable: true,
                groupable: true,
                theme: theme,
                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' }
                ]
            });
            $('#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>

We hope it is helpful to you.

Best Regards,
Dimitar

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

September 20, 2013 at 7:30 am Grid Grouping | Custom Checkbox Column #29278

rskbuvan

Spectator

Hi Dimitar,

The example code which I was posted is not about filter, actually we introduced a custom check-box column and applied a grouping feature to the grid.

When I try to click the individual cells or check-all of that custom column, it is not behaving properly i.e. check-all / check-individual. In the previous version of jqWidget (2.8.0), it was working fine. So please run our example code into the demo folder i.e. demos\jqxgrid, latest demo package downloaded.

FYI, our stakeholders are interested to buy a commercial license but before going forward I’m customizing the grid based on business requirements. One of the requirement was this, introduce various column check-box in grid grouping to set permissions like View, Edit etc. So this check-all & check-individual should work as expected.

But recent updates to jqWidget version becomes a show stopper for me to proceed further. Hence please run the example and let me know the suggestion.

Looking for solution.

Thanks & Cheers,
\_rssb

September 20, 2013 at 8:03 am Grid Grouping | Custom Checkbox Column #29280

Dimitar

Participant

Hello rssb,

Unfortunately, custom rendering of filter row cells is not supported in jqxGrid.

Best Regards,
Dimitar

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

September 20, 2013 at 10:49 am Grid Grouping | Custom Checkbox Column #29288

rskbuvan

Spectator

Hello Dimitar,

Please understand that, I’m not trying to achieve any filter row cells.

The column which I introduced is to achieve check-all / un-check all functionality.

In the previous version of jqWidget(V 2.8.0), the same custom check-box column applied to the grid grouping was working perfect. Even the check-all, un-check all and individual cell clicks was working perfect.

But after upgrading jqWidget to the latest version, the same functionality is not performing as expected. This is why, I worked a small example from the latest demo package downloaded and shared you guys to look at the issue.

In this shared code, instead clicking the header check-box, try clicking the individual cell check-box, that itself is not working properly with the latest version.

Also, please run the shared code with the previous jqWidget version (V 2.8.0) and suggest me a solution.

If you feel comfortable, can you share your phone number to discuss further.

Looking for a reply.

Thanks & Cheers,
\_rssb

September 23, 2013 at 5:11 am Grid Grouping | Custom Checkbox Column #29339

Dimitar

Participant

Hello rssb,

I understand the intended functionality. However, please note that jqxGrid may or may not handle such customizations correctly. These scenarios were not intended by the development team and thus we do not support them.

Best Regards,
Dimitar

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

November 26, 2013 at 6:24 pm Grid Grouping | Custom Checkbox Column #44181

Hendra

Participant

I am having the same issue with check all in the column header when the grouping is on. I am using v3.0.4.
Any resolution?

Thanks,
Hendra

November 28, 2013 at 8:52 am Grid Grouping | Custom Checkbox Column #45376

Dimitar

Participant

Hello Hendra,

Please check out this working example, based on the demo CheckBox Selection.

<!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.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.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/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";

            var url = "../sampledata/orders.xml";

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { 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', type: 'string' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            // create jqxgrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 450,
                source: dataAdapter,
                theme: theme,
                sortable: true,
                groupable: true,
                filterable: true,
                ready: function () {
                    // called when the Grid is loaded. Call methods or set properties here.         
                },
                selectionmode: 'checkbox',
                altrows: true,
                columns: [
                  { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                  { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
                  { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right' },
                  { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Country', datafield: 'ShipCountry' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }
               ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

June 25, 2014 at 2:11 pm Grid Grouping | Custom Checkbox Column #56354

Madhuri

Participant

Hi,

I am creating a grid with one column as a checkbox. When we click a link named “Add new row” a new row gets added to the grid.
Now I want to assign a unique id and name to the checkbox every time when row is created.
Please let me know how to do this.

June 26, 2014 at 6:21 am Grid Grouping | Custom Checkbox Column #56396

Dimitar

Participant

Hello Madhuri,

Unfortunately, this cannot be achieved.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.