Checkbox column requires 3 clicks to update

1460

Chris posted over 12 years ago

I have a checkbox column on a grid. When I go to check one of the checkboxes it takes 3 clicks to get any checked. The first click selects the row or cell depending on how it's set up. The second enters edit mode and the third finally checks it. This is pretty rigorous for someone doing data entry just to check a checkbox.

Maybe I'm missing something but it seems like this is due to how the grid is constructed.

845

Suggested Answer
[INFRAGISTICS] Lyubomir Ahtarov posted over 12 years ago
Hello from me,

We have a solution for single click editing and updating with checkbox.

Please use the following code:

Code Snippet

<script type="text/javascript">

        var namedData = new Array();

        namedData[0] = { "ProductID": 1, "UnitsInStock": 100, "ProductDescription": "Laptop", "UnitPrice": "$1000", "DateCol": "1/1/3333", "OnSite":true};

        namedData[1] = { "ProductID": 2, "UnitsInStock": 15, "ProductDescription": "Hamburger", "UnitPrice": null,"DateCol":null, "OnSite": true };

        namedData[2] = { "ProductID": 3, "UnitsInStock": 4.356, "ProductDescription": "Beer", "UnitPrice": "$1000", "DateCol":null, "OnSite":false };

        namedData[3] = { "ProductID": 4, "UnitsInStock": null, "ProductDescription": null, "UnitPrice": null, "DateCol":null, "OnSite":true };

        namedData[4] = { "ProductID": 5, "UnitsInStock": "65", "ProductDescription": "trainers", "UnitPrice": "$1000", "DateCol": "1/1/2222","OnSite":true};

        namedData[5] = { "ProductID": 6, "UnitsInStock": null, "ProductDescription": "coffee cup", "UnitPrice": "$1000" , "DateCol":null, "OnSite":true};

        namedData[6] = { "ProductID": 7, "UnitsInStock": "", "ProductDescription": "", "UnitPrice": "$1000" , "DateCol":null, "OnSite":true};

        namedData[7] = { "ProductID": 8, "UnitsInStock": "998", "ProductDescription": "mouse", "UnitPrice": "$1000" , "DateCol":null, "OnSite":false};

        namedData[8] = { "ProductID": 9, "UnitsInStock": "43", "ProductDescription": "keyboard", "UnitPrice": "$1000", "DateCol": "3/3/2011" ,"OnSite":true};

        namedData[9] = { "ProductID": 10, "UnitsInStock": "43", "ProductDescription": "keyboard", "UnitPrice": "$1000" ,"DateCol":null, "OnSite":true};



        $(function () {

            $("#grid1").igGrid({

                height: "600px",

                width: "1600px",

                columns: [

                    { headerText: "Product ID", key: "ProductID", width: "280px", dataType: "number" },

                    { headerText: "Units in Stock", key: "UnitsInStock", width: "80px", dataType: "number", format: 'double' },

                    { headerText: "Product Description", key: "ProductDescription", width: "150px", dataType: "string"},

                    { headerText: "Unit Price", key: "UnitPrice", width: "70px", dataType: "integer",format: 'currency' },

                    { headerText: "Date", key: "DateCol", width: "80px", dataType: "date" },

                    { headerText: "OnSite", key: "OnSite", width: "70px", dataType: "bool" }

                    ],

                autoGenerateColumns: false,

                renderCheckboxes: true,

                dataSource: namedData,

                primaryKey: "ProductID",

                features: [

                {

                    name: "Selection",

                    multipleSelection: true

                },

                {

                    name: "RowSelectors"

                },

                {

                    name: 'Updating',

                    validation : true,

                    startEditTriggers: 'click',

                    editMode: 'cell',

                    editCellStarted: function(evt, ui){

                        if (ui.columnKey === "OnSite") {

                            setTimeout(function() {

                                $("#grid1").data("igGridUpdating").endEdit(1, evt);

                                $("#grid1").igGrid("commit");

                            }, 300);

                        }

                    },

                }

            ]

            });



        });



    script>
Cancel
Reply

Reject Answer

Cancel
6279

[Infragistics] Borislav Traykov posted over 12 years ago in reply to Chris

Hi Chris,

Yep, it's a problem in the igGrid's cellClick event is incorrectly fired for the 1st cell of the row when you click on that cell after you've entered edit mode and you also have cell selection in use.

I've logged development issue #116993 which will be associated with this forum thread shortly.
A colleague of mine from the support team will take care of it shortly - as soon as that's done you will be able to track the issue's progress using the CASE number (from the bottom of this forum thread page for example).

It's sad that this issue has bumped into you, but such things happen I'm afraid :/ - I see that you're already implementing a workaround as you have mentioned here (https://ko.infragistics.com/community/forums/f/ignite-ui-for-javascript/71579/if-hidden-column-is-before-any-other-columns-ui-object-of-click-events-incorrect/362044#362044).

We'll try to help you out to the best of our ability so both you and us get sh... work done :)

Cheers,
Borislav
Cancel
Reply

Cancel
1460

Offline Chris posted over 12 years ago in reply to Stanimir Todorov

For checkboxes I've never seen another grid behave that way. It's ridiculous to expect the user to click 3 times to check a checkbox.

That wouldn't be so bad if I could easily and reliably capture that event and check the checkbox. It sounds like I should be able to but as the code I provided in https://ko.infragistics.com/community/forums/f/ignite-ui-for-javascript/71579/if-hidden-column-is-before-any-other-columns-ui-object-of-click-events-incorrect should illustrate, I can't reliably capture which column is being clicked. I recorded which the grid thinks is being clicked and while repeatedly clicking on the 5th column, the grid went back and forther between thinking it was the 5th then the 1st then the 5th and the 1st again.

How can I reliably capture which cell was clicked on?
Cancel
Reply

Cancel
2735

Suggested Answer
Stanimir Todorov posted over 12 years ago

Hello there,

Thanks for using our controls.

It's due to grid configuration. You have to select the row an then click to edit the row and after that check/uncheck the checkbox in edit mode.

If you have any question, do not hesitate to ask.

Regards,

Stanimir Todorov
Cancel
Reply

Reject Answer

Cancel