Using Q3 2008 RadGrid, Dot Net 3.5
I may have missed something, if so apologies in advance, but my question is whether there is a way of making the In-Line edit controls match the width of the column.
Perferably this would apply even if the user is re-sizing the columns, in real time client side!
Coupled to this, when column widths are small, the edit controls are often too large and spread into the next coumn to the right, again is there a resonable way to get them to fit. I may be asking a lot here, but it would make the Grid that bit better. By resonable, I mean a setting or minimal code behind (I will end up wnating this in quite a few places).
Yes I know I coudl use an edit form rather than in-line, but In-line is more appropriate for editing simple stuff.
I may have missed something, if so apologies in advance, but my question is whether there is a way of making the In-Line edit controls match the width of the column.
Perferably this would apply even if the user is re-sizing the columns, in real time client side!
Coupled to this, when column widths are small, the edit controls are often too large and spread into the next coumn to the right, again is there a resonable way to get them to fit. I may be asking a lot here, but it would make the Grid that bit better. By resonable, I mean a setting or minimal code behind (I will end up wnating this in quite a few places).
Yes I know I coudl use an edit form rather than in-line, but In-line is more appropriate for editing simple stuff.
10 Answers, 1 is accepted
0
Andrew
Top achievements
Rank 1
Rank 1
answered on 28 Jan 2009, 01:02 PM
As a further issue, the same query applies to the filter controls.
Yes, there is a "percentage" width option so things are much better, but there seems to be a minimum width - i.e. a column which is 50px wide seems to be too narrow. And when columns are stretched wide, using a percentage means some wasted space.
This might work better, if the "width" was the full width of the filter (including the graphic on the right included), as it is the "width"seems to just apply to the text box of the filter.
Yes, there is a "percentage" width option so things are much better, but there seems to be a minimum width - i.e. a column which is 50px wide seems to be too narrow. And when columns are stretched wide, using a percentage means some wasted space.
This might work better, if the "width" was the full width of the filter (including the graphic on the right included), as it is the "width"seems to just apply to the text box of the filter.
0
Hi Andrew,
Here is an example, which shows how to adjust the width of inline edit controls programmatically:
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/alleditablecolumns/defaultcs.aspx
Concerning real-time resizing of edit textboxes - this is possible and you can find an example below.
As for the filtering textboxes' width and "This might work better, if the "width" was the full width of the filter (including the graphic on the right included)" - this is possible, however, it will require the usage of browser-specific HTML and some CSS hacks, so we prefer not to do it this way for the moment.
Sincerely yours,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Here is an example, which shows how to adjust the width of inline edit controls programmatically:
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/alleditablecolumns/defaultcs.aspx
Concerning real-time resizing of edit textboxes - this is possible and you can find an example below.
As for the filtering textboxes' width and "This might work better, if the "width" was the full width of the filter (including the graphic on the right included)" - this is possible, however, it will require the usage of browser-specific HTML and some CSS hacks, so we prefer not to do it this way for the moment.
| <%@ Page Language="C#" %> |
| <%@ Import Namespace="System.Data" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <script runat="server"> |
| protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) |
| { |
| DataTable dt = new DataTable(); |
| DataRow dr; |
| int colsNum = 5; |
| int rowsNum = 10; |
| 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 RadGrid_ItemCreated(object sender, GridItemEventArgs e) |
| { |
| if (e.Item is GridEditableItem && e.Item.IsInEditMode) |
| { |
| ((e.Item as GridDataItem)["Column1"].Controls[0] as TextBox).Width = Unit.Percentage(90); |
| ((e.Item as GridDataItem)["Column2"].Controls[0] as TextBox).Width = Unit.Percentage(90); |
| ((e.Item as GridDataItem)["Column3"].Controls[0] as TextBox).Width = Unit.Percentage(90); |
| ((e.Item as GridDataItem)["Column4"].Controls[0] as TextBox).Width = Unit.Percentage(90); |
| ((e.Item as GridDataItem)["Column5"].Controls[0] as TextBox).Width = Unit.Percentage(90); |
| } |
| } |
| </script> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <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" |
| AutoGenerateEditColumn="true" |
| OnItemCreated="RadGrid_ItemCreated" |
| OnNeedDataSource="RadGrid_NeedDataSource"> |
| <MasterTableView EditMode="InPlace" /> |
| <ClientSettings> |
| <Resizing AllowColumnResize="true" EnableRealTimeResize="true" /> |
| </ClientSettings> |
| </telerik:RadGrid> |
| </form> |
| </body> |
| </html> |
Sincerely yours,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Andrew
Top achievements
Rank 1
Rank 1
answered on 02 Feb 2009, 11:08 AM
Thank you for the response, I will give it a go.
Andrew
Andrew
0
Edward
Top achievements
Rank 1
Rank 1
answered on 07 Apr 2009, 12:12 PM
How do you declare the width in this scenario, for textbox or dropdown, when using inplace editmode. I want to define this in CSS or inline styles.
Thanks,
Ed
Thanks,
Ed
0
Princy
Top achievements
Rank 2
Rank 2
answered on 07 Apr 2009, 12:25 PM
Hello Edward,
You can set the column editors for the various columns declaratively as explained in the following help document:
Declarative style editors
Thanks
Princy.
You can set the column editors for the various columns declaratively as explained in the following help document:
Declarative style editors
Thanks
Princy.
0
Hello Edward,
You can use declarative style editors to define the look and feel of textbox/dropdown editors that are part of built-in GridBoundColumns/GridDropDownColumns. See this topic which elaborates on this subject.
Best regards,
Sebastian
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
You can use declarative style editors to define the look and feel of textbox/dropdown editors that are part of built-in GridBoundColumns/GridDropDownColumns. See this topic which elaborates on this subject.
Best regards,
Sebastian
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Pam
Top achievements
Rank 2
Rank 2
answered on 03 Oct 2012, 03:58 PM
Hi,
When I am in editmode, the row with the textboxes are oversized that it flows outside the actual boundaries of the radgrid
how can I fix this? thanks
Pam
When I am in editmode, the row with the textboxes are oversized that it flows outside the actual boundaries of the radgrid
how can I fix this? thanks
Pam
0
Princy
Top achievements
Rank 2
Rank 2
answered on 04 Oct 2012, 01:08 PM
Hi,
Try setting the width in edit mode as shown below.
C#:
Thanks,
Princy.
Try setting the width in edit mode as shown below.
C#:
protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e){ if (e.Item is GridEditableItem && e.Item.IsInEditMode) { GridEditableItem item = (GridEditableItem)e.Item; TextBox txt = (TextBox)item["UniqueName"].Controls[0]; txt.Width = Unit.Pixel(40); }}Thanks,
Princy.
0
Pam
Top achievements
Rank 2
Rank 2
answered on 04 Oct 2012, 05:00 PM
Hi Princy,
Thanks for the reply, but what I did is placed the radgrid inside a div with overflow properties set to scroll.
One more thing, if I set the editmode into popUp, the textboxes are so close to each other, is there a way where I can set the distance of each textbox? thanks in advance
Pam
Thanks for the reply, but what I did is placed the radgrid inside a div with overflow properties set to scroll.
One more thing, if I set the editmode into popUp, the textboxes are so close to each other, is there a way where I can set the distance of each textbox? thanks in advance
Pam
0
Hi Pam,
Could you please try to set the following property?
I have created a sample RadGrid web site to test the described behavior. On my side everything works as expected and the Edit mode controls are displayed correctly. Could you please check out the attached application and try to distinguish the crucial differences between our projects?
In addition, you can give a look at the following topic for accessing controls in edit mode and modify their properties as requested:
http://www.telerik.com/help/aspnet-ajax/grid-accessing-cells-and-rows.html
I hope this will prove helpful.
Regards,
Eyup
the Telerik team
Could you please try to set the following property?
<MasterTableView ... EditMode="InPlace" TableLayout="Auto">I have created a sample RadGrid web site to test the described behavior. On my side everything works as expected and the Edit mode controls are displayed correctly. Could you please check out the attached application and try to distinguish the crucial differences between our projects?
In addition, you can give a look at the following topic for accessing controls in edit mode and modify their properties as requested:
http://www.telerik.com/help/aspnet-ajax/grid-accessing-cells-and-rows.html
I hope this will prove helpful.
Regards,
Eyup
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.