igGridSelection – make selections only using the row selector check box

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;

                     }

 

                },

 }

           ]

 

I am attaching my sample for your reference.

Please feel free to contact me if you have any additional questions regarding this matter.

Attachments:

1. igGridDetechSelectionFrmCheckbox.zip

Vasya,

Thanks for this answer.  It worked perfectly!

Vasya,

There's only one more issue.  I needed this for two grids in my application.  The first grid, everything is fine.  The second grid also has igGridUpdating enabled and now I need to have a row selected before I can edit it.  Is there any way to make the row edit start on non-selected cells?  I tried changing the startEditTrigger thinking that the grid was dealing with the selection as the first click somehow.  But this just made it that I needed to have the cell selected before the double click would start the row editing. Again, any help would be greatly appreciated.

Hello Milind,

What I can suggest for achieving your requirement is handling rowSelectionChanging event. In this event the else clause(which means that the selection is not coming from a checkbox)could be handled. Right before the event is cancelled the row could be forced to enter edit mode. For example:

 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



 $("#cbRowSelectors").igGridUpdating("startEdit", ui.row.id, 0);

 return false;

}

}

I am attaching my modified sample for your reference.

Please let me know if you need any further assistance with this matter.

Attachments:

1. igGridSample_Modified.zip

Vasya,

I actually came to this same conclusion this morning.  I was able to implement the features exactly as I wanted.  Thanks for your time and attention.  I greatly appreciate it.

Hello Milind,

I am glad that you have been able to achieve your requirement.

Please feel free to contact me if you need any further assistance with this matter.

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

Hi,

How can i get ID of selected checkbox