GridTextBoxColumnEditor vs TextBoxMaxLength in Multiline mode

[Steeve]

Hi,

How can I bind a keyup event on a GridTextBoxColumnEditor.

I tried this, but the keyup event never fired:

RadGrid

<ClientEvents OnBatchEditOpening="onBatchEditOpening" OnBatchEditOpened="onBatchEditOpened"></ClientEvents>

<!-- Column -->
<telerik:GridBoundColumn UniqueName="Comments" ColumnEditorID="GridTextBoxEditComments" HeaderText="<%$Resources:FsActivityService,Comments%>" DataField="Comments" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Left" AllowFiltering="false" ></telerik:GridBoundColumn>

<telerik:GridTextBoxColumnEditor ID="GridTextBoxEditComments" runat="server" TextBoxMaxLength="255" TextBoxMode="MultiLine">
                    <TextBoxStyle Width="100%" />
                </telerik:GridTextBoxColumnEditor>

Javascript:

function onBatchEditOpened(sender, args) {

     var cell = args.get_cell();

     var textArea = cell.getElementsByTagName("textarea")[0];

     var textAreaId = textArea.id;

 

     if (cell.style.backgroundColor == "lightgray" || cell.style.backgroundColor == "lightgrey")        

         textArea.value = "";

 

     $('#' + textAreaId).css('overflow', 'hidden');

     $('#' + textAreaId).addClass('textareaComments');

      

     $('#' + textAreaId).unbind('keyup').bind('keyup', function(evt)

     {

         checkTextAreaMaxLength(textArea, evt, 255);

     });

     

     textAreaAdjust(textArea);

 }

 

function textAreaAdjust(o) {

     o.style.height = "1px";

     o.style.height = (o.scrollHeight)+"px";

 }

 

 function checkTextAreaMaxLength(textBox,e, length) {

     alert('check length');            

 }

Thank you

Steeve

[Steeve]

Hi,

I forgot to mention that we are using the version 2014.2.724.45 and our default browser is IE9.

Thanks

Steeve

[Konstantin Dikov]

Hello Steeve,

With Batch Editing, in order to get reference to the editor for a column you could handle the server-side OnPreRender event of the grid and use the approach demonstrated in the following help article, section Server-Side API:

• RadGrid - Batch Editing

For your convenience, following is an example demonstrating how to attach an event handler for the onkeydown event of the TextBox control:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function handleKeyDown(sender, ev) {
            alert(ev.keyCode);
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" OnPreRender="RadGrid1_PreRender">
    <MasterTableView EditMode="Batch">
        <Columns>
            <telerik:GridBoundColumn UniqueName="Comments" ColumnEditorID="GridTextBoxEditComments"
                HeaderText="Comments" DataField="Comments" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Left"
                AllowFiltering="false"></telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
    </ClientSettings>
</telerik:RadGrid>

<telerik:GridTextBoxColumnEditor ID="GridTextBoxEditComments" runat="server" TextBoxMaxLength="255" TextBoxMode="MultiLine">
    <TextBoxStyle Width="100%" />
</telerik:GridTextBoxColumnEditor>

And the code-behind:

private DataTable GetGridData()
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("Comments", typeof(string));
    for (int i = 0; i < 5; i++)
    {
        table.Rows.Add(i, "Some comment" + i);
    }

    return table;
}

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    RadGrid1.DataSource = GetGridData();
}

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    GridTableView masterTable = (sender as RadGrid).MasterTableView;
    GridColumn commentsColumn = masterTable.GetColumnSafe("Comments") as GridColumn;
    TextBox commentsTextBox = (masterTable.GetBatchColumnEditor(commentsColumn) as GridTextBoxColumnEditor).TextBoxControl;
    commentsTextBox.Attributes.Add("onkeydown", "handleKeyDown(this, event)");
}

Hope this helps.


Regards,
Konstantin Dikov
Telerik