jQuery UI Widgets Forums Grid createeditor and initeditor not working on checkbox column

This topic contains 7 replies, has 4 voices, and was last updated by  a2m developer 6 years ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • Abdo
    Participant

    Hello,

    I have an editable grid with selectionmode=singlerow
    I am using the createeditor on the columns for some customization, the problem is that the createeditor event is not being triggered on the checkbox column. Is it the default behavior?

    Attached is a sample code based on the grid editing demo, you can see the alert on the Quantity column is working while on the Available column is not.

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title id='Description'>In order to enter in edit mode, 'click' on a Grid cell. The sample illustrates how to enable/disable the editing and the jqxGrid edit modes.</title>
            <meta name="description" content="jQuery Grid data editing modes. The cell editing is the default Grid editing mode" /> 	
            <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.edit.js"></script>
            <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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/jqxcalendar.js"></script>
            <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
            <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
            <script type="text/javascript" src="../../jqwidgets/globalization/globalize.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);
    
                    var source =
                            {
                                localdata: data,
                                datatype: "array",
                                updaterow: function (rowid, rowdata, commit) {
                                    // synchronize with the server - send update command
                                    // call commit with parameter true if the synchronization with the server is successful 
                                    // and with parameter false if the synchronization failed.
                                    commit(true);
                                },
                                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'}
                                        ]
                            };
    
                    var dataAdapter = new $.jqx.dataAdapter(source);
    
                    // initialize jqxGrid
                    $("#jqxgrid").jqxGrid(
                            {
                                width: 850,
                                source: dataAdapter,
                                editable: true,
                                selectionmode: 'singlerow',
                                editmode: 'click',
                                columns: [
                                    {text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90},
                                    {text: 'Last Name', datafield: 'lastname', width: 90},
                                    {text: 'Product', datafield: 'productname'},
                                    {text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right',
                                        createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                                            alert('createeditor: ' + editor[0].id);
                                        }},
                                    {text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67,
                                        createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                                            alert('createeditor: ' + editor[0].id);
                                        }
                                    }
                                ]
                            });
    
                    var editModes = ['Click', 'Double-Click', 'Selected Cell Click'];
                    $("#editmodes").jqxDropDownList({autoDropDownHeight: true, dropDownWidth: 150, width: 150, height: 25, selectedIndex: 0, source: editModes});
                    $("#firstname").jqxCheckBox({checked: true});
                    $("#lastname").jqxCheckBox({checked: true});
                    $("#productname").jqxCheckBox({checked: true});
                    $("#available").jqxCheckBox({checked: true});
                    $("#quantity").jqxCheckBox({checked: true});
    
                    // change the Edit mode.
                    $("#editmodes").on('select', function (event) {
                        var index = event.args.index;
                        var editMode = index == 0 ? 'click' : index == 1 ? 'dblclick' : 'selectedcell';
                        $("#jqxgrid").jqxGrid({editmode: editMode});
                    });
    
                    // change the Columns Editable state.
                    $("#firstname, #lastname, #productname, #available, #quantity").on('change', function (event) {
                        var datafield = event.target.id;
                        $("#jqxgrid").jqxGrid('setcolumnproperty', datafield, 'editable', event.args.checked);
                    });
                });
            </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: 20px;">
                    <div style="float: left; margin-top: 10px;">
                        <span>Edit Mode:</span>
                        <div style="margin-top: 5px;" id="editmodes">
                        </div>
                    </div>
                    <div style="float: left; margin-left: 20px; margin-top: 10px;">
                        <span>Editable Columns:</span>
                        <div>
                            <div style="float: left;">
                                <div style="margin-top: 5px;" id="firstname">
                                    First Name</div>
                                <div style="margin-top: 5px;" id="lastname">
                                    Last Name</div>
                                <div style="margin-top: 5px;" id="quantity">
                                    Quantity</div>
                            </div>
                            <div style="float: left; margin-left: 20px;">
                                <div style="margin-top: 5px;" id="productname">
                                    Product</div>
                                <div style="margin-top: 5px;" id="available">
                                    Available</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </body>
    </html>

    Peter Stoev
    Keymaster

    Hi Abdo,

    This is the default behavior by design. The checkbox column cannot be modified and is not necessary to be. It’s a checkbox displayed in each cell. To apply custom logic, use a different Grid column.

    Best Regards,
    Peter Stoev

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


    Abdo
    Participant

    Hi Peter,

    Thanks for your reply, what i am trying to achieve is to use the “Enter” key of the keyboard as “Tab” in the editable grid so on an “Enter” keydown of a column the focus moves to the next column.

    For that i am using the createeditor to listen to keydown event, the code is working for all columns except checkbox.
    Knowing that the tab keydown on a checkbox column do move the focus to the next column, what is the best approach to make the Enter key behave the same as Tab on a checkbox column.

    My current createeditor looks like this

    function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
    	editor.bind("keydown", function(e) {
    		e = e || window.event;
    		switch (e.key) {
    			// use Enter as Tab
    			case "Enter":
    				e.stopPropagation();
    				
    				var ne = jQuery.Event("keydown");
    				ne.keyCode = 9; // keycode of Tab
    				ne.key = "Tab";
    				ne.which = 9; // keycode of Tab
    				
    				editor.trigger(ne);
    			break;
    		}
    	});
    }

    admin
    Keymaster

    Hi Abdo,

    Tab key moves to next column by default. Enter key’s function is different.


    Abdo
    Participant

    Yes I know that, but i am migrating some windows application to web and the users are familiar with the enter key to move between columns, so they want to keep the same functionality and i am trying to achieve this in my grid.

    As i said in the prev post, my approach of using createeditor works for all the columns except checkbox, cause it doesn’t reply to createeditor property. Do you have any other suggestion to implement the enter key as tab inside the grid? Thanks


    Peter Stoev
    Keymaster

    Hi Abdo,

    You can override the Enter key behavior by using handlekeyboardnavigation. Example is shown here: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/handlekeyboard.htm?light

    Best Regards,
    Peter Stoev

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


    Abdo
    Participant

    Thanks Peter,

    This is exactly the event i was looking for.


    a2m developer
    Participant

    Hi Peter,

    Your statement above is inaccurate. “The checkbox column cannot be modified and is not necessary to be. It’s a checkbox displayed in each cell.”

    A perfect example of a use case where a customized checkbox is necessary would be a Boolean/Null column. It would be great if we could customize the ‘hasThreeStates” to be true to utilize the intermediate state resulting in a null.

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

You must be logged in to reply to this topic.