Width of In-Line edit controls

11 posts, 0 answers
  1. Andrew
    Andrew avatar
    70 posts
    Member since:
    Oct 2008

    Posted 28 Jan 2009 Link to this post

    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.
  2. Andrew
    Andrew avatar
    70 posts
    Member since:
    Oct 2008

    Posted 28 Jan 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 02 Feb 2009 Link to this post

    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.

    <%@ 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.
  5. Andrew
    Andrew avatar
    70 posts
    Member since:
    Oct 2008

    Posted 02 Feb 2009 Link to this post

    Thank you for the response, I will give it a go.

    Andrew
  6. Edward
    Edward avatar
    20 posts
    Member since:
    Mar 2009

    Posted 07 Apr 2009 Link to this post

    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
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 07 Apr 2009 Link to this post

    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.
  8. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 07 Apr 2009 Link to this post

    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.
  9. Pam
    Pam avatar
    10 posts
    Member since:
    Sep 2012

    Posted 03 Oct 2012 Link to this post

    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
      
  10. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Oct 2012 Link to this post

    Hi,

    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.
  11. Pam
    Pam avatar
    10 posts
    Member since:
    Sep 2012

    Posted 04 Oct 2012 Link to this post

    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
  12. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 08 Oct 2012 Link to this post

    Hi Pam,

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