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); }
Hi Chris,
Yes, you’ve come across a bug in the igGrid’s cellClick event – I’ve logged it with internal ID 116909 – you can track it using the CASE number associated with it (CAS-95735-RF8VV1). I realize that this is unfortunate, but I’m not inclined to agree that it’s a show-stopper. The problem you’ve described (not being able to manipulate the checkboxes in the NextRound column) is caused by the fact that the getCellValue API method belongs to the igGrid widget and not to igGridSelection. Unfortunately, you’re right about the rapid clicking – it causes selection to be triggered for the 1st cell of any row. I’ll open a new bug for this and ask our support team to associate it with your other forum thread (http://es.infragistics.com/community/forums/t/71578.aspx). Here’s a slightly updated version of your grid’s configuration (incorporating the fix I mentioned above and the fact that I commit the change to the checkbox's state so that it's not styled as pending (when the entire row receives italics)) so that it may aid other forum members in the future :
(circumventing the fact that a checkbox’s state requires 3 clicks when selection is enabled alongside with Updating was pretty smart)
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, editCellStarting: function(evt, ui) { //if(ui.columnKey == "NextRound") // return false; return true; } } ], width: "500px", dataSource: Competition.CompetitionRoundEntries, autoGenerateColumns: false, renderCheckboxes: true, cellClick: function(evt, ui){ //debugger; //if(ui.colKey == 'NextRound') if(ui.colIndex == 0) { //debugger; $(this).igGridSelection('selectCell', ui.rowIndex, ui.colIndex); $(this).igGridUpdating('startEdit', ui.rowIndex, ui.colIndex); var myVal = $(this).igGrid('getCellValue', ui.rowIndex, 'NextRound'); $(this).igGridUpdating("setCellValue", ui.rowIndex, 'NextRound', !myVal); $(this).igGrid('commit'); } } });
PS: I'm using http://hilite.me to get HTML-formatted syntax highlighting in my posts; the only downside is that I need to paste the HTML into the new post's HTML code each time, but it's a good trade-off.
Much appreciated. Using your code still allowed the user to accidentally check the checkbox by clicking another cell 3 times though (even slowly - 1= select, 2=edit, 3=exit edit but check checkboxes) I was able to get around both issues by dropping the cellClick event and switching to using the cellSelectionChanged event off the Selection behavior.
{ name: "Selection", mode: "cell", multipleSelection: false, activation: true, cellSelectionChanged: function (evt, ui) { var actualRowIdx = ui.cell.row[0].sectionRowIndex; // rowIndex is not zero based, but other methods are and expect a zero-based index (Infragistics says to use undocumented ui.cell.row[0].sectionRowIndex) if (ui.cell.columnKey === 'NextRound') { var myCell = grid.igGridSelection('getCellValue', actualRowIdx, 'NextRound'); var dataview = grid.data('igGrid').dataSource.dataView(); var myVal = dataview[actualRowIdx]["NextRound"]; grid.igGridSelection('selectCell', actualRowIdx, ui.cell.index ); grid.igGridUpdating('startEdit', actualRowIdx, ui.cell.index ); grid.igGridUpdating("setCellValue",actualRowIdx, 'NextRound', !(myVal)); dataview[actualRowIdx]["NextRound"] = !(myVal); } else{ grid.igGridSelection('selectCell', actualRowIdx, ui.cell.index ); grid.igGridUpdating('startEdit', actualRowIdx, ui.cell.index ); } } }
The only problem now is that clicking on a checkbox cell a second time seems to enter edit mode and results in a blank field (looks like a text box but doesn't accept text) which sticks around until another checkbox is put into the same state or the page is refreshed. Any thoughts on that one?
Thanks for the link to hilite.me it's pretty awesome and made the above code look so much better in this forum - and copying it isn't a big deal, I was already having to copy to notepad, then copy from there and paste into the forum and redo all the lines to get around the double-spaced line breaks which are the default.
Here is the configuration of the Selection feature that I can recommend:
{ name: "Selection", mode: "cell", multipleSelection: false, activation: true, cellSelectionChanged: function (evt, ui) { var actualRowIdx = ui.cell.rowIndex; //if (ui.cell.columnKey === 'NextRound') { //debugger; if (ui.cell.index == 0) { //var myCell = $('#grid1').igGridSelection('getCellValue', actualRowIdx, 'NextRound'); // As I mentioned earlier in the forum thread, igGridSelection does not have a getCellValue API method. var myCell = $('#grid1').igGrid('getCellValue', actualRowIdx, 'NextRound'); var dataview = $('#grid1').data('igGrid').dataSource.dataView(); var myVal = dataview[actualRowIdx]["NextRound"]; $('#grid1').igGridSelection('selectCell', actualRowIdx, ui.cell.index ); $('#grid1').igGridUpdating('startEdit', actualRowIdx, ui.cell.index ); $('#grid1').igGridUpdating("setCellValue",actualRowIdx, 'NextRound', !(myVal)); dataview[actualRowIdx]["NextRound"] = !(myVal); } else{ $('#grid1').igGridSelection('selectCell', actualRowIdx, ui.cell.index ); $('#grid1').igGridUpdating('startEdit', actualRowIdx, ui.cell.index ); } } } and here's for the Updating feature - I've just set a handler for the editCellStarting event so that I can cancel it if we're on the NextRound column: [code] { name: 'Updating', editMode: 'cell', enableAddRow: false, enableDeleteRow: false, editCellStarting: function(evt, ui) { if(ui.columnKey == "NextRound") return false; return true; } }
{ name: "Selection", mode: "cell", multipleSelection: false, activation: true, cellSelectionChanged: function (evt, ui) { var actualRowIdx = ui.cell.rowIndex; //if (ui.cell.columnKey === 'NextRound') { //debugger; if (ui.cell.index == 0) { //var myCell = $('#grid1').igGridSelection('getCellValue', actualRowIdx, 'NextRound'); // As I mentioned earlier in the forum thread, igGridSelection does not have a getCellValue API method. var myCell = $('#grid1').igGrid('getCellValue', actualRowIdx, 'NextRound'); var dataview = $('#grid1').data('igGrid').dataSource.dataView(); var myVal = dataview[actualRowIdx]["NextRound"]; $('#grid1').igGridSelection('selectCell', actualRowIdx, ui.cell.index ); $('#grid1').igGridUpdating('startEdit', actualRowIdx, ui.cell.index ); $('#grid1').igGridUpdating("setCellValue",actualRowIdx, 'NextRound', !(myVal)); dataview[actualRowIdx]["NextRound"] = !(myVal); } else{ $('#grid1').igGridSelection('selectCell', actualRowIdx, ui.cell.index ); $('#grid1').igGridUpdating('startEdit', actualRowIdx, ui.cell.index ); } } }
and here's for the Updating feature - I've just set a handler for the editCellStarting event so that I can cancel it if we're on the NextRound column: [code]
{ name: 'Updating', editMode: 'cell', enableAddRow: false, enableDeleteRow: false, editCellStarting: function(evt, ui) { if(ui.columnKey == "NextRound") return false; return true; } }