
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
Also in the ASPX are a couple of Grid client settings
Then in the VB behind I have
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
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
0
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:
VB:
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
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
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:
JAVASCRIPT:
Thanks,
Princy
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
Here's the rest of my code:
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:
JAVASCRIPT:
VB:
Thanks
Princy
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.
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.