PDA

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



supera
Jan 23, 2012, 7:49 PM
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...

Daniil
Jan 24, 2012, 6:49 AM
Hi,

Regarding ColumnID, please see the CHANGELOG item #12.
http://examples2.ext.net/#/Getting_Started/Release_Documents/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;
}

supera
Jan 24, 2012, 10: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...

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!

Daniil
Jan 24, 2012, 1:18 PM
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?12957&p=53355&viewfull=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.

supera
Jan 24, 2012, 1: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