Checkbox Selection And Initrowdetail - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: checkbox selection, grid, initrowdetails

This topic contains 13 replies, has 4 voices, and was last updated by Peter Stoev 12 years, 5 months ago.

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

Author

Checkbox Selection And Initrowdetail Posts
August 21, 2013 at 1:45 pm Checkbox Selection And Initrowdetail #27290

Greytrix
Participant

Hi Peter,

We are using latest jqxgrid (3.0.1) . Your team have provided some new good features in that.

We are using a nested grid with checkbox selection mode (new feature) and we suspect that we can track the checked/unchecked event of the checkbox in the grid. Also, can we programmatically call the initrowdetails as we want to access the detail grid when the page is loaded for the first time.

Actually, We wanted to check all the rows in the detail grid when the parent row is checked.

Regards,
Abdul

August 21, 2013 at 3:13 pm Checkbox Selection And Initrowdetail #27295

Peter Stoev
Keymaster

Hi Abdul,

Thanks for writing.

“initrowdetails” is called only on demand when you expand a row for first time. It cannot be explicitly called unless you expand the details row either through a mouse click or “showrowdetails” method cal.. When you select/unselect a row, jqxGrid raises the ‘rowselect’ and ‘rowunselect’ events. You can use these to trigger changes in the selection.

Best Regards,
Peter Stoev

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

August 22, 2013 at 2:45 pm Checkbox Selection And Initrowdetail #27461

Greytrix
Participant

Hi Peter,

Yes, ‘rowselect’ and ‘rowunselect’ events are getting called but not when we select the select all from Header column.

Regards,
Abdul

August 26, 2013 at 7:12 am Checkbox Selection And Initrowdetail #27660

Greytrix
Participant

Hi Peter,

Is there any event when we select the select all from Header column?

Regards,
Abdul

August 26, 2013 at 4:41 pm Checkbox Selection And Initrowdetail #27724
Peter Stoev
Keymaster
Hi Abdul,

Please, find below a sample which demonstrates how to get the state changes of the Header Checkbox.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to show a checkbox column in the Grid plugin.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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/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="../../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="../../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, true);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'checkbox',
                columns: [
                  { text: 'First Name', editable: false, datafield: 'firstname', width: 100 },
                  { text: 'Last Name', editable: false, datafield: 'lastname', width: 100 },
                  { text: 'Product', editable: false, datafield: 'productname', width: 180 },
                  { text: 'Available', datafield: 'available', threestatecheckbox: true, columntype: 'checkbox', width: 70 },
                  { text: 'Quantity', editable: false, datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', editable: false, datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', editable: false, datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            // find checkbox
            $("#jqxgrid .jqx-grid-column-header [role='checkbox']").on('mousedown', function (event) {
                var checked = !$("#jqxgrid .jqx-grid-column-header [role='checkbox']").jqxCheckBox('checked');
                $("#log").html("" + checked);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;">
        <div id="jqxgrid">
        </div>
     </div>
    <br />
    <div id="log"></div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
August 27, 2013 at 5:41 am Checkbox Selection And Initrowdetail #27756

Greytrix
Participant

HI Peter ,

Thanks a lot. I was trying in a same way but missing something.

Regards,
Abdul

August 27, 2013 at 12:07 pm Checkbox Selection And Initrowdetail #27786

Xoran
Member

Hi Peter,

With me, it does not work.

“# jqxgrid. JQX-grid-column-header [role = ‘checkbox’]”

In my code, role = ‘ColumnHeader’ and not ‘checkbox’. But if I replace ‘checkbox’ to ‘ColumnHeader’, it works, but how to differentiate the checkbox column in the other columns?

Regards,
Muriel.

August 27, 2013 at 12:49 pm Checkbox Selection And Initrowdetail #27794

Peter Stoev
Keymaster

Hi Muriel,

The post is for a column with checkbox selection. If your target is column clicks, use the columnclick event.

Best Regards,
Peter Stoev

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

August 27, 2013 at 2:08 pm Checkbox Selection And Initrowdetail #27802

Xoran
Member

Hi Peter,

Thank you for your answer.
I use a column with checkbox selection (selectionmode: ‘checkbox’), but my role is not ‘checkbox’, but ‘ColumnHeader’.

‘rowselect’ and ‘rowunselect’ events are getting called but not when we select the select all from Header column.

Regards,
Muriel.

August 27, 2013 at 2:23 pm Checkbox Selection And Initrowdetail #27803

Peter Stoev
Keymaster

Hi Muriel,

The role of the checkbox in the column header on a CheckBox column is “checkbox”. At least that is for all users that use the current version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 3, 2013 at 9:32 am Checkbox Selection And Initrowdetail #28205

Xoran
Member

Hi Peter,

Thank you very much for your answers as fast.

Well I found role = ‘checkbox’.

Thank you.

But I encounter another problem.

$(“#jqxgrid .jqx-grid-column-header [role=’checkbox’]”).on(‘mousedown’, function (event) {
…..
});
The event does not take place …
It works to a certain level:
$(“#jqxgrid #contentjqxgrid”).on(‘mousedown’, function (event) {
…..
}); -> It works, but a lower level:
$(“#jqxgrid .jqx-grid-column-header”).on(‘mousedown’, function (event) {
…..
}); -> It does already work anymore.

We looked at several, but we do not find the solution.
We just can not target a child #contentjqxgrid, and yet the DOM is ok.

Regards,
Muriel.

September 3, 2013 at 9:38 am Checkbox Selection And Initrowdetail #28206

Peter Stoev
Keymaster

Hi Muriel,

When you select/unselect row, use the Grid’s rowselect and rowunselect events. The solution I provided in this Forum topic is for triggering selection changes of the Header Checkbox only, because the individual row selection through Checkboxes is already handled through the rowselect and rowunselect events exposed in the API.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 8, 2013 at 3:16 pm Checkbox Selection And Initrowdetail #28507

areis
Participant

hi!

$(“#jqxgrid .jqx-grid-column-header [role=’checkbox’]”).on(‘mousedown’, function (event) {
var checked = !$(“#jqxgrid .jqx-grid-column-header [role=’checkbox’]”).jqxCheckBox(‘checked’);
$(“#log”).html(“” + checked);
});

dont work

var source =
{
datatype: “json”,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘total’, type: ‘number’ }
],
url: url,
};

if i comment url works

September 8, 2013 at 4:15 pm Checkbox Selection And Initrowdetail #28508

Peter Stoev
Keymaster

Hi areis,

The posted code by me definitely works. However, when you use parts of the code it depends on whether the Grid is initialized or not. If you use async binding, make sure that you make jQuery selection of Grid elements and take into account that the Grid is initialized after it is i.e in the Grid’s “bindingcomplete” event handler or in its “ready” callback.

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.