How to detect Single and Double Click in ItemCommand of RadGrid

21 posts, 1 answers
  1. Eric
    Eric avatar
    37 posts
    Member since:
    Aug 2012

    Posted 31 Jan 2013 Link to this post

    Hello,

    I need a way to differentiate between Single and Double Click on the row in the ItemCommand server event of RadGrid, How can I achieve that?

    I need to to do something like this:

    protected void rgMessages_ItemCommand(object sender, GridCommandEventArgs e)
    {
        if (e.CommandName == "RowClick")
        {
            // Do Something when Row is Clicked
        {
        else if (e.CommandName == "RowDoubleClick")
        {
            // Do Something Else when Row is Double Clicked
        }
    }
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 01 Feb 2013 Link to this post

    Hello,

    var isDoubleClick = false;
     
              var clickHandler = null;
     
              var ClikedDataKey = null;
     
              function RowClick(sender, args) {
                  ClikedDataKey = args._dataKeyValues.ID;
     
                  isDoubleClick = false;
     
                  if (clickHandler) {
     
                      window.clearTimeout(clickHandler);
     
                      clickHandler = null;
     
                  }
     
                  clickHandler = window.setTimeout(ActualClick, 200);
     
              }
     
              function RowDblClick(sender, args) {
     
                  isDoubleClick = true;
     
                  if (clickHandler) {
     
                      window.clearTimeout(clickHandler);
     
                      clickHandler = null;
     
                  }
     
                  clickHandler = window.setTimeout(ActualClick, 200);
     
              }
     
              function ActualClick() {
     
                  if (isDoubleClick) {
     
                      var grid = $find("<%=RadGrid1.ClientID %>");
                      if (grid) {
                          var MasterTable = grid.get_masterTableView();
                          var Rows = MasterTable.get_dataItems();
                          for (var i = 0; i < Rows.length; i++) {
                              var row = Rows[i];
                              if (ClikedDataKey != null && ClikedDataKey == row.getDataKeyValue("ID")) {
                                  MasterTable.fireCommand("MyClick2", ClikedDataKey);
                              }
                          }
                      }
     
                  }
     
                  else {
     
                      var grid = $find("<%=RadGrid1.ClientID %>");
                      if (grid) {
                          var MasterTable = grid.get_masterTableView();
                          var Rows = MasterTable.get_dataItems();
                          for (var i = 0; i < Rows.length; i++) {
                              var row = Rows[i];
                              if (ClikedDataKey != null && ClikedDataKey == row.getDataKeyValue("ID")) {
                                  MasterTable.fireCommand("MyClick1", ClikedDataKey);
                              }
                          }
                      }
     
                  }
     
     
     
              }
    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
        {
            if (e.CommandName == "MyClick1")
            {
                // songle click
                //e.CommandArgument -- Get access datakey here
            }
            else if (e.CommandName == "MyClick2")
            {
                // Double click
                //e.CommandArgument -- Get access datakey here
            }
        }
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnNeedDataSource="RadGrid1_NeedDataSource">
               <MasterTableView DataKeyNames="ID"
                   ClientDataKeyNames="ID">
                   <Columns>
                       ...................
                       ................
                   </Columns>
               </MasterTableView>
               <ClientSettings>
                   <ClientEvents OnRowDblClick="RowDblClick" OnRowClick="RowClick" />
               </ClientSettings>
           </telerik:RadGrid>


    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eric
    Eric avatar
    37 posts
    Member since:
    Aug 2012

    Posted 01 Feb 2013 Link to this post

    Thanks for the help Jayesh

    I tried your code but it didn't work, I also tried setting
    <ClientSettings EnablePostBackOnRowClick="true">

    but still didn't work, it always generates the standard RowClick command name, it doesn't look like these two functions are being executed.
  5. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 02 Feb 2013 Link to this post

    Hello,

    I have added sample demo in below link.

    https://skydrive.live.com/?cid=977B16A5E89A5236&id=977B16A5E89A5236!105

    Thanks,
    Jayesh Goyani
  6. Eric
    Eric avatar
    37 posts
    Member since:
    Aug 2012

    Posted 02 Feb 2013 Link to this post

    Thanks for the code sample Jayesh,
    I have a scenario where I have 5 columns
    Column1   X
    Column2   Clickable
    Column3   Clickable
    Column4   Clickable
    Column5   X
    I don't want the whole row to be clickable.

    But I only want the 3 columns in the middle to be clickable, I don't want the first and last column to trigger any Row click event, is it possible to do that with RadGrid? Thank you.
  7. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 03 Feb 2013 Link to this post

  8. Eric
    Eric avatar
    37 posts
    Member since:
    Aug 2012

    Posted 04 Feb 2013 Link to this post

    Hello Jayesh,

    If I implement this approach of firing the itemCOmmand from Client then I cannot access field values from the Item Commans,

    For example if I have 3 Rows in my grid and If I try to access say a column named "STATUS" using the following:

    string STATUS= ((GridDataItem)e.Item).GetDataKeyValue("STATUS").ToString();

    or the following

    string STATUS= ((DataRowView)e.Item.DataItem)["STATUS"].ToString();

    Then it always returns the Value of the First Row but I need to access the value of the row I clicked, even if I create a HiddenField and try to access its value from ItemCommand the HiddenField gets the value of the first row always, but I assuming since I'm firing it from client it does not recognize form server which row was clicked, is there anyway to get around this? Thank you.
  9. Eric
    Eric avatar
    37 posts
    Member since:
    Aug 2012

    Posted 05 Feb 2013 Link to this post

    I still can't find a solution to accessing row values if I fire itemcommans from client. Is there any solution to this?
  10. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 06 Feb 2013 Link to this post

    Hello,

    Please try with below code snippet.

    Please check below text in below link. "newly added".

    var isDoubleClick = false;
     
              var clickHandler = null;
     
              var ClickedIndex = null; // newly added
     
              function RowClick(sender, args) {
     
                  ClickedIndex = args._itemIndexHierarchical; // newly added
     
                  isDoubleClick = false;
     
                  if (clickHandler) {
     
                      window.clearTimeout(clickHandler);
     
                      clickHandler = null;
     
                  }
     
                  clickHandler = window.setTimeout(ActualClick, 200);
     
              }
     
              function RowDblClick(sender, args) {
     
     
                  ClickedIndex = args._itemIndexHierarchical; // newly added
     
                  isDoubleClick = true;
     
                  if (clickHandler) {
     
                      window.clearTimeout(clickHandler);
     
                      clickHandler = null;
     
                  }
     
                  clickHandler = window.setTimeout(ActualClick, 200);
     
              }
     
              function ActualClick() {
     
                  if (isDoubleClick) {
     
                      var grid = $find("<%=RadGrid1.ClientID %>");
                      if (grid) {
                          var MasterTable = grid.get_masterTableView();
                          var Rows = MasterTable.get_dataItems();
                          for (var i = 0; i < Rows.length; i++) {
                              var row = Rows[i];
                              if (ClickedIndex != null && ClickedIndex == i) { // newly added
                                  MasterTable.fireCommand("MyClick2", ClickedIndex); // newly added
                              } // newly added
                          }
                      }
     
                  }
     
                  else {
     
                      var grid = $find("<%=RadGrid1.ClientID %>");
                      if (grid) {
                          var MasterTable = grid.get_masterTableView();
                          var Rows = MasterTable.get_dataItems();
                          for (var i = 0; i < Rows.length; i++) {
                              var row = Rows[i];
                              if (ClickedIndex != null && ClickedIndex == i) { // newly added
                                  MasterTable.fireCommand("MyClick1", ClickedIndex); // newly added
                              } // newly added
                          }
                      }
     
                  }
     
     
     
              }
    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
      {
          if (e.CommandName == "MyClick1")
          {
              // songle click
              GridDataItem item = RadGrid1.MasterTableView.Items[Convert.ToInt32(e.CommandArgument)]; // newly added
          }
          else if (e.CommandName == "MyClick2")
          {
              // Double click
              GridDataItem item = RadGrid1.MasterTableView.Items[Convert.ToInt32(e.CommandArgument)]; // newly added
          }
      }


    Thanks,
    Jayesh Goyani
  11. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 06 Feb 2013 Link to this post

    Hello,

    I will update demo code later in below link.

    https://skydrive.live.com/?cid=977B16A5E89A5236&id=977B16A5E89A5236!105

    Thanks,
    Jayesh Goyani
  12. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010
  13. Eric
    Eric avatar
    37 posts
    Member since:
    Aug 2012

    Posted 11 Feb 2013 Link to this post

    Thank you Jayesh
    That worked perfectly. One final question if you can still help me out, lets say I click on a row, is there anyway I can disable RowSingleClick if the user clicks on the same row? The reason I want to do this is to prevent multiple command executions if the user clicks on the same row multiple times but if the user clicks on another row it should work  normally.
  14. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 11 Feb 2013 Link to this post

    Hello,

    Please try with below code snippet.
    var ClickedIndex = null;
     
               function RowClick(sender, args) {
     
                   if (ClickedIndex != null && ClickedIndex != args._itemIndexHierarchical) {
                       ClickedIndex = args._itemIndexHierarchical;
                       // Other code comes here
                   }
     
               }


    Thanks,
    Jayesh Goyani
  15. Emerson
    Emerson avatar
    7 posts
    Member since:
    Nov 2012

    Posted 15 Jan 2014 Link to this post

    I am using this code and it works great. The problem I have is when i do a doubleclick the grid rebinds. How can I prevent the grid from rebinding as i do not need to rebind for what I am doing and it is just costing the user time and a trip to the database. I tried using e.canceled = true; in the itemcommand event but this did not work.
  16. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 18 Jan 2014 Link to this post

    Hello Emerson,

    Could you please elaborate on your exact scenario and especially on how you are creating and binding your grid, since the solution that Jayesh had provided should not cause rebind with the custom commands. In the following help article you could find a list with all commands that are invoking Rebind():

    Without the additional information on your exact scenario I could only suggest you ensure that you are not setting the EnableViewState property of your grid to false.


    Regards,
    Konstantin Dikov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  17. John
    John avatar
    43 posts
    Member since:
    Aug 2014

    Posted 04 Nov 2014 in reply to Jayesh Goyani Link to this post

    Thanks Jayesh.  However, as soon as I add the  <ClientEvents OnRowDblClick="RowDblClick" OnRowClick="RowClick" />, it refuses to show my RadGrid.  Thoughts on this? 
  18. John
    John avatar
    43 posts
    Member since:
    Aug 2014

    Posted 04 Nov 2014 in reply to Jayesh Goyani Link to this post

    Thanks, Jayesh.  However, when I add the ClientEvents OnRowDblClick, it refuses to show my RadGrid.  Any thoughts on this?
  19. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 04 Nov 2014 in reply to John Link to this post

    Hi John,

    Can you please verify below thing?
     
    After adding that function any JS error is raised or not?

    Thanks,
    Jayesh Goyani
  20. John
    John avatar
    43 posts
    Member since:
    Aug 2014

    Posted 04 Nov 2014 in reply to Jayesh Goyani Link to this post

    Regarding the RadGrid not showing...problem solved...small coding issue on my part.  However, when I test in runtime by double-clicking a row, it doesn't seem to fire the RowDblClick function.  In debug mode, I put a break in the function, and it seems to never get there.  My code ...

                <telerik:RadPageView ID="PageViewEquip" runat="server">
                    <telerik:RadGrid 
                        ID="RadGrid1" 
                        runat="server" 
                        AllowFilteringByColumn="True" 
                        AllowPaging="True" 
                        AllowSorting="True" 
                        DataSourceID="objEquipGrid" 
                        GridLines="Both" 
                        PageSize="1000"  
                        ShowStatusBar="True" 
                        ShowGroupPanel="true" 
                        EnableLinqExpressions="false" 
                        >
                        <GroupingSettings ShowUnGroupButton="True" />
                        <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" AllowDragToGroup="True">
                            <Selecting AllowRowSelect="True" />
                            <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="650px" />
                            <ClientEvents OnRowDblClick="RowDblClick" OnRowClick="RowClick" />
                        </ClientSettings>
                        <MasterTableView
                            AutoGenerateColumns="False" 
                            DataKeyNames="ID" 
                            DataSourceID="objEquipGrid" 
                            EnableLinqGrouping="true" 
                            AllowMultiColumnSorting="true">
                            <Columns>
                                <telerik:GridButtonColumn CommandName="Edit" Text="Edit" UniqueName="EditRadGrid1" HeaderText="" ButtonType="ImageButton" ImageUrl="~\Images\NextPage.png" ></telerik:GridButtonColumn>
                                <telerik:GridBoundColumn AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" DataField="AssetCode" FilterControlAltText="Filter AssetCode column" HeaderText="AssetCode" SortExpression="AssetCode" UniqueName="AssetCode">

  21. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 06 Nov 2014 Link to this post

    Hi John,

    Using your RadGrid settings I have created a test page and everything seems to work correctly on my end. Following the markup and code behind of the RadGrid and the related JavaScript:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function RowDblClick(sender, args) {
                alert("row dbl click");
            }
     
            function RowClick(sender, args) {
            }
        </script>
    </telerik:RadCodeBlock>
     
    <telerik:RadGrid
        ID="RadGrid1"
        runat="server"
        AllowFilteringByColumn="True"
        AllowPaging="True"
        AllowSorting="True"
        OnNeedDataSource="RadGrid1_NeedDataSource"
        GridLines="Both"
        PageSize="1000"
        ShowStatusBar="True"
        ShowGroupPanel="true"
        EnableLinqExpressions="false">
        <GroupingSettings ShowUnGroupButton="True" />
        <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" AllowDragToGroup="True">
            <Selecting AllowRowSelect="True" />
            <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="650px" />
            <ClientEvents OnRowDblClick="RowDblClick" OnRowClick="RowClick" />
        </ClientSettings>
        <MasterTableView
            AutoGenerateColumns="False"
            DataKeyNames="ID"
            EnableLinqGrouping="true"
            AllowMultiColumnSorting="true">
            <Columns>
                <telerik:GridButtonColumn CommandName="Edit" Text="Edit" UniqueName="EditRadGrid1" HeaderText="" ButtonType="ImageButton" ImageUrl="~\Images\NextPage.png"></telerik:GridButtonColumn>
                <telerik:GridBoundColumn AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" DataField="AssetCode" FilterControlAltText="Filter AssetCode column" HeaderText="AssetCode" SortExpression="AssetCode" UniqueName="AssetCode"></telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

    And the dummy data:
    private DataTable GetGridData()
    {
        DataTable table = new DataTable();
        table.Columns.Add("ID", typeof(int));
        table.Columns.Add("AssetCode", typeof(string));
        for (int i = 0; i < 5; i++)
        {
            table.Rows.Add(i, "Some comment" + i);
        }
     
        return table;
    }
     
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        RadGrid1.DataSource = GetGridData();
    }

    Additionally, if you continue to experience problems with this, as Jayesh suggested, please inspect your browser's console and see if there are any JavaScript errors that could prevent the event from firing.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  22. Rolland
    Rolland avatar
    6 posts
    Member since:
    Sep 2016

    Posted 28 Sep in reply to Jayesh Goyani Link to this post

    Thank you Jayesh, 

    Your demo was of great help to me,

    Really appreciate it !

    Cheers

    Rolland

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017