I added a hidden column as the first column of my column definition. When I clicked the first column which is the 'NextRound' column in the code below, the ui.colKey is for the hidden column 'CompetitionRoundEntryID'. I was able to work around this temporarily by moving the hidden column to the end, but it seems like if this type of issue is present in the grid that it's not ready for prime time yet.
grid.igGrid( { columns: [ { headerText: "CompetitionRoundEntryID", key: "CompetitionRoundEntryID", dataType: "string", hidden: true }, { headerText: "Finals", key: "NextRound", dataType: "bool" }, { headerText: "Competitor", key: "Competitor", dataType: "string" }, { headerText: "Partner", key: "Partner", dataType: "string" }, { headerText: "J1", key: "J1", dataType: "number" , }, { headerText: "J2", key: "J2", dataType: "number" }, { headerText: "J3", key: "J3", dataType: "number" }, { headerText: "J4", key: "J4", dataType: "number" }, { headerText: "J5", key: "J5", dataType: "number" }, { headerText: "", key: "DIVIDER", dataType: "string", width:10 }, { headerText: "1", key: "1", dataType: "number" , }, { headerText: "2", key: "2", dataType: "number" }, { headerText: "3", key: "3", dataType: "number" }, { headerText: "4", key: "4", dataType: "number" }, { headerText: "5", key: "5", dataType: "number" },], features: [{ name: "Sorting", type: "local" }, { name: "Selection", mode: "cell", multipleSelection: false, activation: true }, { name: 'Updating', editMode: 'cell', enableAddRow: false, enableDeleteRow: false }], width: "500px", dataSource: Competition.CompetitionRoundEntries , autoGenerateColumns: false, renderCheckboxes: true, cellClick: function(evt, ui){debugger; if(ui.colKey==='NextRound'){ $(this).igGridSelection('selectCell', ui.rowIndex, ui.colIndex); $(this).igGridUpdating('startEdit', ui.rowIndex, ui.colIndex); var myVal = $(this).igGridSelection('getCellValue', ui.rowIndex, 'NextRound'); $(this).igGridUpdating("setCellValue", ui.rowIndex, 'NextRound', !myVal); }
}
});
Competition.CompetitionRoundEntries = [ { 'CompetitionRoundEntryID': 1, 'NextRound': false, 'Competitor': 'Some Competitor 1', 'Partner': 'Some Partner 1', 'J1': '', 'J2': '', 'J3': '', 'J4': '', 'J5': '' }, { 'CompetitionRoundEntryID': 2, 'NextRound': false, 'Competitor': 'Some Competitor 2', 'Partner': 'Some Partner 2', 'J1': '', 'J2': '', 'J3': '', 'J4': '', 'J5': '' }, { 'CompetitionRoundEntryID': 3, 'NextRound': false, 'Competitor': 'Some Competitor 3', 'Partner': 'Some Partner 3', 'J1': '', 'J2': '', 'J3': '', 'J4': '', 'J5': '' }, { 'CompetitionRoundEntryID': 4, 'NextRound': false, 'Competitor': 'Some Competitor 4', 'Partner': 'Some Partner 4', 'J1': '', 'J2': '', 'J3': '', 'J4': '', 'J5': '' }, { 'CompetitionRoundEntryID': 5, 'NextRound': false, 'Competitor': 'Some Competitor 5', 'Partner': 'Some Partner 5', 'J1': '', 'J2': '', 'J3': '', 'J4': '', 'J5': '' } ];
Ok, the workaround I mentioned doesn't quite work as the column keys get hosed pretty easily.
The code "var myVal = grid.igGridSelection('getCellValue', ui.rowIndex, 'NextRound');" doesn't actually return the value of the cell so the code above doesn't quite work. "grid" is set up via "grid = $("#Grid");" (quoted because the formatting in this forum is horrible when copying and pasting) So I tried just setting the value of the NextRound to true just to test some stuff. Turns out if you triple-click or more rapidly on any cell in a row, I was able to get the checkbox checked as sooner or later the grid would think I was clicking on the NextRound column.
Here's the updated code that checks the checkbox, but why when I click on the J5 cell does it do the following:
1st click - selects cell J52nd click - starts edit on J53rd click - exits edit on J5 but also checks the checkbox in the NextRound column because it receives a click event behind the scenes
Why does the first cell of the row receive a click event when leaving another cell?
cellClick: function (evt, ui) { if (ui.colKey === 'NextRound') { var myCell = grid.igGridSelection('getCellValue', ui.rowIndex, 'NextRound'); var dataview = grid.data('igGrid').dataSource.dataView(); var myVal = dataview[ui.rowIndex]["NextRound"]; grid.igGridSelection('selectCell', ui.rowIndex, ui.colIndex); grid.igGridUpdating('startEdit', ui.rowIndex, ui.colIndex);grid.igGridUpdating("setCellValue", ui.rowIndex, 'NextRound', !(myVal));dataview[ui.rowIndex]["NextRound"] = !(myVal); }