[CLOSED] Height of gridPanel row in css file

  1. #1

    [CLOSED] Height of gridPanel row in css file

    Hi!!

    In 1.x version of ext.net, I set a height of my row for specific gridPanel and column using a ColumnID in my css file, as follow:

    
    #grdSugestoes td.x-grid3-td-Descricao {
        overflow: hidden;
    }
    
    #grdSugestoes td.x-grid3-td-Descricao div.x-grid3-cell-inner {
        white-space: normal;
        height: 28px;
    }
    The ColumnID has removed from 2.x version of ext.net... Why I can set this properties in css file now?

    Thanks for any help...
    Last edited by geoffrey.mcgill; Jan 24, 2012 at 2:28 PM.
  2. #2
    Hi,

    Regarding ColumnID, please see the CHANGELOG item #12.
    https://examples2.ext.net/#/Getting_...nts/CHANGELOG/

    As well, CSS classes names have been changed.

    I think the following should cause the same effect.

    Example
    #grdSugestoes td.x-grid-cell-Descricao {
    
        overflow: hidden;
    }
     
    #grdSugestoes td.x-grid-cell-Descricao div.x-grid-cell-inner {
    
        white-space: normal;
        height: 28px;
    }
  3. #3
    Hi Daniil... thanks a lot for your response...

    The codes of grdSugestoes working fine... thanks...

    But I have another gridPanel, declared into Window called wndDetails, (the gridPanel ID is grdPareceres), into a UserControl called Sugestoes_Details.ascx, and this gridPanel don't was modified with the changes in the css file...

    CssFile:
    #grdPareceres td.x-grid-cell-Parecer_Descricao {
    	overflow: hidden;
    }
    
    #grdPareceres td.x-grid-cell-Parecer_Descricao div.x-grid-cell-inner {
    	white-space: normal;
    	height: 28px;
    }
    
    #grdPareceres td.x-grid-cell-Parecer_IDUsuario_Nome {
    	overflow: hidden;
    }
    
    #grdPareceres td.x-grid-cell-Parecer_IDUsuario_Nome div.x-grid-cell-inner {
    	white-space: normal;
    	height: 28px;
    }
    
    #grdPareceres td.x-grid-cell-Parecer_Data {
    	overflow: hidden;
    }
    
    #grdPareceres td.x-grid-cell-Parecer_Data div.x-grid-cell-inner {
    	white-space: normal;
    	height: 28px;
    }
    In wndDetails, into Sugestoes_Details.ascx UserControl, I declare a Column Model of grdPareceres:
    <ColumnModel runat="server">
         <Columns>
             <ext:DateColumn runat="server" ID="Parecer_Data" Text="Data" DataIndex="Data" Width="75px" Sortable="true" Format="dd/MM/yyyy" />
             <ext:Column runat="server" ID="Parecer_IDUsuario_Nome" Text="Usuário" DataIndex="IDUsuario_Nome" Width="100px" Sortable="true" />
             <ext:Column runat="server" ID="Parecer_Descricao" Text="Descrição" DataIndex="Descricao" Width="160px" Sortable="true" />
         </Columns>
    </ColumnModel>
    in my aspx Page called Sugestoes.aspx, I link a Usercontrol Sugestoes_Details.ascx
    <%@ Register src="Sugestoes_Details.ascx" tagname="DetailsWindow" tagprefix="superaWebControl" %>
    and

    <superaWebControl:DetailsWindow ID="wndSugestoesDetail" runat="server" />
    Finally, I link the cssfile this way, only in my aspx page called Sugestoes.aspx

    <head runat="server">
        <title>Sugestões</title>
        <link href="~/Resources/Styles/SuperaWeb.css" rel="stylesheet" type="text/css" />
        <link href="~/Resources/Styles/ExtNet.css" rel="stylesheet" type="text/css" />
        <script src="/scripts/utils.js" type="text/javascript"> </script>
        <script src="/scripts/masks.js" type="text/javascript"> </script>
        <script src="/scripts/validators.js" type="text/javascript"> </script>
        <script src="/scripts/jsDate.js" type="text/javascript"> </script>
        
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles"/>
        <script src="/scripts/ExtJS.js" type="text/javascript"> </script>
    </head>
    I do not understand where I'm wrong, since it is the same way I changed the grdSugestoes GridPanel, and it worked well ...
    If not asking too much, it could help me find my mistake?

    Thanks for any help!
  4. #4
    By default, a control's ClientID is not the same as server ID when it's within a user control.
    http://forums.ext.net/showthread.php...ll=1#post53355

    It means that a GridPanel's client id is not "grdPareceres", so, your rule with "#grdPareceres" is not applied.

    To fix I can suggest the following changes.

    1. Set up Cls for a GridPanel, for example:
    Cls="my-grid"
    2. Replace
    #GridPanelID
    with
    .my-grid
    in CSS rules.

    Here is the full example.

    Example Page
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <%@ Register Src="~/TestUC.ascx" TagPrefix="uc" TagName="TestUC" %>
    
    <!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 v2 Example</title>
    
        <style type="text/css">
            .my-grid .x-grid-cell-inner {
                background-color: Red;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <uc:TestUC runat="server" />
        </form>
    </body>
    </html>
    Example User Control
    <%@ Control 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[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                store.DataBind();
            }
        }
    </script>
    
    <ext:GridPanel 
        ID="GridPanel1" 
        runat="server" 
        AutoHeight="true" 
        Cls="my-grid">
        <Store>
            <ext:Store runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="test1" />
                            <ext:ModelField Name="test2" />
                            <ext:ModelField Name="test3" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                <ext:Column runat="server" Text="Test3" DataIndex="test3" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    Generally, I would prefer to avoid ids in CSS as much as I can.
  5. #5
    Thanks a lot for your response, Daniil

    I follow the steps in exemplo above and the rows in grdPareceres has changed

    Thansk, again

Similar Threads

  1. [CLOSED] GridPanel Row Height
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 31, 2015, 3:38 PM
  2. [CLOSED] GridPanel row height problem
    By sailendra in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: May 21, 2012, 10:29 AM
  3. Replies: 1
    Last Post: May 14, 2011, 10:51 AM
  4. [CLOSED] Height of a gridpanel
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Nov 30, 2010, 9:57 AM
  5. [CLOSED] Setting the height value to a GridPanel.
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 24, 2010, 9:51 AM

Posting Permissions