This is a migrated thread and some comments may be shown as answers.

RadGrid detect left or right click selecting a row

3 Answers 213 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ali
Top achievements
Rank 1
Ali asked on 05 Sep 2013, 09:11 AM
Hi,

Is there any way through JavaScript to detect if a row is selected using left click or right click? When a row is right clicked, it is first selected and immediately the context menu is fired.
If a row is left clicked, it is selected, and right clicking on the selected row fires the context menu. I need to distinguish between the two.


Regards,
Ali.

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 05 Sep 2013, 12:13 PM
Hi Ali,

Please try the following code snippet.

JS:

<script type="text/javascript">
              var index1;
 
              function rowClick(sender, args) {
                  //Row click event only will fire for left clcik
                  index1 = args._itemIndexHierarchical; //getting the row index
                  // sender._canSelect = true;//setting a  flag on row click
              }
              function RowContextMenu(sender, eventArgs) {
                  if (eventArgs._itemIndexHierarchical == index1) {
                      var menu = $find("<%=RadMenu1.ClientID %>");
                      var evt = eventArgs.get_domEvent();
 
                      if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                          return;
                      }
                      var index = eventArgs.get_itemIndexHierarchical();
                      document.getElementById("radGridClickedRowIndex").value = index;
                      sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
                      menu.show(evt);
                      evt.cancelBubble = true;
                      evt.returnValue = false;
                      if (evt.stopPropagation) {
                          evt.stopPropagation();
                          evt.preventDefault();
                      }
                  }
              }
          </script>

ASPX:
<input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />      
           <telerik:RadGrid ID="RadGrid1" runat="server">
               <MasterTableView>                 
               </MasterTableView>
               <ClientSettings>
                   <ClientEvents OnRowContextMenu="RowContextMenu" OnRowClick="rowClick" >
                   </ClientEvents>
                   <Selecting AllowRowSelect="true"></Selecting>
               </ClientSettings>          
           </telerik:RadGrid>

Thanks,
Princy
0
Princy
Top achievements
Rank 1
answered on 05 Sep 2013, 12:15 PM
HI Ali,

PLease try the following code snippet.

ASPX:
<input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />
      
           <telerik:RadGrid ID="RadGrid1" runat="server" >
               <MasterTableView >               
               </MasterTableView>
               <ClientSettings>
                   <ClientEvents OnRowContextMenu="RowContextMenu" OnRowClick="rowClick" >
                   </ClientEvents>
                   <Selecting AllowRowSelect="true"></Selecting>
               </ClientSettings>           
           </telerik:RadGrid>

JS:
<script type="text/javascript">
              var index1;
              function rowClick(sender, args) {
                  //Row click event only will fire for left clcik
                  index1 = args._itemIndexHierarchical; //getting the row index
                  // sender._canSelect = true;//setting a  flag on row click
              }
              function RowContextMenu(sender, eventArgs) {
                  if (eventArgs._itemIndexHierarchical == index1) {
                      var menu = $find("<%=RadMenu1.ClientID %>");
                      var evt = eventArgs.get_domEvent();
 
                      if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                          return;
                      }
                      var index = eventArgs.get_itemIndexHierarchical();
                      document.getElementById("radGridClickedRowIndex").value = index;
                      sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
                      menu.show(evt);
                      evt.cancelBubble = true;
                      evt.returnValue = false;
                      if (evt.stopPropagation) {
                          evt.stopPropagation();
                          evt.preventDefault();
                      }
                  }
              }
          </script>

Thanks,
Princy
0
Ali
Top achievements
Rank 1
answered on 06 Sep 2013, 05:38 AM
Thanks Princy,

It partially solved my problem.

Let me explain a bit deeper. When one right clicks on a row to get context menu, the row that is right clicked is in the collection of SelectedItems. What I need to know is that in the list of selectedItems, which is the one that was selected by right click - not other selection methods. 

Using the solution you gave me, it solves the problem as long as all selected items are selected using left click (i.e. I create a list of rows selected by left click and look through it later). So I know the selected row using right click is not in that list.

Bu the problem now is that if for instance row 1 is clicked, shift is held and row 5 is clicked. We have a collection of selectedItems which only includes 1 and 5, instead of 1 2 3 4 5! 

If I use selectedItems, I am again stuck in the same state, how do I know which row was selected using right click, but was not selected using other selection methods previously?

Do you have any suggestion?

Regards.
Tags
Grid
Asked by
Ali
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Ali
Top achievements
Rank 1
Share this question
or