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

Skinning asp:textbox as telerik:radtextbox

3 Answers 175 Views
Input
This is a migrated thread and some comments may be shown as answers.
Eliyahu Goldin
Top achievements
Rank 1
Eliyahu Goldin asked on 01 Dec 2008, 03:15 PM
With skinning, is there a way to get asp:textbox look as telerik:radtextbox styled with embedded Sunset skin?

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 01 Dec 2008, 03:19 PM
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.
0
Eliyahu Goldin
Top achievements
Rank 1
answered on 01 Dec 2008, 03:47 PM
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!
0
Dimo
Telerik team
answered on 03 Dec 2008, 02:08 PM
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.
Tags
Input
Asked by
Eliyahu Goldin
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Eliyahu Goldin
Top achievements
Rank 1
Share this question
or