PDA

View Full Version : [CLOSED] Filters header alignment



vmehta
Sep 16, 2014, 1:57 PM
I have added filters to a grid. If I have sub columns then the filter alignment is not uniform. Is there a way to align the filters at the extreme bottom of the column header so that all filter headers are uniformly aligned? I have attached a screenshot of the same.

Daniil
Sep 16, 2014, 6:40 PM
Hi @vmehta,

I can suggest a CSS solution adding a Cls for Columns that require custom alignment.

The key point in the example is the Cls="align-to-bottom" setting.

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" },
new object[] { "test", "test" },
new object[] { "test", "test" }
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<style>
.align-to-bottom .x-grid-header-widgets {
margin-top: 22px;
}
</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
ID="Column1"
runat="server"
Text="Test 1"
DataIndex="test1"
Cls="align-to-bottom" />

<ext:Column runat="server">
<Columns>
<ext:Column runat="server" Text="Test 1" DataIndex="test1">
<HeaderItems>
<ext:TextField runat="server" />
</HeaderItems>
</ext:Column>
<ext:Column runat="server" Text="Test 2" DataIndex="test2">
<HeaderItems>
<ext:TextField runat="server" />
</HeaderItems>
</ext:Column>
</Columns>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:FilterHeader runat="server" />
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>

vmehta
Sep 17, 2014, 2:11 PM
It worked. But when I resize the columns then the filter header also aligns differently. Is there a way to make it aligned to the bottom of the header always as fixed.

Daniil
Sep 17, 2014, 5:21 PM
If I resize a Column with my test case, it stays at the bottom.

Please clarify what is a browser you are testing with?

Could you, please, provide a screencast?

vmehta
Sep 25, 2014, 8:56 AM
I am using IE9.

Please check the screenshots for reference.

Daniil
Sep 25, 2014, 1:19 PM
I see the "Column 3" title splits to two lines. It should not happen by default. At least, I cannot reproduce that. I guess you've applied custom CSS to achieve that. Please provide a test case to reproduce that.