[OPEN] [#283] Grid cell editor height

  1. #1

    [OPEN] [#283] Grid cell editor height

    Can grid editor autofit height and width to visible cell area? In the example below, click on first cell in column 2. The editor height's is smaller than the height of the cell. The width is also weird.

    <script runat="server">    
      
        Private Sub storePlans_RefreshData(ByVal sender As Object, ByVal e As Ext.Net.StoreReadDataEventArgs) Handles storePlans.ReadData
             
            Me.storePlans.DataSource = GetGridData()
            Me.storePlans.DataBind()
            
        End Sub
         
        Private Function GetGridData() As IEnumerable
            Dim list As New System.Collections.Generic.List(Of Object)
             
            list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2 fsf  fsdf dsf dsf dsf dsfs fs fds fsf dsf dsf dsf sf dsf dsf dsf dsf ds fds f d fs fds"})
            list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2"})
            
            Return list
                    
        End Function
         
         
    </script>
    <!DOCTYPE html>
    <html>
    <head>
       
    </head>
    <body>
        <form id="Form1" runat="server">
        <script type="text/javascript">
            function rendererWordWrap(value, metadata, record, rowIndex, colIndex) {
                return '<div style="white-space:normal !important;">' + value + '</div>';
            }       
    
    
        </script>
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
            DisableViewState="true" QuickTips="false" />
        <ext:Store runat="server" ID="storePlans" WarningOnDirty="false" AutoLoad="true">
            <Proxy>
                <ext:PageProxy>
                    <Reader>
                        <ext:JsonReader>
                        </ext:JsonReader>
                    </Reader>
                </ext:PageProxy>
            </Proxy>
            <Model>
                <ext:Model ID="Model1" runat="server" IDProperty="ENTITYGUID">
                    <Fields>
                        <ext:ModelField Name="ENTITYGUID">
                        </ext:ModelField>
                        <ext:ModelField Name="Column1">
                        </ext:ModelField>
                        <ext:ModelField Name="Column2">
                        </ext:ModelField>
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
        <ext:GridPanel runat="server" ID="gridPlans" StoreID="storePlans" TrackMouseOver="true"
            SelectionMemory="false" EnableColumnHide="false" Cls="x-grid-dir" EnableDragDrop="true"
            DDGroup="DDGrid" Flex="1" AutoScroll="true" ColumnLines="true" Width="500" Height="500"
            Padding="20">
            <BottomBar>
                <ext:PagingToolbar runat="server" ID="gridPager" StoreID="storePlans">
                </ext:PagingToolbar>
            </BottomBar>
            <ColumnModel>
                <Columns>
                    <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Locked="true">
                    </ext:RowNumbererColumn>
                    <ext:Column ID="Column1" DataIndex="Column1" runat="server" Width="200" Locked="true">
                    </ext:Column>
                    <ext:Column ID="Column2" DataIndex="Column2" runat="server"
                        Width="300">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server">
                            </ext:TextField>
                        </Editor>
                        <Renderer Fn="rendererWordWrap">
                        </Renderer>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1">
                </ext:CellEditing>
            </Plugins>
        </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jun 21, 2013 at 6:12 AM. Reason: [OPEN] [#283]
  2. #2
    Hello!

    You can use Column's Wrap property instead of custom renderer. Please, take a look at the following sample:

    <%@ Page Language="VB" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <script runat="server">    
       
        Sub storePlans_RefreshData(ByVal sender As Object, ByVal e As Ext.Net.StoreReadDataEventArgs) Handles storePlans.ReadData
              
            Me.storePlans.DataSource = GetGridData()
            Me.storePlans.DataBind()
             
        End Sub
          
        Private Function GetGridData() As IEnumerable
            Dim list As New System.Collections.Generic.List(Of Object)
              
            list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2 fsf  fsdf dsf dsf dsf dsfs fs fds fsf dsf dsf dsf sf dsf dsf dsf dsf ds fds f d fs fds"})
            list.Add(New With {.ENTITYGUID = Guid.NewGuid(), .Column1 = "Test", .Column2 = "Test2"})
             
            Return list
                     
        End Function
          
          
    </script>
    <!DOCTYPE html>
    <html>
    <head>
        
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray" 
            DisableViewState="true" QuickTips="false" />
        <ext:Store runat="server" ID="storePlans" WarningOnDirty="false" AutoLoad="true">
            <Proxy>
                <ext:PageProxy>
                    <Reader>
                        <ext:JsonReader>
                        </ext:JsonReader>
                    </Reader>
                </ext:PageProxy>
            </Proxy>
            <Model>
                <ext:Model ID="Model1" runat="server" IDProperty="ENTITYGUID">
                    <Fields>
                        <ext:ModelField Name="ENTITYGUID">
                        </ext:ModelField>
                        <ext:ModelField Name="Column1">
                        </ext:ModelField>
                        <ext:ModelField Name="Column2">
                        </ext:ModelField>
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
        <ext:GridPanel runat="server" ID="gridPlans" StoreID="storePlans" TrackMouseOver="true"
            SelectionMemory="false" EnableColumnHide="false" Cls="x-grid-dir" EnableDragDrop="true"
            DDGroup="DDGrid" Flex="1" AutoScroll="true" ColumnLines="true" Width="500" Height="500"
            Padding="20">
            <BottomBar>
                <ext:PagingToolbar runat="server" ID="gridPager" StoreID="storePlans">
                </ext:PagingToolbar>
            </BottomBar>
            <ColumnModel>
                <Columns>
                    <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Locked="true">
                    </ext:RowNumbererColumn>
                    <ext:Column ID="Column1" DataIndex="Column1" runat="server" Width="200" Locked="true">
                    </ext:Column>
                    <ext:Column ID="Column2" DataIndex="Column2" runat="server" Wrap="true" Flex="1">
                        <Editor>
                            <ext:TextArea ID="TextField1" runat="server">
                            </ext:TextArea>
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1">
                    <Listeners>
                        <BeforeEdit Handler="
                            if (e.column.getEditor().field.isXType('textarea')) {
                                e.column.getEditor().field.setHeight(e.row.clientHeight);
                                e.column.getEditor().field.setWidth(e.row.clientWidth);
                            }
                            "></BeforeEdit>
                    </Listeners>
                </ext:CellEditing>
            </Plugins>
        </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #3
    Hi everybody,

    Re: height

    AutoSizeConfig can help with height.

    <ext:Column 
        ID="Column2"
        runat="server" 
        DataIndex="Column2" 
        Width="300" 
        Wrap="true">
        <Editor>
            <ext:TextField runat="server" />
        </Editor>
        <EditorOptions>
            <AutoSizeConfig Height="BoundEl"  />
        </EditorOptions>
    </ext:Column>
    Re: width

    I think an editor's width exceeds a cell due to scrolling and there is no auto size option to take an editor's width from a boundEl's clientWidth, i.e. without scrolling. I think it might be worth to ask Sencha about such an option. Though, preparing a test case with pure ExtJS, I discovered another problem.
    http://www.sencha.com/forum/showthread.php?265863

    So, it stops me to create a test case for "boundElClient" auto sizing option with pure ExtJS. And, seems, I am unable to reproduce the same out of the grid context.
  4. #4
    There must be a bug with my version of Ext.NET because setting autosizeconfig results in javascript error. The page renders out:

    editor:new Ext.grid.CellEditor(Ext.apply({field:{id:"TextField1",xtype:"textfield"}}, {autoSize:{height:,wrap:true}
    Note the height property is missing 'boundEl'. I will try this again when we update from SVN. For now, I will use the listener on editng plugin
  5. #5
    Quote Originally Posted by jchau View Post
    For now, I will use the listener on editng plugin
    Currently, you will be forced to use it for width, anyway. I mean, even if you get height: "boundEl" working.
  6. #6
    Quote Originally Posted by Daniil View Post
    Though, preparing a test case with pure ExtJS, I discovered another problem.
    http://www.sencha.com/forum/showthread.php?265863
    They opened a bug.
  7. #7
    Created an Issue for this bug.
    http://www.sencha.com/forum/showthread.php?265863

    Currently, it is working in Ext.NET due to our override, but we will need to review it after Sencha fix.
    https://github.com/extnet/Ext.NET/issues/283

Similar Threads

  1. [CLOSED] Portlet with different cell height.
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 15, 2011, 4:10 PM
  2. [CLOSED] Textfield Editor's Height
    By skyone in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 17, 2011, 9:34 AM
  3. Replies: 1
    Last Post: Jul 30, 2009, 6:33 AM
  4. Column Editor TextArea Height
    By sipo in forum Bugs
    Replies: 0
    Last Post: Apr 09, 2009, 4:23 AM
  5. Replies: 0
    Last Post: Mar 05, 2009, 11:23 AM

Posting Permissions