[CLOSED] Text overflow in GridPanel columns

  1. #1

    [CLOSED] Text overflow in GridPanel columns

    Hi,

    Is there any easy way to make ellipsis appear in a GridPanel column on text overflow?
    Last edited by Daniil; Sep 11, 2015 at 1:25 PM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    With a basic setup ellipsis appears by default. There is probably something in your configuration that makes ellipsis not appearing.

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test test test test test test test test test", "test" },
                    new object[] { "test", "test test test test test test test test test" },
                    new object[] { "test", "test" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #3
    Hi Daniil,

    You were correct and my issue seems to be related to the rule in http://forums.ext.net/showthread.php...Renderer-issue.
    Now, I'd like to keep that rule but for the rest of the Grid columns to behave normally, i.e. present the ellipsis on the cell text overflow. So, I've tried to apply a CSS rule as below but somehow I can't find the new class in the page DOM outside of the JS. Am I missing anything there?

    Edit in:
    The class actually gets applied to the column header. Apparently, Cls isn't the best attribute to use for what I need... Also tried CellCls (one would think it should work) with no result...

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test test test test test test test test test", "test" },
                    new object[] { "test", "test test test test test test test test test" },
                    new object[] { "test", "test" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
        <style>
            .clip-column div.x-grid-cell-inner {
                text-overflow: clip;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test 1" DataIndex="test1" Cls="clip-column" />
                        <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by vadym.f; Sep 10, 2015 at 9:45 PM. Reason: Correction
  4. #4
    Please use TdCls="clip-column".

    A CellCls is another story - it is used in a TableLayout.
    http://docs.sencha.com/extjs/5.1/5.1...ontainer.Table
  5. #5
    That worked, thanks! Please mark this thread as closed.

Similar Threads

  1. Replies: 11
    Last Post: Dec 29, 2014, 6:39 AM
  2. Center text in columns
    By ADV in forum 2.x Help
    Replies: 1
    Last Post: Dec 26, 2014, 10:49 AM
  3. [CLOSED] Text overflow in column with ellipsis
    By tMp in forum 2.x Premium Help
    Replies: 5
    Last Post: Aug 22, 2013, 1:45 PM
  4. [CLOSED] Possible to overflow text in a column grid?
    By feanor91 in forum 2.x Premium Help
    Replies: 4
    Last Post: Feb 12, 2013, 9:36 AM
  5. Ext.form.Label - text overflow
    By shaunhendrix in forum 1.x Help
    Replies: 3
    Last Post: May 23, 2011, 9:53 AM

Tags for this Thread

Posting Permissions