Bind multiline TextArea to inCell Grid

5 posts, 1 answers
  1. Mathias
    Mathias avatar
    34 posts
    Member since:
    Apr 2012

    Posted 04 Sep 2012 Link to this post


    I am using an inCell editable grid and I want to use a textarea in one column.

    The column looks like this:
    columns.Bound(p => p.Reason).Title("Reason")
    .ClientTemplate("<textarea rows='2' style='text-overflow:ellipsis; display:block; width:99%; height:100%; font-family:Arial; font-size:12px;' readonly='readonly'>#= Reason #</textarea>");

    And the Editor-Template like this:
    @model string
    @Html.TextAreaFor(m => m, new { rows = 2, cols = 35, wrap = "hard",  @readonly = true, style = "text-overflow:ellipsis; display:block; width:99%; height:100%; font-family:Arial; font-size:12px;" })

    My problem is, that I have to click outside the textarea of my ClientTemplate (but still inside the cell) to get the cell switched into the edit-mode. Is there any possibility to get the edit-mode by clicking anywhere in the cell... also if I click on the readonly-textarea which is defined in the ClientTemplate?

    If i don't use a ClientTemplate, the text which gets inserted, especially the returns won't be shown and the whole text is in one line.

    Does anyone have a solution for that?
  2. Answer
    Flappie avatar
    13 posts
    Member since:
    Nov 2009

    Posted 12 Sep 2012 Link to this post


    This may be somewhat late, but maybe still helpful, if only for those who randomly find this thread...

    Have you tried using the <pre> tag in the Client Template rather than a textarea? You'll have to style it to use a different font, but you're doing that for the textarea anyway.
  3. Mathias
    Mathias avatar
    34 posts
    Member since:
    Apr 2012

    Posted 17 Sep 2012 Link to this post

    Hi Flappie,

    thank you for your hint. With the pre-tag everything works perfectly! I used the following styles (if someone needs the same stuff):
    height: 60px;
    overflow: auto;
    margin-top: 0px;
    margin-bottom: 0px;

  4. TroyR
    TroyR avatar
    7 posts
    Member since:
    Nov 2015

    Posted 27 Apr 2016 Link to this post

    Thank you all for this thread!  I need a bit more explanation on the original post's code set up to accomplish something similar.

    How does his grid know to run the Editor-Template partial-view when he clicks into that column's cells?

    If you can, please reply with an example or link in C# MVC.  Thanks!

  5. Konstantin Dikov
    Konstantin Dikov avatar
    2083 posts

    Posted 02 May 2016 Link to this post

    Hi Troy,

    You could refer to the following help article and online demo for detailed information regarding the Editor templates:
    Hope this helps.

    Konstantin Dikov
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top