Skinning asp:textbox as telerik:radtextbox

4 posts, 0 answers
  1. Eliyahu Goldin
    Eliyahu Goldin avatar
    85 posts
    Member since:
    Apr 2007

    Posted 01 Dec 2008 Link to this post

    With skinning, is there a way to get asp:textbox look as telerik:radtextbox styled with embedded Sunset skin?
  2. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 01 Dec 2008 Link to this post

    Hi Eliyahu,

    Yes, there is a way, please use RadInputManager.

    RadInputManager Online Demos

    RadInputManager Online Documentation

    Sincerely yours,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Eliyahu Goldin
    Eliyahu Goldin avatar
    85 posts
    Member since:
    Apr 2007

    Posted 01 Dec 2008 Link to this post

    I didn't have any luck with RadInputManager, see my other thread on this forum re Skins with RadInputManager. Perhaps it will work on simpler pages. On the page I wanted to style textboxes are on a RadPageView inside a RadMultiPage inside an edit form inside a RadGrid inside another RadPageView inside another RadMultiPage inside a UpdatePanel.

    Thank you anyway!
  4. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 03 Dec 2008 Link to this post

    Hi Eliyahu,

    In order to use RadInputManager for RadGrid template edit form textboxes, you need to use something like the implementation provided below. Currently RadGrid styles for textboxes inside the edit form have higher specificity than RadInputManager styles, so automatic styling of RadGrid edit textboxes by RadInputManager embedded skins is not possible - you will have to take the CSS styles from the Input Sunset skin and add an !important clause to each style, as demonstrated in the page below. We will fix this for our next release.

    <%@ Page Language="C#" %> 
    <%@ 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 = 3
            int rowsNum = 10
            string colName = "Column"
     
            for (int j = 1; j <= colsNum; j++) 
            { 
                dt.Columns.Add(String.Format("Column{0}", j)); 
            } 
     
            for (int i = 1; i <= rowsNum; i++) 
            { 
                dr = dt.NewRow(); 
     
                for (int k = 1; k <= colsNum; k++) 
                { 
                    colName = String.Format("Column{0}", k); 
                    dr[colName] = String.Format("{0} Row{1}", colName, i); 
                } 
                dt.Rows.Add(dr); 
            } 
     
            (sender as RadGrid).DataSource = dt
        } 
     
        protected void RadGrid_ItemCreated(object sender, GridItemEventArgs e) 
        { 
            if (e.Item is GridEditableItem && e.Item.IsInEditMode) 
            { 
                ControlCollection EditFormControls = (e.Item as GridEditableItem).Controls[1].Controls[0].Controls; 
                foreach (Control ctrl in EditFormControls) 
                { 
                    if (ctrl is TextBox) 
                    { 
                        (RadInputManager1.InputSettings[0] as InputSetting).TargetControls.Add(new TargetInput(ctrl.UniqueID, true)); 
                    } 
                } 
            } 
        } 
         
    </script> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>RadGrid and RadInputManager for ASP.NET AJAX</title> 
    <style type="text/css"
     
    html body .RadInputMgr_Sunset 
        border:1px solid #959485 !important; 
        padding:3px 0 3px 1px !important; 
        background:#fff !important; 
        color:#272522 !important; 
        font:12px arial,sans-serif !important; 
     
    html body .RadInput_Empty_Sunset 
        color:#b6b6b6 !important; 
     
    html body .RadInput_Hover_Sunset 
        border-color:#afaea3 !important; 
     
    html body .RadInput_Focused_Sunset 
        border-color:#d99209 !important; 
        color:#000 !important; 
     
    </style> 
    </head> 
    <body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <telerik:RadGrid 
        ID="RadGrid1" 
        runat="server" 
        OnNeedDataSource="RadGrid_NeedDataSource" 
        OnItemCreated="RadGrid_ItemCreated" 
        > 
        <MasterTableView CommandItemDisplay="Top" EditMode="EditForms"
            <Columns> 
                <telerik:GridEditCommandColumn HeaderText="Edit" ButtonType="ImageButton" /> 
            </Columns> 
            <EditFormSettings EditFormType="Template"
                <EditColumn ButtonType="ImageButton" /> 
                <FormTemplate> 
                    <br /><br /> 
                    Column1: <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind( "Column1" ) %>' /> 
                    Column2: <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind( "Column2" ) %>' /> 
                    Column3: <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind( "Column3" ) %>' /> 
                    <br /><br /> 
                </FormTemplate> 
            </EditFormSettings> 
        </MasterTableView> 
    </telerik:RadGrid> 
     
    <telerik:RadInputManager ID="RadInputManager1" runat="server" Skin="Sunset"
        <telerik:TextBoxSetting BehaviorID="TextBoxSetting1"
            <TargetControls> 
                <telerik:TargetInput ControlID="TextBox1" /> 
            </TargetControls> 
        </telerik:TextBoxSetting> 
    </telerik:RadInputManager> 
     
    <%-- The following TextBox is required by the InputManager --%> 
    <asp:TextBox ID="TextBox1" runat="server" Visible="false" /> 
     
    </form> 
    </body> 
    </html> 
     


    Kind regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top