Here is my scenario:
I have a RadGrid with RADAjaxManager rights to update itself. In markup, I have some GridTemplateColumns that contain custom buttons. The rest of the columns get populated via AutoGenerateColumns="true" from the NeedsDataSource event of the grid.
I am using the ItemDataBound event of the grid to setup each GridDataItem, setting some buttons' enabled property and some images based on the grid's data. This is working great to load the grid, and it persists after sorting, paging, and filtering.
The problem that I'm running into is when I click one of the custom buttons, it will properly run through the ItemCommand event of the grid, but then the buttons' enabled state and the images that I set are wiped away. Since my code to set these things up is in the grid's ItemDataBound event and that does not fire after the ItemCommand is fired, I'd like to know what event should I be using to set enabled/image URL type properties of the grid cells?
Thanks!
-Scott
I have a RadGrid with RADAjaxManager rights to update itself. In markup, I have some GridTemplateColumns that contain custom buttons. The rest of the columns get populated via AutoGenerateColumns="true" from the NeedsDataSource event of the grid.
I am using the ItemDataBound event of the grid to setup each GridDataItem, setting some buttons' enabled property and some images based on the grid's data. This is working great to load the grid, and it persists after sorting, paging, and filtering.
The problem that I'm running into is when I click one of the custom buttons, it will properly run through the ItemCommand event of the grid, but then the buttons' enabled state and the images that I set are wiped away. Since my code to set these things up is in the grid's ItemDataBound event and that does not fire after the ItemCommand is fired, I'd like to know what event should I be using to set enabled/image URL type properties of the grid cells?
Thanks!
-Scott
5 Answers, 1 is accepted
0

Scott
Top achievements
Rank 1
answered on 16 May 2014, 08:26 PM
Correction: I'm currently using both the ItemDataBound and ItemCreated events to set up the GridDataItems.
0

Princy
Top achievements
Rank 2
answered on 17 May 2014, 06:42 AM
Hi Scott,
I guess you have some image buttons and you want to sets its image from code behind and on ItemCommand event you are enabling or disabling buttons, please take a look at the sample code snippet. The provided information is not enough to replicate the issue, please provide your full code snippet if this doesn't help.
C#:
Thanks,
Princy
I guess you have some image buttons and you want to sets its image from code behind and on ItemCommand event you are enabling or disabling buttons, please take a look at the sample code snippet. The provided information is not enough to replicate the issue, please provide your full code snippet if this doesn't help.
C#:
//Set ImageURL
protected
void
RadGrid1_ItemCreated(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridDataItem)
{
GridDataItem dataItem = (GridDataItem)e.Item;
ImageButton imagebutton1 = (ImageButton)dataItem.FindControl(
"imagebutton1"
);
ImageButton imagebutton2 = (ImageButton)dataItem.FindControl(
"imagebutton2"
);
imagebutton1.ImageUrl =
"~/Image/image1.png"
;
imagebutton2.ImageUrl =
"~/Image/image2.png"
;
}
}
//Change or disable button
protected
void
RadGrid1_ItemDataBound(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridDataItem)
{
GridDataItem dataItem = (GridDataItem)e.Item;
ImageButton imagebutton2 = (ImageButton)dataItem.FindControl(
"imagebutton2"
);
if
(dataItem[
"ID"
].Text ==
"10253"
)
{
imagebutton2.ImageUrl =
"~/Image/image3.png"
;
imagebutton2.Enabled =
false
;
}
}
}
//Enable button
protected
void
RadGrid1_ItemCommand(
object
sender, GridCommandEventArgs e)
{
if
(e.CommandName ==
"AnyCommandName"
)
{
if
(e.Item
is
GridDataItem)
{
GridDataItem dataItem = (GridDataItem)e.Item;
ImageButton imagebutton2 = (ImageButton)dataItem.FindControl(
"imagebutton2"
);
imagebutton2.Enabled =
true
;
}
}
}
Thanks,
Princy
0

Scott
Top achievements
Rank 1
answered on 19 May 2014, 05:29 PM
Thanks Princy. Below is a page that demonstrates the behavior of losing the images after item command is fired (I was wrong about the enabled state of the buttons... it persists). One piece of information that I should have mentioned is that I am adding the new image controls to the existing griddataitem during the item created event. Since I won't know until I fetch the grid's data what columns will exist, the columns are not defined in markup. If you could help with this scenario, I'd be grateful.
-Scott
​
-Scott
​
Imports
Telerik.Web.UI
Public
Class
_default
Inherits
System.Web.UI.Page
Protected
Sub
rgDemo_NeedDataSource(sender
As
Object
, e
As
Telerik.Web.UI.GridNeedDataSourceEventArgs)
Dim
dt
As
DataTable = GetData()
rgDemo.DataSource = dt
End
Sub
Protected
Sub
rgDemo_ItemDataBound(sender
As
Object
, e
As
Telerik.Web.UI.GridItemEventArgs)
If
TypeOf
(e.Item) is GridDataItem
Then
SetUpGridDataItem(
DirectCast
(e.Item, GridDataItem))
End
If
End
Sub
Protected
Sub
rgDemo_ColumnCreated(sender
As
Object
, e
As
Telerik.Web.UI.GridColumnCreatedEventArgs)
If
TypeOf
e.Column is GridBoundColumn
Then
Dim
col
As
GridBoundColumn =
DirectCast
(e.Column, GridBoundColumn)
If
col.UniqueName.Contains(
"Button"
)
Then
'Need flag but always hide this column
col.Display =
False
End
If
End
If
End
Sub
Protected
Sub
rgDemo_ItemCommand(sender
As
Object
, e
As
GridCommandEventArgs)
Select
Case
e.CommandName
Case
"Submit"
'code goes here
Case
"EditView"
'code goes here
Case
"Undo"
'code goes here
End
Select
End
Sub
Protected
Sub
rgDemo_ItemCreated(sender
As
Object
, e
As
Telerik.Web.UI.GridItemEventArgs)
If
TypeOf
(e.Item) is GridDataItem
Then
SetUpGridDataItem(
DirectCast
(e.Item, GridDataItem))
End
If
End
Sub
Private
Function
GetData()
As
DataTable
Dim
dt
As
New
DataTable
dt.Columns.Add(
"Name"
)
dt.Columns.Add(
"Button1"
)
dt.Columns.Add(
"Button2"
)
dt.Columns.Add(
"Button3"
)
dt.Columns.Add(
"Status1"
)
dt.Columns.Add(
"Status2"
)
dt.Columns.Add(
"Status3"
)
dt.Rows.Add(
"Test Row 1"
,
"0"
,
"0"
,
"0"
,
"A"
,
"A"
,
"A"
)
dt.Rows.Add(
"Test Row 2"
,
"0"
,
"1"
,
"0"
,
"A"
,
"B"
,
"A"
)
dt.Rows.Add(
"Test Row 3"
,
"1"
,
"1"
,
"1"
,
"B"
,
"B"
,
"B"
)
Return
dt
End
Function
Private
Function
GetColumns()
As
List(Of
String
)
Dim
oCols
As
New
List(Of
String
)
oCols.Add(
"Status1"
)
oCols.Add(
"Status2"
)
oCols.Add(
"Status3"
)
Return
oCols
End
Function
Private
Sub
SetUpGridDataItem(
ByRef
gdi
As
GridDataItem)
If
gdi(
"Button1"
).Text =
"0"
Then
Dim
btn
As
RadButton = TryCast(gdi(
"EditView"
).FindControl(
"btnEditView"
), RadButton)
If
btn isnot
Nothing
then btn.Enabled =
False
End
If
If
gdi(
"Button2"
).Text =
"0"
Then
Dim
btn
As
RadButton = TryCast(gdi(
"Submit"
).FindControl(
"btnSubmit"
), RadButton)
If
btn isnot
Nothing
then btn.Enabled =
False
End
If
If
gdi(
"Button3"
).Text =
"0"
Then
Dim
btn
As
RadButton = TryCast(gdi(
"UndoEdits"
).FindControl(
"btnUndo"
), RadButton)
If
btn isnot
Nothing
then btn.Enabled =
False
End
If
For
Each
col
As
String
In
GetColumns()
Select
Case
gdi(col).Text
Case
"A"
Dim
img
As
New
Image
img.ImageUrl =
"~/Images/GreenDot.png"
img.ToolTip = gdi(col).Text
img.ID =
"img"
& col
gdi(col).Controls.Add(img)
gdi(col).HorizontalAlign = HorizontalAlign.Center
Case
"B"
Dim
img
As
New
Image
img.ImageUrl =
"~/Images/RedDot.png"
img.ToolTip = gdi(col).Text
img.ID =
"img"
& col
gdi(col).Controls.Add(img)
gdi(col).HorizontalAlign = HorizontalAlign.Center
Case
Else
'valid status not found, do not create icon
End
Select
Next
End
Sub
End
Class
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="demo_gridreset._default" %>
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
DefaultLoadingPanelID
=
"RadAjaxLoadingPanel1"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadAjaxManager1"
>
<
updatedcontrols
>
<
telerik:AjaxUpdatedControl
ControlID
=
"rgDemo"
/>
</
updatedcontrols
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"rgDemo"
>
<
updatedcontrols
>
<
telerik:AjaxUpdatedControl
ControlID
=
"rgDemo"
/>
</
updatedcontrols
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel1"
runat
=
"server"
Height
=
"200px"
Width
=
"200px"
>
</
telerik:RadAjaxLoadingPanel
>
<
div
>
<
telerik:RadGrid
ID
=
"rgDemo"
runat
=
"server"
Width
=
"100%"
AutoGenerateColumns
=
"true"
AllowPaging
=
"true"
AllowSorting
=
"True"
AllowFilteringByColumn
=
"false"
OnItemCreated
=
"rgDemo_ItemCreated"
ViewStateMode
=
"Enabled"
OnItemCommand
=
"rgDemo_ItemCommand"
OnNeedDataSource
=
"rgDemo_NeedDataSource"
OnItemDataBound
=
"rgDemo_ItemDataBound"
OnColumnCreated
=
"rgDemo_ColumnCreated"
>
<
GroupingSettings
CaseSensitive
=
"false"
/>
<
PagerStyle
AlwaysVisible
=
"true"
/>
<
MasterTableView
CommandItemDisplay
=
"None"
HierarchyLoadMode
=
"Client"
GroupLoadMode
=
"Server"
>
<
Columns
>
<
telerik:GridTemplateColumn
UniqueName
=
"EditView"
HeaderText
=
""
HeaderStyle-Width
=
"50px"
HeaderStyle-HorizontalAlign
=
"Center"
ItemStyle-HorizontalAlign
=
"Center"
AllowFiltering
=
"false"
>
<
ItemTemplate
>
<
telerik:RadButton
ID
=
"btnEditView"
runat
=
"server"
CommandName
=
"EditView"
Text
=
"Edit"
><
Icon
PrimaryIconCssClass
=
"rbEdit"
/></
telerik:RadButton
>
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
</
Columns
>
<
Columns
>
<
telerik:GridTemplateColumn
UniqueName
=
"Submit"
HeaderText
=
""
HeaderStyle-Width
=
"50px"
HeaderStyle-HorizontalAlign
=
"Center"
ItemStyle-HorizontalAlign
=
"Center"
AllowFiltering
=
"false"
>
<
ItemTemplate
>
<
telerik:RadButton
ID
=
"btnSubmit"
runat
=
"server"
CommandName
=
"Submit"
Text
=
"Submit"
><
Icon
PrimaryIconCssClass
=
"rbUpload"
/></
telerik:RadButton
>
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
</
Columns
>
<
Columns
>
<
telerik:GridTemplateColumn
UniqueName
=
"UndoEdits"
HeaderText
=
""
HeaderStyle-Width
=
"50px"
HeaderStyle-HorizontalAlign
=
"Center"
ItemStyle-HorizontalAlign
=
"Center"
AllowFiltering
=
"false"
>
<
ItemTemplate
>
<
telerik:RadButton
ID
=
"btnUndo"
runat
=
"server"
CommandName
=
"Undo"
Text
=
"Undo Edits"
><
Icon
PrimaryIconCssClass
=
"rbCancel"
/></
telerik:RadButton
>
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
</
div
>
</
form
>
</
body
>
</
html
>
0
Accepted
Hello Scott,
The behavior that you are observing is rather expected, since the data for each item will not be available in the ItemCreated event handler, so the images will not be applied at that time. Furthermore, the ItemDataBound event will be fired only when the grid is currently binding, but when a custom command is fired, that will not force the grid to rebind, so the event will not fire and you will not be able to add the images.
The easiest solution for your requirement is to handle the server-side OnPreRender event of the grid, traverse through each data item and call the SetUpGridDataItem() method there:
Another possible approach would be to keep you current logic and call the grid's Rebind() method when a custom command is fired:
Hope that helps.
Regards,
Konstantin Dikov
Telerik
The behavior that you are observing is rather expected, since the data for each item will not be available in the ItemCreated event handler, so the images will not be applied at that time. Furthermore, the ItemDataBound event will be fired only when the grid is currently binding, but when a custom command is fired, that will not force the grid to rebind, so the event will not fire and you will not be able to add the images.
The easiest solution for your requirement is to handle the server-side OnPreRender event of the grid, traverse through each data item and call the SetUpGridDataItem() method there:
Protected
Sub
rgDemo_PreRender(sender
As
Object
, e
As
EventArgs)
For
Each
item
As
GridDataItem
In
rgDemo.Items
SetUpGridDataItem(item)
Next
End
Sub
Another possible approach would be to keep you current logic and call the grid's Rebind() method when a custom command is fired:
Protected
Sub
rgDemo_ItemCommand(sender
As
Object
, e
As
GridCommandEventArgs)
Select
Case
e.CommandName
Case
"Submit"
rgDemo.Rebind()
Case
"EditView"
rgDemo.Rebind()
Case
"Undo"
rgDemo.Rebind()
End
Select
End
Sub
Hope that helps.
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.
0

Scott
Top achievements
Rank 1
answered on 21 May 2014, 03:06 PM
Konstantin,
Using the PreRender event worked perfectly! Thanks so much!
-Scott
Using the PreRender event worked perfectly! Thanks so much!
-Scott