View Full Version : [CLOSED] Height of gridPanel row in css file

Jan 23, 2012, 6:49 PM

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...

Jan 24, 2012, 5:49 AM

Regarding ColumnID, please see the CHANGELOG item #12.

As well, CSS classes names have been changed.

I think the following should cause the same effect.


#grdSugestoes td.x-grid-cell-Descricao {

overflow: hidden;

#grdSugestoes td.x-grid-cell-Descricao div.x-grid-cell-inner {

white-space: normal;
height: 28px;

Jan 24, 2012, 9:48 AM
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...


#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">
<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" />

in my aspx Page called Sugestoes.aspx, I link a Usercontrol Sugestoes_Details.ascx

<%@ Register src="Sugestoes_Details.ascx" tagname="DetailsWindow" tagprefix="superaWebControl" %>


<superaWebControl:DetailsWindow ID="wndSugestoesDetail" runat="server" />

Finally, I link the cssfile this way, only in my aspx page called Sugestoes.aspx

<head runat="server">
<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>

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!

Jan 24, 2012, 12:18 PM
By default, a control's ClientID is not the same as server ID when it's within a user control.

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:


2. Replace


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"

<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;
<form runat="server">
<ext:ResourceManager runat="server" />
<uc:TestUC runat="server" />

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" },

<ext:Store runat="server">
<ext:Model runat="server">
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
<ColumnModel runat="server">
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />

Generally, I would prefer to avoid ids in CSS as much as I can.

Jan 24, 2012, 12:53 PM
Thanks a lot for your response, Daniil

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

Thansk, again