Hi Infragistics team,
I have a button in one of my grids and I would like to add the Selection and RowSelectors features.
However, I don't want to change selection when a user clicks this button. How do I cancel the rowSelectionChanging event only when clicking in this row or on the button?Also acceptable would be a method to completely disable selection by clicking on the row, only using the checkbox.
Hello Ben,
Instead of using the context property, the prevObject property could be used. Canceling the rowSelectionChanging event could look as follows:
rowSelectionChanging: function (evt, ui) {
if(ui.row.element.prevObject[0].tagName == "BUTTON"){
return false;
}
Please test it on your side and let me know if you need any further information regarding this matter.
Regards, Monika Kirkova, Infragistics
Hello Monika,
Thanks for your reply.The first suggestion seems like an ideal solution, however it is not working in the latest version of jQuery. If you set the script url in your example to this "https://code.jquery.com/jquery-3.6.0.min.js" it no longer works.This is because the context propery was removed in v3.0https://api.jquery.com/context/Additionally, the ui.row.element selector always seems to point to the TR element instead of the cell in this version.Do you have an alternative suggestion?
After investigating this further, I have determined that your requirement could be achieved by binding a method to the rowSelectionChanging event and checking which element from the row has been clicked. If this is the button the event would be canceled. This could be achieved as follows:
{
name: "Selection",
if(ui.row.element.context.tagName == "BUTTON"){
},
Additionally, if the row should be selected only by clicking on the checkbox, what I could suggest is defining a global variable and setting its value to true if the checkBoxStateChanging event is emitted. Afterwards in the rowSelectionChanging event the value of the variable could be checked and if is false, the event would be canceled.
if(!isSelectorClicked){
isSelectorClicked = false;
name: "RowSelectors",
enableCheckBoxes: true,
checkBoxStateChanging: function(evt, ui){
isSelectorClicked = true;
Below I am attaching a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.
igGridSelection.zip