[CLOSED] Gridpanel cell layout

  1. #1

    [CLOSED] Gridpanel cell layout

    Hello,

    If I have a gridpanel's autoexpand column defined like this:

    <ext:Column ColumnID="ComplianceItemName" DataIndex="ComplianceItemName" Header="item name" >
              <Commands>
                          <ext:ImageCommand CommandName="ItemView" Icon="ApplicationViewList">
                            </ext:ImageCommand>
                </Commands>
    </ext:Column>
    And if the value is too long, I have something like this:





    Any suggestion?
    Attached Thumbnails Click image for larger version. 

Name:	GridPanel cell layout.GIF 
Views:	127 
Size:	13.2 KB 
ID:	2360  
    Last edited by Daniil; Mar 01, 2011 at 10:36 AM. Reason: [CLOSED]
  2. #2
    Hi,

    I can suggest you to sue custom Renderer.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <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 ", "test1" },
                    new object[] { "test test test test test test test test ", "test2" },
                    new object[] { "test test test test test test test test ", "test3" }
                };
                store.DataBind();
            }
        }
    </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 runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1">
                        <Renderer Handler="return Ext.util.Format.ellipsis(value, 15);" />
                        <Commands>
                            <ext:ImageCommand CommandName="ItemView" Icon="ApplicationViewList" />
                        </Commands>
                    </ext:Column>
                    <ext:Column Header="Test2" DataIndex="test2" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #3
    Yeah this looks nice, however I've tried to setup tooltips but having some issues - they are mixing up:

    
     <script type="text/javascript">
    
            var renderFn = function (value, metaData, record) {
    
                metaData.attr = 'ext:qtip="' + value + '"';
    
                return Ext.util.Format.ellipsis(value, 15);
    
    
            }
             
        
        </script>
    
    
    .....
    <ext:Column Header="Test1" DataIndex="test1">
          <Renderer Fn="renderFn" />
                   <Commands>
                          <ext:ImageCommand CommandName="ItemView" Icon="ApplicationViewList" ToolTip-Text="View Item" />
                    </Commands>
     </ext:Column>
  4. #4
    Please clarify what does 'mixing up' mean?

    It appears to be fine in the sample below:

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <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[] { "test1 test test test test test test test ", "test1" },
                    new object[] { "test2 test test test test test test test ", "test2" },
                    new object[] { "test3 test test test test test test test ", "test3" }
                };
                store.DataBind();
            }
        }
    </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 runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/javascript">
            var renderFn = function(value, metaData, record) {
                metaData.attr = 'ext:qtip="' + value + '"';
                return Ext.util.Format.ellipsis(value, 15);
            }
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1">
                        <Renderer Fn="renderFn" />
                        <Commands>
                            <ext:ImageCommand CommandName="ItemView" Icon="ApplicationViewList" />
                        </Commands>
                    </ext:Column>
                    <ext:Column Header="Test2" DataIndex="test2" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Quote Originally Posted by Daniil View Post
    Please clarify what does 'mixing up' mean?

    If user hovers over the cell's text it should get the full text value in tooltip, otherwise if it hovers over the ImageCommand it should get the different tooltip.

    Mixing up means :

    If user hovers over the shorten text first and then moves to image command - image command displays the text tooltip insted of its.


    And when user hovers the first cell nothing is displayed, when moved to second row's cell it displays correct text.

    <ext:ImageCommand CommandName="ItemView" Icon="ApplicationViewList" ToolTip-Text="View Item" />
  6. #6
    Thanks for the details.

    Well, it looks like 'ext:qtip' doesn't suite your needs.

    Try to use <ext:Tooltip>, please see
    https://examples1.ext.net/#/Miscella..._Cell_Tooltip/

    You should be able to specify one <ext:Tooltip> for specified cells and another for ImageCommand.

Similar Threads

  1. Replies: 4
    Last Post: Jul 10, 2012, 5:35 PM
  2. Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  3. Replies: 0
    Last Post: Aug 30, 2011, 2:48 PM
  4. GridPanel: set cell value.
    By Jortacua in forum 1.x Help
    Replies: 3
    Last Post: Sep 23, 2009, 4:28 PM
  5. [CLOSED] Getting cell value in GridPanel
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 01, 2008, 4:52 AM

Tags for this Thread

Posting Permissions