This is a migrated thread and some comments may be shown as answers.

GridTextBoxColumnEditor vs TextBoxMaxLength in Multiline mode

2 Answers 97 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steeve
Top achievements
Rank 1
Steeve asked on 03 Nov 2014, 03:10 PM
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

2 Answers, 1 is accepted

Sort by
0
Steeve
Top achievements
Rank 1
answered on 05 Nov 2014, 09:33 PM
Hi,

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

Thanks

Steeve
0
Konstantin Dikov
Telerik team
answered on 06 Nov 2014, 09:18 AM
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:
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Steeve
Top achievements
Rank 1
Answers by
Steeve
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or