PDA

View Full Version : [CLOSED] [#78] [GridPanel] Hidden columns are rendered



Leonid_Veriga
Dec 12, 2012, 10:47 AM
Hello.

I have a grid with hidden column. This column contains "tall" content. Height of the elements, which are located in the hidden column, greater, then standard row height. This forces grid to make rows taller. Is there any way to not render hidden columns data? I created a simple example to demonstrate this issue.



<%@ Page Language="C#" %>

<%@ Import Namespace="System.Linq" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.CapabilitiesStore.DataSource = this.TestData(25);
this.CapabilitiesStore.DataBind();
}
}

private object[] TestData(int count)
{
var firstNames = new string[] { "Ed", "Tommy", "Aaron", "Abe", "Jamie", "Adam", "Dave", "David", "Jay", "Nicolas", "Nige" };
var lastNames = new string[] { "Spencer", "Maintz", "Conran", "Elias", "Avins", "Mishcon", "Kaneda", "Davis", "Robinson", "Ferrero", "White" };
var ratings = new int[] { 1, 2, 3, 4, 5 };
var salaries = new int[] { 100, 400, 900, 1500, 1000000 };

var data = new object[count];
var rnd = new Random();

for (int i = 0; i < count; i++)
{
var ratingId = rnd.Next(ratings.Length);
var salaryId = rnd.Next(salaries.Length);
var firstNameId = rnd.Next(firstNames.Length);
var lastNameId = rnd.Next(lastNames.Length);

var rating = ratings[ratingId];
var salary = salaries[salaryId];
var name = String.Format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
var isSelected = true;

data[i] = new
{
CapabilityId = i,
CapabilityName = "cap",
CapabilityNameSort = "cap_" + i,
CategoryName = "category_" + (i / 5),
IsGranted = true
};
}

return data;
}
</script>

<script type="text/javascript">
function testRenderer() {
return '<div style="height: 50px; background-color: #3366CC;">asdfasdf</div>';
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Buffered Scrolling - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var allowedSalaries = [100, 400, 900, 1500, 1000000];
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h1>Buffered Scrolling</h1>

<p>Ext.Net 2's brand new grid supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>

<p>The new grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>

<p>This example illustrates loading of all the records up front and buffering the rendering.</p>

<ext:Store ID="CapabilitiesStore" runat="server" GroupField="CategoryName">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Mapping="CapabilityId" />
<ext:ModelField Name="CapabilityName" />
<ext:ModelField Name="CapabilityNameSort">
</ext:ModelField>
<ext:ModelField Name="CategoryName" SortType="AsUCString" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="CapabilityNameSort" Direction="ASC" />
</Sorters>
</ext:Store>

<ext:GridPanel ID="AvailableCapabilitiesGrid"
runat="server"
StoreID="CapabilitiesStore"
Stateful="false"
Collapsible="false"
TitleCollapse="true"
Frame="false"
AutoScroll="True"
Collapsed="False"
ScrollDelta="16"
ForceFit="true"
Width="400">
<ColumnModel ID="AvailableCapabilitiesColumnModel" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Capability" Width="250" DataIndex="CapabilityNameSort" Sortable="false" Groupable="false" MenuDisabled="false">

</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Capability Group" Width="50" DataIndex="CategoryName" Groupable="false" />
<ext:Column runat="server" Hidden="true" Text="Hidden column">
<Renderer Fn="testRenderer" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel ID="AvailableCapabilitiesSelectionModel" runat="server" Mode="Simple" ShowHeaderCheckbox="true">
</ext:CheckboxSelectionModel>
</SelectionModel>
<View>
<ext:GridView ID="GroupingView3" runat="server"
TrackOver="true"
StripeRows="true" />
</View>
<Features>
<ext:Grouping runat="server"
HideGroupedHeader="true"
GroupHeaderTplString='{name}' />
</Features>
</ext:GridPanel>
</form>
</body>
</html>


Best regards.

Daniil
Dec 12, 2012, 12:07 PM
Hi,

An interesting issue. I am going to report to Sencha.

For now I can suggest:

1. Change the renderer


function testRenderer (value, metadata, record, rowIndex, colIndex) {
var grid = this;

if (!grid.columns[colIndex].hidden) {
value = '<div style="height: 50px;">test</div>';
} else {
value = "";
}

return value;
}

2. Refresh the grid when the column is shown.


<ext:Column runat="server" Hidden="true" Text="Hidden column">
<Renderer Fn="testRenderer" />
<Listeners>
<Show Handler="this.grid.getView().refresh();" />
</Listeners>
</ext:Column>

Daniil
Dec 12, 2012, 12:25 PM
The report is here.
http://www.sencha.com/forum/showthread.php?251392

Daniil
Dec 13, 2012, 4:11 AM
Sencha says that my report is "Dupe of: EXTJSIV-6734".

Opened an Issue to track it.
https://github.com/extnet/Ext.NET/issues/78

Leonid_Veriga
Dec 13, 2012, 12:46 PM
Thank you, Daniil.

bayoglu
Feb 12, 2013, 2:42 PM
Hi,

An interesting issue. I am going to report to Sencha.

For now I can suggest:

1. Change the renderer


function testRenderer (value, metadata, record, rowIndex, colIndex) {
var grid = this;

if (!grid.columns[colIndex].hidden) {
value = '<div style="height: 50px;">test</div>';
} else {
value = "";
}

return value;
}

2. Refresh the grid when the column is shown.


<ext:Column runat="server" Hidden="true" Text="Hidden column">
<Renderer Fn="testRenderer" />
<Listeners>
<Show Handler="this.grid.getView().refresh();" />
</Listeners>
</ext:Column>

Hello,
What would be your workaround to decrease row height when column with tall content is hidden? I have the same issue. When the column with multi line content is hidden, rowheight is sized according to the hidden column's row height still.
Thanks.

Daniil
Feb 12, 2013, 3:57 PM
Hello,

Probably, you need to set up a Hide listener with a refresh call.

bayoglu
Feb 12, 2013, 9:31 PM
Hello,

Probably, you need to set up a Hide listener with a refresh call.

Yes it did the trick. Thanks.

Baidaly
May 30, 2013, 5:43 AM
Hello!

The issue appears to be fixed in the SVN trunk. Please update.