Using .net SkinID for columns with buttontype=ImageButton

6 posts, 0 answers
  1. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 16 Aug 2009 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Aug 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 20 Aug 2009 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Aug 2009 Link to this post

    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.
  6. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 20 Aug 2009 Link to this post

    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
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Aug 2009 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017