[CLOSED] TextArea control in Editable GridPanel is overlapping with the next Row

  1. #1

    [CLOSED] TextArea control in Editable GridPanel is overlapping with the next Row

    HI All
    Issue : TExtArea control in Editable GridPanel is overlapping withe the next Row , is there any way to fix the issue.

    When we clicked on remarks column in editable gridpanel then textarea control is not fitting the row, its showing slightly in next row
    Please see the screenshot for more details
    <%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" EnableEventValidation="false" %>
    
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="Ext.Net" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server"> 
     
    
        protected void Page_Load(object sender, EventArgs e)
        {
    
            if (!X.IsAjaxRequest)
            {
                DataTable dt = CustomColumns();
    
                storeEditMetrics.DataSource = dt;
                storeEditMetrics.DataBind();
            }
    
    
        }
    
        internal static DataTable CustomColumns()
        {
            System.Data.DataTable table1 = new System.Data.DataTable();
    
    
            table1.Columns.Add("Header1", typeof(string));
            table1.Columns.Add("Header2", typeof(string));
            table1.Columns.Add("Header3", typeof(string));
            table1.Columns.Add("Header4", typeof(string));
            table1.Columns.Add("Remarks", typeof(string));
    
    
    
            for (int i = 0; i < 8; i++)
            {
                DataRow dr = table1.NewRow();
    
                dr["Header1"] = "Header1 " + i.ToString();
                dr["Header2"] = "ks ";
                dr["Header3"] = i.ToString();
                dr["Header4"] = i.ToString();
                dr["Remarks"] = "1) ss 2) sss 3) sss 4) sss 5) sss 6) ssss 7) ss 8) sss 9) sss 10) sss 11) sss 12) ssss";
                table1.Rows.Add(dr);
            }
            return table1;
        } 
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Submit MultiSelect Values - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="" />
    
    
            <ext:GridPanel ID="grdPnlEditMetrics" runat="server" EnableColumnHide="false" EnableColumnMove="false" ButtonAlign="Center"
                Border="true" DisabledCls="DisabledPanelCss" Height="300" Width="820" AutoScroll="true" EnableColumnResize="false" Namespace="app"
                EmptyText="<%$ Resources:WebResource,GeneralMsg_NoRecordsFound %>" ValidateRequestMode="Disabled">
                <Store>
                    <ext:Store ID="storeEditMetrics" runat="server">
                        <Model>
                            <ext:Model ID="Model3" runat="server">
                                <Fields>
                                    <ext:ModelField Name="Header1" Type="Auto" />
                                    <ext:ModelField Name="Header2" Type="Auto" />
                                    <ext:ModelField Name="Header3" Type="Auto" />
                                    <ext:ModelField Name="Header4" Type="Auto" />
                                    <ext:ModelField Name="Remarks" Type="Auto" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <View>
                    <ext:GridView ID="grdViewMetrics" runat="server" TrackOver="false" StripeRows="false" MarkDirty="false" />
                </View>
                <Plugins>
                    <ext:CellEditing ID="rEditorEditMetrics" runat="server" ClicksToMoveEditor="1">
                    </ext:CellEditing>
                </Plugins>
                <ColumnModel>
                    <Columns>
                        <ext:Column runat="server" ID="Header1" Text="Metric Name" DataIndex="Header1" Width="200"
                            Sortable="false" Resizable="false" Height="22">
                        </ext:Column>
    
                        <ext:Column runat="server" ID="grdPnlEditMetrics_Header2" Text="Unit" DataIndex="Header2" Width="70" Sortable="false"
                            Resizable="false">
                        </ext:Column>
    
                        <ext:Column runat="server" ID="nbrHeader4Id" Text="Header4" DataIndex="Header4" Width="100" Sortable="false"
                            Align="Right" Resizable="false" ValidateRequestMode="Disabled">
                            <Editor>
                                <ext:NumberField ID="nbrHeader4" HideTrigger="true" SpinDownEnabled="false" SpinUpEnabled="false" AutoFitErrors="false"
                                    runat="server" MaxLength="9" DecimalPrecision="1" AllowBlank="true" ValidateBlank="false"
                                    CheckChangeEvents="true">
                                </ext:NumberField>
                            </Editor>
                        </ext:Column>
    
                        <ext:NumberColumn runat="server" ID="nbrHeader3Id" Text="Header3" DataIndex="Header3" Format="00.0" Width="100" Sortable="false"
                            Align="Right" Resizable="false">
                            <Editor>
                                <ext:NumberField ID="nbrHeader3" HideTrigger="true" SpinDownEnabled="false" SpinUpEnabled="false"
                                    runat="server" MaxLength="9" DecimalPrecision="1" AllowBlank="true" ValidateBlank="false">
                                </ext:NumberField>
                            </Editor>
                        </ext:NumberColumn>
    
                        <ext:Column runat="server" ID="Remarks" Text="Remarks" DataIndex="Remarks" Width="300" Sortable="false"
                            Resizable="false" ValidateRequestMode="Disabled">
                            <Editor>
                                <ext:TextArea ID="TxtTierDetailsComments" runat="server" MaxLength="500" Grow="true" GrowMin="63"
                                    GrowMax="150" MaskRe="[^<>]" StyleSpec="position:absolute;">
                                </ext:TextArea>
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel> 
    
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	TextArea.png 
Views:	35 
Size:	13.3 KB 
ID:	24164  
    Last edited by Daniil; Sep 01, 2015 at 10:54 PM. Reason: [CLOSED]
  2. #2
    Hi praveencat123

    I believe the issue here is that you have StyleSpec="position:absolute;" on your TextArea.

    You can take that off and additionally I believe you could add StyleSpec="margin-top: 45px;" to properly position the TextArea over the row
  3. #3
    On second thought, using StyleSpec="margin-top: 45px;" makes it go wonky when editing a big text.

    I can therefore suggest pairing StyleSpec="position:absolute;" with Y="-10" that should work well!
  4. #4
    Hello everybody,

    Setting an Alignment could be also a solution.
    <ext:Column ...>
        <Editor>
            <ext:TextArea ... />
        </Editor>
        <EditorOptions Alignment="tl-tl" />
    </ext:Column>

Similar Threads

  1. Toolbar items in the gridpanel is overlapping
    By praveencat123 in forum 2.x Help
    Replies: 0
    Last Post: Dec 05, 2014, 3:32 AM
  2. Replies: 2
    Last Post: Nov 17, 2014, 10:28 AM
  3. [CLOSED] Make TextArea in MessageBox Not Editable
    By elisa in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 05, 2013, 2:58 PM
  4. Replies: 3
    Last Post: Dec 20, 2010, 7:19 PM
  5. [CLOSED] TextArea width within editable GridPanel
    By danielg in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 18, 2009, 10:20 AM

Tags for this Thread

Posting Permissions