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

Using .net SkinID for columns with buttontype=ImageButton

5 Answers 193 Views
Grid
This is a migrated thread and some comments may be shown as answers.
CSurieux
Top achievements
Rank 2
CSurieux asked on 16 Aug 2009, 02:57 PM
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

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 20 Aug 2009, 06:58 AM
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

<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
0
Dimo
Telerik team
answered on 20 Aug 2009, 08:52 AM
Hi Christian,

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

    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
Dimo
Telerik team
answered on 20 Aug 2009, 10:31 AM
Hi Christian,

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.
Tags
Grid
Asked by
CSurieux
Top achievements
Rank 2
Answers by
Dimo
Telerik team
CSurieux
Top achievements
Rank 2
Share this question
or