How to check checkbox in the buttonclick function - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: buttonclick, cellvaluechanged, checkbox, checkbox toggle event, grid, jqxgrid, setcellvalue

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

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

Author

How to check checkbox in the buttonclick function Posts

December 17, 2014 at 10:48 pm How to check checkbox in the buttonclick function #64353

Participant

I have a button in my row, after the click I would need to check “invitation_sent” checkbox in the same row… How would that be done?


{ text: guestsStrings.send_invitation, datafield: 'Email', columntype: 'button', width: 60, cellsrenderer: function () {
                            return guestsStrings.send_invitation;
                        }, buttonclick: function (row) {
                           var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                            var rowdata = $("#jqxgrid").jqxGrid('getrowdata', selectedrowindex);

                           // check the checkbox here
                        }

December 18, 2014 at 7:42 am How to check checkbox in the buttonclick function #64370

Nadezhda

Participant

Hello vasikgreif,

Please, provide us with a full sample or jsfiddle.net demo which demonstrates the issue.

Best Regards,
Nadezhda

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

December 18, 2014 at 10:56 am How to check checkbox in the buttonclick function #64401

Nadezhda

Participant

Hello vasikgreif,

Here is an example which shows how to set checkbox to true when you click the button on the same row.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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/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/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // 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: 850,
                source: dataAdapter,
                editable: true,
                columns: [
                  { text: 'First Name', editable: false, datafield: 'firstname', width: 120 },
                  { text: 'Last Name', editable: false, datafield: 'lastname', width: 120 },
                  { 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', cellsalign: 'right', cellsformat: 'c2' },
                    {
                        text: 'Button', datafield: 'Button', columntype: 'button', cellsrenderer: function () {
                            return "Button";
                        }, buttonclick: function (row) {
                            $("#jqxgrid").jqxGrid('setcellvalue', row, "available", true);
                        }
                    }
                ]
            });
        });
    </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,
Nadezhda

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

December 19, 2014 at 1:59 pm How to check checkbox in the buttonclick function #64492

vasikgreif

Participant

Hi nadezhda, thanks, this worked like a charm! Btw., is there a documentation on functions available, so I won’t have to post such simple questions?

Thanks!
Vasik

December 19, 2014 at 2:13 pm How to check checkbox in the buttonclick function #64493

Nadezhda

Participant

Hi Vasik,

You can find all supported functionalities of jqxGrid showcased in the demo examples and described in the API Documentation.

Best Regards,
Nadezhda

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

June 27, 2016 at 10:33 pm How to check checkbox in the buttonclick function #85448

TP_DTNA

Participant

Nadezhda, there is no mention of the buttonclick callback in either of the links you posted. I only know about this feature from happening upon it in the examples. I’m looking for something similar to bind an event to a checkbox column to act when the checkbox is toggled. How would I go about doing that? Is there a place where these secret callbacks are listed?

June 28, 2016 at 4:59 am How to check checkbox in the buttonclick function #85450

Dimitar

Participant

Hello TP_DTNA,

The buttonclick callback is demonstrated in the online example Popup Editing. However, in your case, you can bind to the cellvaluechanged event which will fire when a checkbox is toggled.

Best Regards,
Dimitar

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

June 28, 2016 at 4:05 pm How to check checkbox in the buttonclick function #85475

TP_DTNA

Participant

Brilliant! That is exactly the answer I need. Thank you so much for answering so quickly. This helps us a lot.

June 30, 2016 at 5:57 pm How to check checkbox in the buttonclick function #85514

TP_DTNA

Participant

Nadezhda, unfortunately that callback did not do what I need because I need to prevent the change based on what happens when the change is attempted. For columntypes beside checkbox, I can achieve this by having a cellendedit callback on the column that returns false. But when doing that on a checkbox, it allows the change. How can I prevent the change using cellendedit?

I’ve slightly modified the example found here below in this post:

var data = generatedata(50);
 var source = {
     localdata: data,
     datafields: [{
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

var isEditable = function (row) {
    var value = $('#jqxgrid').jqxGrid('getcellvalue', row, "quantity");
    if (value < 5)
        return false;
}

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 200,
     editable: true,
     theme: 'energyblue',
     source: adapter,
     columns: [{
         text: 'Quantity',
         datafield: 'quantity',
         width: 80,
         cellsalign: 'right'
     }, {
         columntype: 'checkbox',
         text: 'Unit Price',
         datafield: 'price',
         cellsalign: 'right',
         cellsformat: 'c2',
         cellbeginedit: isEditable,
         cellendedit: function() { return false; }
     }]
 });

If you simply comment out the line with “columntype: ‘checkbox’,”, you’ll notice that it prevents changing the column. Not so if it’s a checkbox. How do I prevent the change?

July 1, 2016 at 5:10 am How to check checkbox in the buttonclick function #85518

Dimitar

Participant

Hello TP_DTNA,

For the checkbox column, you can use the cellendedit event to achieve your goal, e.g.:

$("#jqxgrid").on('cellendedit', function (event) {

    // event arguments.
    var args = event.args;
    // column data field.
    var dataField = event.args.datafield;
    // row's bound index.
    var rowBoundIndex = event.args.rowindex;
    // cell value
    var value = args.value;
    // cell old value.
    var oldvalue = args.oldvalue;

    if (dataField === 'price'/* your checkbox column's datafield */) {
        $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, dataField, oldvalue);
    }
});

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.