RadGrid Edit Form InPlace Textbox Width

8 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    47 posts
    Member since:
    Sep 2010

    Posted 02 Sep 2010 Link to this post

    Hi,

    I've been searching the forum for an answer to this question for days and it appears that no one has covered it before. I'm using InPlaceEdit mode for my RadGrid control. When I put it into edit mode, the size of the text fields that show up stretch the page I'm using quite a bit.

    Question: Is there a way to customize the width of the textboxes that appear in the RadGrid edit mode's inplace edit mode?
  2. Jonathan
    Jonathan avatar
    47 posts
    Member since:
    Sep 2010

    Posted 02 Sep 2010 Link to this post

    It appears that my question has an alternative answer as shown by this helpful video. Thanks anyway.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Elmar De Groot
    Elmar De Groot avatar
    1 posts
    Member since:
    Apr 2010

    Posted 15 Jun 2011 Link to this post

    Not sure whether this is one of the solutions discussed in the video as I didn't take the time to watch the video as it took to long...
    Anyway the easiest solution (to the best of my knowledge) is to add a css class with the following definition:

    .maximize input[type=text] { width:100%; }

    and then reference this css class in your bound column like so:

    <telerik:gridboundcolumn datafield="Name" headertext="Name" headerstyle-width="200px" itemstyle-cssclass="maximize" />


    This way the text editor will follow the size that you have set in your gridcolumn.
    Ciao,

    Elmar
  5. Iman
    Iman avatar
    4 posts
    Member since:
    May 2012

    Posted 24 May 2012 Link to this post

    hi
    i have same problem, but my  column is GridNumericColum and input box is RadNumericTextBox

    your CssClass is work properly for input[type=text] and dont work for RadNumericTextBox!
    are you have any suggestion?
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 May 2012 Link to this post

    Hello Iman,

    One suggestion is you can access the column in edit mode and set the width as shown below.
    C#:
    void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
     if (e.Item is GridEditableItem && e.Item.IsInEditMode)
     {
       GridEditableItem item = (GridEditableItem)e.Item;
       RadNumericTextBox txt = (RadNumericTextBox)item["Numeric"].Controls[0];
       txt.Width = Unit.Pixel(160);
     }
    }

    Thanks,
    Shinu.
  7. Iman
    Iman avatar
    4 posts
    Member since:
    May 2012

    Posted 25 May 2012 Link to this post

    hi Shinu
    Tank you for your replay.
    I founded it after research but i have to many Numeric column in my grid.
    however, now i have another question,
    did has any way to setRadNumericTextBox inGridEditableItem without programmatically?

    regards.
  8. Ramon
    Ramon avatar
    3 posts
    Member since:
    Jan 2011

    Posted 12 Jan 2014 Link to this post

    some JQuery:

    $telerik.$(document).ready(function () {
          $telerik.$(".rgEditRow :input[id*=Text]").width("400px");
        });
    in this case id*=Text means that the control contains, somewhere in the name, the  UniqueName you assigned to the column.
     UniqueName="Text"
    which is inside the .rgEditRow at edit time
  9. Sabaratnam
    Sabaratnam avatar
    10 posts
    Member since:
    Dec 2010

    Posted 15 Sep in reply to Elmar De Groot Link to this post

    Thanks a lot Elmar for your post. 

    It saved me a lot of trouble.

    Elmar De Groot said:Not sure whether this is one of the solutions discussed in the video as I didn't take the time to watch the video as it took to long...
    Anyway the easiest solution (to the best of my knowledge) is to add a css class with the following definition:

    .maximize input[type=text] { width:100%; }

    and then reference this css class in your bound column like so:

    <telerik:gridboundcolumn datafield="Name" headertext="Name" headerstyle-width="200px" itemstyle-cssclass="maximize" />


    This way the text editor will follow the size that you have set in your gridcolumn.
    Ciao,

    Elmar
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017