Hello,
Is there a way to use .net skinID with GridButtonColumn when buttontype=ImageButton
When I set buttontype=ImageButton without specifying ImageUrl or with a temporary ImageUrl and I try to find the ImageButton in Item_Created handler, I find nothing and the button is rendered as a linkButton.
How to specify the SkingID I use everywhere in my app for the Update action ?
Thanks
CS
Is there a way to use .net skinID with GridButtonColumn when buttontype=ImageButton
When I set buttontype=ImageButton without specifying ImageUrl or with a temporary ImageUrl and I try to find the ImageButton in Item_Created handler, I find nothing and the button is rendered as a linkButton.
How to specify the SkingID I use everywhere in my app for the Update action ?
Thanks
CS
5 Answers, 1 is accepted
0
Hi Christian,
Generally, you cannot theme RadGrid columns, because they are not controls.
In order to find the desired ImageButton (update) and set its ImageUrl, you can different code, depending on the EditMode. This can be done in ItemCreated or PreRender. I have included both techniques below, please remove what's not necessary.
ASPX
C#
Kind regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Generally, you cannot theme RadGrid columns, because they are not controls.
In order to find the desired ImageButton (update) and set its ImageUrl, you can different code, depending on the EditMode. This can be done in ItemCreated or PreRender. I have included both techniques below, please remove what's not necessary.
ASPX
<telerik:RadGrid |
ID="RadGrid1" |
runat="server" |
OnNeedDataSource="RadGrid_NeedDataSource" |
OnPreRender="RadGrid1_PreRender" |
OnItemCreated="RadGrid1_ItemCreated"> |
<MasterTableView EditMode="EditForms"> |
<Columns> |
<telerik:GridButtonColumn UniqueName="MyButtonColumn" ButtonType="ImageButton" /> |
<telerik:GridEditCommandColumn UniqueName="MyEditCommandColumn" ButtonType="ImageButton" /> |
</Columns> |
<EditFormSettings> |
<EditColumn ButtonType="ImageButton" /> |
</EditFormSettings> |
</MasterTableView> |
</telerik:RadGrid> |
C#
protected void RadGrid1_PreRender(object sender, EventArgs e) |
{ |
// for MyButtonColumn |
foreach (GridDataItem item in (sender as RadGrid).MasterTableView.Items) |
{ |
(item["MyButtonColumn"].Controls[0] as ImageButton).ImageUrl = "~/grid_images/MoveUp.gif"; |
} |
// if EditMode="InPlace" |
GridItem[] edititems = (sender as RadGrid).MasterTableView.GetItems(GridItemType.EditItem); |
foreach (GridItem item in edititems) |
{ |
((item as GridEditableItem).FindControl("UpdateButton") as ImageButton).ImageUrl = "~/grid_images/MoveDown.gif"; |
} |
// if EditMode="EditForms" |
GridItem[] edititems = (sender as RadGrid).MasterTableView.GetItems(GridItemType.EditFormItem); |
foreach (GridItem item in edititems) |
{ |
if (item.IsInEditMode) |
((item as GridEditFormItem).FindControl("UpdateButton") as ImageButton).ImageUrl = "~/grid_images/MoveDown.gif"; |
} |
} |
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) |
{ |
// for MyButtonColumn |
if (e.Item is GridDataItem) |
{ |
((e.Item as GridDataItem)["MyButtonColumn"].Controls[0] as ImageButton).ImageUrl = "~/grid_images/MoveUp.gif"; |
} |
// if EditMode="InPlace" |
if (e.Item is GridEditableItem && e.Item.IsInEditMode) |
{ |
((e.Item as GridEditableItem).FindControl("UpdateButton") as ImageButton).ImageUrl = "~/grid_images/MoveDown.gif"; |
} |
// if EditMode="EditForms" |
if (e.Item is GridEditFormItem && e.Item.IsInEditMode) |
{ |
((e.Item as GridEditFormItem).FindControl("UpdateButton") as ImageButton).ImageUrl = "~/grid_images/MoveDown.gif"; |
} |
} |
Kind regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
CSurieux
Top achievements
Rank 2
answered on 20 Aug 2009, 08:09 AM
Hello Dimo,
Thanks for answer but your answer fit partially my request.
My concern is using imagebutton skinid property to have it displaying the correct image for current theme (.net theme).
I know I could set an imageurl, but I need that asp.net set it via skinid.
If Telerik has problem with .net themes (...) I would appreciate to be able to display in a normal GridButtonColumn the GridEditColumn ImageButton, because I don't want to use all the automatic editing capabilities attached to this column: I need to open a new aspx page to update current grid row.
Thanks for help.
CS
Thanks for answer but your answer fit partially my request.
My concern is using imagebutton skinid property to have it displaying the correct image for current theme (.net theme).
I know I could set an imageurl, but I need that asp.net set it via skinid.
If Telerik has problem with .net themes (...) I would appreciate to be able to display in a normal GridButtonColumn the GridEditColumn ImageButton, because I don't want to use all the automatic editing capabilities attached to this column: I need to open a new aspx page to update current grid row.
Thanks for help.
CS
0
Hi Christian,
You can use a template column with an ImageButton and a suitable CommandName, e.g.:
Alternatively, you can use a GridButtonColumn, set its ButtonCssClass property and define a background image for that CSS class in the theme's stylesheet.
Finally, you can replace the intial ImageButton with a new one with a set SkinID to obtain the ImageUrl. The SkinID must be set before the new button is added to the RadGrid controls collection.
ASPX
C#
All the best,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
You can use a template column with an ImageButton and a suitable CommandName, e.g.:
<telerik:RadGrid |
ID="RadGrid1" |
runat="server" |
OnNeedDataSource="RadGrid_NeedDataSource" |
OnItemCreated="RadGrid1_ItemCreated"> |
<MasterTableView EditMode="EditForms"> |
<Columns> |
<telerik:GridTemplateColumn HeaderText="template" UniqueName="MyTCol"> |
<ItemTemplate> |
<asp:ImageButton ID="ImageButton1" runat="server" SkinID="MySkinID" CommandName="Edit" /> |
</ItemTemplate> |
</telerik:GridTemplateColumn> |
</Columns> |
</MasterTableView> |
</telerik:RadGrid> |
Alternatively, you can use a GridButtonColumn, set its ButtonCssClass property and define a background image for that CSS class in the theme's stylesheet.
Finally, you can replace the intial ImageButton with a new one with a set SkinID to obtain the ImageUrl. The SkinID must be set before the new button is added to the RadGrid controls collection.
ASPX
<telerik:RadGrid |
ID="RadGrid1" |
runat="server" |
OnNeedDataSource="RadGrid_NeedDataSource" |
OnItemCreated="RadGrid1_ItemCreated"> |
<MasterTableView EditMode="EditForms"> |
<Columns> |
<telerik:GridButtonColumn UniqueName="MyButtonColumn" ButtonType="ImageButton" CommandName="Edit" /> |
</Columns> |
</MasterTableView> |
</telerik:RadGrid> |
C#
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) |
{ |
// for MyButtonColumn |
if (e.Item is GridDataItem) |
{ |
ImageButton originalButton = ((e.Item as GridDataItem)["MyButtonColumn"].Controls[0] as ImageButton); |
ImageButton newButton = new ImageButton(); |
newButton.SkinID = "MySkinID"; |
newButton.CommandArgument = originalButton.CommandArgument; |
newButton.CommandName = originalButton.CommandName; |
(e.Item as GridDataItem)["MyButtonColumn"].Controls.RemoveAt(0); |
(e.Item as GridDataItem)["MyButtonColumn"].Controls.Add(newButton); |
} |
} |
All the best,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
CSurieux
Top achievements
Rank 2
answered on 20 Aug 2009, 09:20 AM
Hi Dimo,
Perfect and fast, thanks.
I always forget this template feature...
Concerning your last sample when I use
<telerik:GridButtonColumn UniqueName="MyButtonColumn" ButtonType="ImageButton" CommandName="Edit" />
then in
I don't get an ImageButton, originalButton is null, I beging believing that when ImageUrl is not set, event with ButtonType='ImageButton' RadGrid generates a linkButton. Using Latest build 2.720.
Anyway let's use template.
CS
Perfect and fast, thanks.
I always forget this template feature...
Concerning your last sample when I use
<telerik:GridButtonColumn UniqueName="MyButtonColumn" ButtonType="ImageButton" CommandName="Edit" />
then in
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) |
{ |
// for MyButtonColumn |
if (e.Item is GridDataItem) |
{ |
ImageButton originalButton = ((e.Item as GridDataItem)["MyButtonColumn"].Controls[0] as ImageButton); |
I don't get an ImageButton, originalButton is null, I beging believing that when ImageUrl is not set, event with ButtonType='ImageButton' RadGrid generates a linkButton. Using Latest build 2.720.
Anyway let's use template.
CS
0
Hi Christian,
Well, this works on my side, in case you want to compare with your implementation:
The theme skin file contains:
Regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Well, this works on my side, in case you want to compare with your implementation:
<%@ Page Language="C#" Theme="Theme235455" %> |
<%@ Import Namespace="System.Data" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<script runat="server"> |
protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) |
{ |
DataTable dt = new DataTable(); |
DataRow dr; |
int colsNum = 4; |
int rowsNum = 5; |
string colName = "Column"; |
for (int j = 1; j <= colsNum; j++) |
{ |
dt.Columns.Add(String.Format("{0}{1}", colName, j)); |
} |
for (int i = 1; i <= rowsNum; i++) |
{ |
dr = dt.NewRow(); |
for (int k = 1; k <= colsNum; k++) |
{ |
dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); |
} |
dt.Rows.Add(dr); |
} |
(sender as RadGrid).DataSource = dt; |
} |
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) |
{ |
// for MyButtonColumn |
if (e.Item is GridDataItem) |
{ |
ImageButton originalButton = ((e.Item as GridDataItem)["MyButtonColumn"].Controls[0] as ImageButton); |
ImageButton new Button = new ImageButton(); |
newButton.SkinID = "MySkinID"; |
newButton.CommandArgument = originalButton.CommandArgument; |
newButton.CommandName = originalButton.CommandName; |
(e.Item as GridDataItem)["MyButtonColumn"].Controls.RemoveAt(0); |
(e.Item as GridDataItem)["MyButtonColumn"].Controls.Add(newButton); |
} |
} |
</script> |
<html xmlns="http://www.w3.org/1999/xhtml" > |
<head runat="server"> |
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> |
<title>RadControls for ASP.NET AJAX</title> |
</head> |
<body> |
<form id="form1" runat="server"> |
<asp:ScriptManager ID="ScriptManager1" runat="server" /> |
<telerik:RadGrid |
ID="RadGrid1" |
runat="server" |
OnNeedDataSource="RadGrid_NeedDataSource" |
OnItemCreated="RadGrid1_ItemCreated"> |
<MasterTableView EditMode="EditForms"> |
<Columns> |
<telerik:GridButtonColumn UniqueName="MyButtonColumn" ButtonType="ImageButton" CommandName="Edit" /> |
<%-- <telerik:GridTemplateColumn HeaderText="template" UniqueName="MyTCol"> |
<ItemTemplate> |
<asp:ImageButton ID="ImageButton1" runat="server" SkinID="MySkinID" CommandName="Edit" /> |
</ItemTemplate> |
</telerik:GridTemplateColumn> |
--%> </Columns> |
</MasterTableView> |
</telerik:RadGrid> |
</form> |
</body> |
</html> |
The theme skin file contains:
<asp:ImageButton runat="server" SkinID="MySkinID" ImageUrl="~/grid_images/Delete.gif" /> |
Regards,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.