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

RadGrid Double Click needed to fire VB code behind

6 Answers 405 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mark Ogier
Top achievements
Rank 1
Mark Ogier asked on 02 Oct 2012, 07:27 PM
Hi
I am a newbie so please excuse if this is too easy!

I am using a RadGrid and want to catch a double click on a row and then process a VB code routine I have to setup some data values, update a table and pass control over to another page to display a report. All the code in the VB is fine and works if I just press a button and catch the click. I just need the grid double click to do the same.

I have trawled the forums for hours and tried various code snippets from different posts but none of them seem to work. What I have is this

ASPX
<script type="text/javascript">
    function RowDoubleClick(index) {
        __doPostBack("<%= grdDashboards.UniqueId %>", "RowDblClicked:" + this.Rows[index].ItemIndex);
    }
    </script>


Also in the ASPX are a couple of Grid client settings
<telerik:RadGrid ID="grdDashboards" runat="server">
   <ClientSettings EnableRowHoverStyle="true">
     <ClientEvents OnRowDblClick="RowDoubleClick"></ClientEvents>
   </ClientSettings>
 </telerik:RadGrid>


Then in the VB behind I have
Protected Overrides Sub RaisePostBackEvent(ByVal source As IPostBackEventHandler, ByVal eventArgument As String)
       MyBase.RaisePostBackEvent([source], eventArgument)
 
       If ([source] Is grdDashboards) And (eventArgument.IndexOf("RowDblClicked") <> -1) Then
           Dim item As GridDataItem = grdDashboards.Items(Integer.Parse(eventArgument.Split(":"c)(1)))
 
           Response.Write([String].Format("ReportID:{0}", item.GetDataKeyValue("ReportID")))
 
       End If
   End Sub

This never seems to get called as a breakpoint nevers gets processed.

Where my test VB  code above has the Response.Write debug output I just want to call my Sub that does all the work of passing on to the next page.

All the code has been copy/pasted from examples in here.

Problem is, double clicking on the RadGrid (grdDashboards) has no effect. Nothing is firing off.

Any help much appreciated as a deadline is looming!!

Just to be clear, I am using VS2010, Framework 4, VB.NET code behind with the following Imports at the head of the VB page

Imports System.Data
Imports System.Data.SqlClient
Imports Telerik.Web.UI

Many thanks
Mark

6 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 03 Oct 2012, 11:42 AM
Hello Mark,

I am pasting my reply for the support ticket you has opened, in case anyone else is interested in such scenario.

The easiest way to trap a double click on the server is to fire a custom command from the client. There you can pass the item ID and use it inside the ItemCommand server event:

javascript:

function raiseServerCommand(sender, args) {
    var index = args.get_itemIndexHierarchical();
    sender.get_masterTableView().fireCommand("Custom", index);
}

VB:
Protected Sub RadGrid1_ItemCommand(ByVal sender As Object, ByVal e As GridCommandEventArgs) Handles RadGrid1.ItemCommand
    If e.CommandName = "Custom" Then
        Response.Write("Item index is " + e.CommandArgument)
    End If
End Sub

I am also attaching a small sample where this is implemented. Give it a try and let us know should you have further questions on this scenario.

Greetings,
Tsvetina
the Telerik team
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 their blog feed now.
0
Mark
Top achievements
Rank 1
answered on 31 May 2013, 02:18 AM
I finally found this thread which I thought would answer my question: how do I get a double click event in a radgrid.

I downloaded the zip file only to find there was no double click event in the example and no event in the code behind.

I believe an example for this should be provided with the control documentation. We should not have to scour google to find these examples.

Please help.

Here is what I have tried (based on the example):

 <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function raiseServerCommand(sender, args) {
                var index = args.get_itemIndexHierarchical();
                sender.get_masterTableView().fireCommand("RowDblClick", index);
            }
        </script>
    </telerik:RadScriptBlock>

 <ClientSettings ClientEvents-OnRowDblClick="RowDblClick">
                            <Selecting AllowRowSelect="True" />
                            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                        </ClientSettings>


    Protected Sub rgOrders_ItemCommand(ByVal sender As Object, ByVal e As GridCommandEventArgs) Handles rgOrders.ItemCommand
        If e.CommandName = "RowDblClick" Then
            Response.Write("Item index is " + e.CommandArgument)
        End If
    End Sub
0
Princy
Top achievements
Rank 2
answered on 31 May 2013, 04:19 AM
Hi Mark

Please try this code,its an example of row double click event.

ASPX:
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" DataSourceID="SqlDataSource1"
           PageSize="10" AutoGenerateColumns="False" AllowSorting="True" OnItemCommand="RadGrid1_ItemCommand">
           <ClientSettings ClientEvents-OnRowDblClick="RowDblClick">
               <Selecting AllowRowSelect="True" />
               <Scrolling AllowScroll="True" UseStaticHeaders="True" />
           </ClientSettings>
           <MasterTableView AutoGenerateColumns="false" Visible="True">
               <Columns>
                   <telerik:GridBoundColumn DataField="OrderID" HeaderText="OrderID" UniqueName="OrderID">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="OrderDate" HeaderText="OrderDate" UniqueName="OrderDate">
                   </telerik:GridBoundColumn>
               </Columns>
           </MasterTableView>
       </telerik:RadGrid>

JAVASCRIPT:
<script type="text/javascript">
    var editedRow;
    function RowDblClick(sender, eventArgs)
{
 editedRow = eventArgs.get_itemIndexHierarchical();
 $find("<%= RadGrid1.ClientID %>").get_masterTableView().editItem(editedRow);
 alert(editedRow);
}
</script>

Thanks,
Princy
0
Mark
Top achievements
Rank 1
answered on 31 May 2013, 05:21 AM
Thanks for the prompt reply.

I was able to make your code work (needed to add spaces between var and editedrow and function and RowDblClick)

However, I still don't understand how I can use this in code behind (see below). Double-clicking does open the alert window. After closing the alert window the radgrid goes into edit mode.

The radgrid rgOrders is a list of orders. The user can select the row and close out the order. I want them to be able to double click the row, use the order number (datakey) to open a new window with all of the order information that the user can edit. Since the order has a master detail relationship between lines, it must be a new window. And, the user might open several orders from the list at the same time.

Here is the code that I was using to test. I though it would execute after a double click. But,  e.CommandName is never equal to RowDblClick

Protected Sub rgOrders_ItemCommand(ByVal sender As Object, ByVal e As GridCommandEventArgs) Handles rgOrders.ItemCommand
        If e.CommandName = "RowDblClick" Then
            Response.Write("Item index is " + e.CommandArgument)
        End If
End Sub

Here's the rest of my code:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
       <script type="text/javascript">
           var editedRow;
           function RowDblClick(sender, eventArgs)
           {
               editedRow = eventArgs.get_itemIndexHierarchical();
               $find("<%= rgOrders.ClientID%>").get_masterTableView().editItem(editedRow);
              alert(editedRow);
          }
       </script>
   </telerik:RadScriptBlock>

<MasterTableView DataKeyNames="order_key" DataSourceID="dsrgOrders" CommandItemDisplay="Top"
CommandItemSettings-ShowExportToExcelButton="True"
CommandItemSettings-ShowExportToCsvButton="True">
<CommandItemSettings ExportToPdfText="Export to PDF" ShowAddNewRecordButton="false">
</CommandItemSettings>
<RowIndicatorColumn Visible="False" FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridClientSelectColumn FilterControlAltText="Filter SelectOrder column"
UniqueName="SelectOrder">
</telerik:GridClientSelectColumn>
<telerik:GridBoundColumn DataField="order_key" DataType="System.Int64"
FilterControlAltText="Filter order_key column" HeaderText="order_key"
ReadOnly="True" SortExpression="order_key" UniqueName="Order">
</telerik:GridBoundColumn>
0
Princy
Top achievements
Rank 2
answered on 03 Jun 2013, 07:24 AM
Hi Mark,

Please try this code snippet.I have edited it.
ASPX:
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" DataSourceID="SqlDataSource1"
           PageSize="10" AutoGenerateColumns="False" AllowSorting="True" OnItemCommand="RadGrid1_ItemCommand">
         <ClientSettings ClientEvents-OnRowDblClick="RowDblClick">
               <Selecting AllowRowSelect="True" />
               <Scrolling AllowScroll="True" UseStaticHeaders="True" />
         </ClientSettings>
         <MasterTableView AutoGenerateColumns="false" Visible="True">
              <Columns>
                   <telerik:GridBoundColumn DataField="OrderID" HeaderText="OrderID" UniqueName="OrderID">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="OrderDate" HeaderText="OrderDate" UniqueName="OrderDate">
                   </telerik:GridBoundColumn>
              </Columns>
         </MasterTableView>
</telerik:RadGrid>

JAVASCRIPT:
<script type="text/javascript">
    var isDoubleClick = false;
    var clickHandler = null;
    var ClickedIndex = null;
    function RowDblClick(sender, args)
     {
       ClickedIndex = args._itemIndexHierarchical;
       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)
                  {
                     MasterTable.fireCommand("DoubleClick", ClickedIndex);
                 }
           }  
       }
   }
}
</script>

VB:
Protected Sub RadGrid1_ItemCommand(sender As Object, e As GridCommandEventArgs)
    If e.CommandName = "DoubleClick" Then
        Dim item As GridDataItem = RadGrid1.MasterTableView.Items(Convert.ToInt32(e.CommandArgument))
        Response.Write("Item index is " + e.CommandArgument)
    End If
End Sub

Thanks
Princy

0
Silvio Silva Junior
Top achievements
Rank 2
answered on 29 Mar 2014, 10:53 PM
Tsvetina, I really need to thank you!

Your solution works like a charm for me.

Thanks again!

function raiseServerCommand(sender, args) {    
var index = args.get_itemIndexHierarchical();    
sender.get_masterTableView().fireCommand("Custom", index);
}

Best regards.
Tags
Grid
Asked by
Mark Ogier
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Mark
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Silvio Silva Junior
Top achievements
Rank 2
Share this question
or