How to set gridview textbox height to avoid scrolling in 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 e.g. 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 !

I have eventually found a solution which works great and uses Jquery. Essentially identifies specific text areas and allows you to add a style definition which enables them to auto-expand. I post here so anyone else can find it ! link to article : [link] sitepoint.com/build-auto-expanding-textarea-2 — ThebigD

ThebigD ThebigD · Accepted Answer · 2015-12-27T17:24:55

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();
});

How to set gridview textbox height to avoid scrolling in itemtemplate

1 Answers