1 Attachment(s)
[OPEN] [#1832] staggered columns
Hi,
I have a problem with the alignment of the columns with respect to the header when I change the browser zoom.
Attachment 25448
below the code used, but it is that of the example grid -> layout -> fitlayout, only with more columns
thanks,
Guglielmo
Code:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = this.Jobs;
this.Store1.DataBind();
}
private List<Job> Jobs
{
get
{
List<Job> jobs = new List<Job>();
for (int i = 1; i <= 50; i++)
{
jobs.Add(new Job(
i,
"Task" + i.ToString(),
DateTime.Today.AddDays(i),
DateTime.Today.AddDays(i + i),
(i%3 == 0)));
}
return jobs;
}
}
public class Job
{
public Job(int id, string name, DateTime start, DateTime end, bool completed)
{
this.ID = id;
this.Name = name;
this.Start = start;
this.End = end;
this.Completed = completed;
}
public int ID { get; set; }
public string Name { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool Completed { get; set; }
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>GridPanel with FitLayout - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Theme="Material" />
<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
<Items>
<ext:GridPanel
runat="server" Layout="FitLayout" ForceFit="true"
Header="false" ColumnLines="true"
Border="false">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="10">
<Model>
<ext:Model runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Start" Type="Date" />
<ext:ModelField Name="End" Type="Date" />
<ext:ModelField Name="Completed" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server"
Text="ID"
Width="40"
Sortable="true"
DataIndex="ID">
<Filter>
<ext:NumberFilter />
</Filter>
</ext:Column>
<ext:Column runat="server"
Text="Job Name"
Sortable="true"
DataIndex="Name"
Flex="1">
<Filter>
<ext:StringFilter />
</Filter>
</ext:Column>
<ext:DateColumn runat="server"
Text="Start"
Width="120"
Sortable="true"
DataIndex="Start"
Format="yyyy-MM-dd">
<Filter>
<ext:DateFilter>
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
</Filter>
</ext:DateColumn>
<ext:DateColumn runat="server"
Text="End"
Width="120"
Sortable="true"
DataIndex="End"
Format="yyyy-MM-dd">
<Filter>
<ext:DateFilter>
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
</Filter>
</ext:DateColumn>
<ext:Column runat="server"
Text="Completed"
Width="80"
Sortable="true"
DataIndex="Completed">
<Renderer Handler="return (value) ? 'Yes':'No';" />
<Filter>
<ext:BooleanFilter />
</Filter>
</ext:Column>
<ext:Column runat="server"
Text="Completed"
Width="80"
Sortable="true"
DataIndex="Completed" />
<ext:Column runat="server"
Text="Completed"
Width="80"
Sortable="true"
DataIndex="Completed" />
<ext:Column runat="server"
Text="Completed"
Width="80"
Sortable="true"
DataIndex="Completed" />
<ext:Column runat="server"
Text="Completed"
Width="80"
Sortable="true"
DataIndex="Completed" />
<ext:Column runat="server"
Text="Completed"
Width="80"
Sortable="true"
DataIndex="Completed" />
<ext:Column runat="server"
Text="Completed"
Width="80"
Sortable="true"
DataIndex="Completed" />
<ext:Column runat="server"
Text="Completed"
Width="80"
Sortable="true"
DataIndex="Completed" />
<ext:Column runat="server"
Text="Completed"
Width="80"
Sortable="true"
DataIndex="Completed" />
<ext:Column runat="server"
Text="Completed"
Width="80"
Sortable="true"
DataIndex="Completed" />
<ext:CheckColumn ID="Certifica" DataIndex="Certifica" runat="server" Text="<b>Cert</b>" Width="50" Editable="true"
Align="Center" Sortable="False">
</ext:CheckColumn>
<ext:ImageCommandColumn ID="ImageCommandColumn2" runat="server" Width="40" Align="Center" IconCls="x-fa fa-save">
</ext:ImageCommandColumn>
<ext:ImageCommandColumn ID="CommandColumn1" runat="server" Width="40" Align="Center" IconCls="x-fa fa-save">
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" LoadMask="false" />
</View>
<Plugins>
<ext:GridFilters runat="server" />
</Plugins>
<BottomBar>
<ext:PagingToolbar
runat="server"
DisplayInfo="true"
DisplayMsg="Displaying Jobs {0} - {1} of {2}"
/>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
