Hello,
I have a grid with igGridSelection enabled and i am using the row selectors. The check boxes work fine, allowing a user to select multiple rows with ease. However, if they click outside of the check box, they will select that row and also lose any other rows selected. How can I disable the row selection when the user clicks anything that isn't the row selector checkbox?
Currently I am trying to stop it in the rowSelectionChanging event. The only problem here is that neither the evt or the ui variables exposes a difference based on where the user clicked, despite it being obvious that the tool is handling the two separately. In chrome, I can use event.currentTarget to tell the difference, but I do not have this option in Firefox 24 which my client is using. Also, the rowSelectorClicked event in the igGridRowSelectors api fires when someone clicks the row selector's cell, but not the selector itself. Any help would be greatly appreciated.
Hello Milind,
Thank you for posting in our community.
What I can suggest in order to detect whether the selection is coming from a checkbox or from regular selection is handling checkboxStateChanging event and afterwards selectionChanging event. Basically, the idea is to use a global variable as a flag. When selection is cause by the checkbox the checkboxStateChanging event is fired first. In this event the value of the flag could be set to true. Afterwards. the selectionChanging event is going to be fired. In this event the value of the flag could be changed and if it is false (which means that selection is not coming from a checkbox) the event could be cancelled. For example:
features: [ { name: "RowSelectors", enableCheckBoxes: true, enableRowNumbering: false, checkBoxStateChanging: function (evt, ui) { //we use this variable as a flag whether the selection is coming from a checkbox isFiredFromCheckbox = true; } }, { name: "Selection", mode: 'row', persist: true, multipleSelection: true, activation: true, rowSelectionChanging: function (evt, ui) { if (isFiredFromCheckbox) { alert('Event fired from checkbox'); isFiredFromCheckbox = false; } else { //in this case selection is caused by regular selection and it is canceled by returning false return false; } }, } ]
features: [
{
name: "RowSelectors",
enableCheckBoxes: true,
enableRowNumbering: false,
checkBoxStateChanging: function (evt, ui) {
//we use this variable as a flag whether the selection is coming from a checkbox
isFiredFromCheckbox = true;
}
},
name: "Selection",
mode: 'row',
persist: true,
multipleSelection: true,
activation: true,
rowSelectionChanging: function (evt, ui) {
if (isFiredFromCheckbox) {
alert('Event fired from checkbox');
isFiredFromCheckbox = false;
else {
//in this case selection is caused by regular selection and it is canceled by returning false
return false;
]
I am attaching my sample for your reference.
Please feel free to contact me if you have any additional questions regarding this matter.
Hi,
How can i get ID of selected checkbox
hi Vasya, on a similar related topic, is there a way for me to DYNAMICALLY select/deselect row or check/uncheck the checkbox if I know a row Index/ID ? Your help looking into this is greatly appreciated.
Regards,
Trung
Vasya,
Thanks for this answer. It worked perfectly!