如何设置gridview文本框高度以避免在itemTemplate中滚动

Question

Hello and thanks for looking - I've searched for this and cant get it !

I am trying to set the height of a text box which is in an ItemTemplate in a gridview. The gridview is bound from a datatable in the code behind. I am trying to be able to set the height of the textbox to prevent scrolling. The width is set (30% of container). the Gridview sits in an Updatepanel.

The text contains a mixture of text and carriage returns.

I can do this via javascript but this seems to require setting from eg onkeyup

  function textAreaAdjust(o) {
        o.style.height = o.scrollHeight;
    }

but i cant get this to happen on rowdatabound so when the text is placed in the textbox, it is constrained by the height of the height of the gridview row.

here is the code for the itemtemplate

  <asp:TemplateField HeaderText="Jobs / Notes" HeaderStyle-CssClass="JobNotesCol">
            <EditItemTemplate>
                 <asp:TextBox ID="JobNotesTB"  runat="server" Text='<%# Bind("JobNotes") %>' OnTextChanged="TB_TextChanged" TextMode="MultiLine"  style="min-height:98%; width:98%;" onkeyup="textAreaAdjust(this)" AutoPostBack="True" ></asp:TextBox>
            </EditItemTemplate>
             <ItemTemplate>
                <asp:TextBox ID="JobNotesTB"  runat="server" Text='<%# Bind("JobNotes") %>' OnTextChanged="TB_TextChanged" TextMode="MultiLine"  style="min-height:98%; width:98%;" onkeyup="textAreaAdjust(this)" AutoPostBack="True" ></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>

So my question is how should i do this - can i work out the height it needs to be and just set this from the c# onrowdatabound ?, or can i fire the java when the row is bound ?

I am restrained by having to use IE8 and so the handy looking jquery autosizing textbox is out ! - until we move into 19th century that is !

thanks for any advice !

Answer 1

For others ...... Here is the jquery function that enables simply adding "expand" to the class of the textbox. full article here : http://www.sitepoint.com/build-auto-expanding-textarea-2/

 (function ($) { // jQuery plugin definition $.fn.TextAreaExpander = function (minHeight, maxHeight) { // var hCheck = !($.browser.msie || $.browser.opera); var hCheck = !( $.browser.opera); // resize a textarea function ResizeTextarea(e) { // event or initialize element? e = e.target || e; // find content length and box width var vlen = e.value.length, ewidth = e.offsetWidth; if (vlen != e.valLength || ewidth != e.boxWidth) { if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0px"; var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax)); e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden"); e.style.height = h + "px"; e.valLength = vlen; e.boxWidth = ewidth; } return true; }; // initialize this.each(function () { // is a textarea? if (this.nodeName.toLowerCase() != "textarea") return; // set height restrictions var p = this.className.match(/expand(\\d+)\\-*(\\d+)*/i); this.expandMin = minHeight || (p ? parseInt('0' + p[1], 10) : 0); this.expandMax = maxHeight || (p ? parseInt('0' + p[2], 10) : 99999); // initial resize ResizeTextarea(this); // zero vertical padding and add events if (!this.Initialized) { this.Initialized = true; $(this).css("padding-top", 0).css("padding-bottom", 0); $(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea); } }); return this; }; })(jQuery); // initialize all expanding textareas jQuery(document).ready(function () { jQuery("textarea[class*=expand]").TextAreaExpander(); });