What's New?

[OPEN] [#283] Grid cell editor height

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Jun 13, 2013, 6:41 PM

    [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
    Jun 13, 2013, 9:04 PM
    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
    Jun 14, 2013, 5:12 AM
    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
    Jun 14, 2013, 1:14 PM
    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
    Jun 14, 2013, 1:45 PM
    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
    Jun 18, 2013, 4:06 AM
    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
    Jun 21, 2013, 6:11 AM
    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. [CLOSED] How to show ComboBox's current text in grid's cell with editor function
    By pumpkin in forum 1.x Legacy Premium Help
    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. GridPanel - TextArea - Height not covering cell text
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: Mar 05, 2009, 11:23 AM

Posting Permissions