How to detect Single and Double Click in ItemCommand of RadGrid

[Eric]

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
    }
}

[Jayesh Goyani]

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

[Eric]

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.

[Jayesh Goyani]

Hello,

I have added sample demo in below link.

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

Thanks,
Jayesh Goyani

[Eric]

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.

[Jayesh Goyani]

Hello,

Please check below link.
http://demos.telerik.com/aspnet-ajax/grid/examples/client/cellselection/defaultcs.aspx

Thanks,
Jayesh Goyani

[Eric]

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.

[Eric]

I still can't find a solution to accessing row values if I fire itemcommans from client. Is there any solution to this?

[Jayesh Goyani]

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

[Jayesh Goyani]

Hello,

I will update demo code later in below link.

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

Thanks,
Jayesh Goyani

[Jayesh Goyani]

Hello,

I have updated demo.

https://skydrive.live.com/?cid=977b16a5e89a5236&id=977B16A5E89A5236%21109&authkey=!AAhDnpKPG8CxnpA

Thanks,
Jayesh Goyani

[Eric]

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.

[Jayesh Goyani]

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

[Emerson]

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.

[Konstantin Dikov]

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():

• Commands that invoke Rebind() implicitly

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

[John]

Thanks, Jayesh.  However, when I add the ClientEvents OnRowDblClick, it refuses to show my RadGrid.  Any thoughts on this?

[Jayesh Goyani]

Hi John,

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

Thanks,
Jayesh Goyani

[John]

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">

[Konstantin Dikov]

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

 

 

[Rolland]

Thank you Jayesh, 

Your demo was of great help to me,

Really appreciate it !

Cheers

Rolland

[Asif]

Hi Jayesh,

I am new to this area (telerik) . I am working on asp.net web application, I am using a  Radgrid and RadAjaxManager in my project which is not working properly.

My requirement includes (I have implemented the functionality but not working in few cases)

1.Downloading a file from sharepoint upon button click in Radgrid column (I am using GridButtonColumn for this)

2.Opening a file from sharepoint upon Double clicking on any row ( I am using js function window.Open() )

3. Uploading a file to sharepoint using FileUpload.

 

1->When I am using "telerik:RadAjaxManager" in the page, None of the above functionalities are working.

2->If I remove the telerik:RadAjaxManager .
a. Then Download is working , but the page postback everytime when there is an user action.

b. Double click is firing only for the first time (I don't know why)

Could you please help me in resolving this issue. Is there any relation between RadScriptManager and RadAjaxManager.. ??

 

Thanks

Asif