Eliyahu Goldin
Top achievements
Rank 1
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
0
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.
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
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!
Thank you anyway!
0
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.
Kind regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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.