PDA

View Full Version : [CLOSED] Unhiding a hidden column on grid throws javascript error



vmehta
Jan 09, 2015, 12:56 PM
We have created a grid which has a hidden column by default. When user tries to unhide this column on the screen, it throws a javascript error.

We have two css classes to adjust margins according to a requirement.

Note : Please do not remove the css classes as we have such a requirement and we need the same two css classes that are used.

Please check the sample code.



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

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<style type="text/css">

.align-to-bottom1 .x-grid-header-widgets
{
margin-top: 63px;
}

.align-to-bottom2 .x-grid-header-widgets
{
margin-top: 50px;
}

</style>
<script runat="server">
public class Company
{
public int ID { get; set; }
public string Name { get; set; }
public double Price { get; set; }
}

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}

private void BindData()
{
Store store = this.GridPanelReviewIT.GetStore();
store.DataSource = this.GetData();
store.DataBind();
}

private List<Company> GetData()
{
DateTime today = DateTime.Today;

return new List<Company>
{
new Company { ID = 1, Name = "3m Co", Price = 71.72 },
new Company { ID = 2, Name = "Alcoa Inc", Price = 29.01},
new Company { ID = 3, Name = "Altria Group Inc", Price = 83.81},
new Company { ID = 4, Name = "American Express Company", Price = 52.55},
new Company { ID = 5, Name = "American International Group, Inc.", Price = 64.13},
new Company { ID = 6, Name = "AT&T Inc.", Price = 31.61},
new Company { ID = 7, Name = "Boeing Co.", Price = 75.43},

};
}
</script>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="GridPanelReviewIT" runat="server" ForceFit="true">
<Store>
<ext:Store ID="storeITReview" runat="server" PageSize="15">
<Model>
<ext:Model ID="modelITReview" runat="server">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Price" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="colShortDescription" runat="server" Text="ID" DataIndex="ID" Cls="align-to-bottom1"
Filterable="false">
</ext:Column>
<ext:Column ID="colRoughRisk" runat="server" Text="Name" DataIndex="Name" Width="120"
Cls="columnAlignLeft" Filterable="true">
</ext:Column>
<ext:Column ID="colRisk" runat="server" Text="Price" DataIndex="Price" Width="120"
Cls="columnAlignLeft" Hidden="true" Filterable="true">
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="grdView1" runat="server" />
</View>
<Plugins>
<ext:FilterHeader ID="FilterHeader222" runat="server">
</ext:FilterHeader>
</Plugins>
</ext:GridPanel>

</form>
</body>
</html>

Dimitris
Jan 09, 2015, 2:53 PM
Hello,

Yes, the grid acts in a strange fashion and a javascript error is produced. What about hiding the column through javascript just after render instead of doing it in markup? The following example demonstrates:



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

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<style type="text/css">

.align-to-bottom1 .x-grid-header-widgets
{
margin-top: 63px;
}

.align-to-bottom2 .x-grid-header-widgets
{
margin-top: 50px;
}

</style>
<script runat="server">
public class Company
{
public int ID { get; set; }
public string Name { get; set; }
public double Price { get; set; }
}

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}

private void BindData()
{
Store store = this.GridPanelReviewIT.GetStore();
store.DataSource = this.GetData();
store.DataBind();
}

private List<Company> GetData()
{
DateTime today = DateTime.Today;

return new List<Company>
{
new Company { ID = 1, Name = "3m Co", Price = 71.72 },
new Company { ID = 2, Name = "Alcoa Inc", Price = 29.01},
new Company { ID = 3, Name = "Altria Group Inc", Price = 83.81},
new Company { ID = 4, Name = "American Express Company", Price = 52.55},
new Company { ID = 5, Name = "American International Group, Inc.", Price = 64.13},
new Company { ID = 6, Name = "AT&T Inc.", Price = 31.61},
new Company { ID = 7, Name = "Boeing Co.", Price = 75.43},

};
}
</script>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="GridPanelReviewIT" runat="server" ForceFit="true">
<Store>
<ext:Store ID="storeITReview" runat="server" PageSize="15">
<Model>
<ext:Model ID="modelITReview" runat="server">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Price" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="colShortDescription" runat="server" Text="ID" DataIndex="ID" Cls="align-to-bottom1"
Filterable="false">
</ext:Column>
<ext:Column ID="colRoughRisk" runat="server" Text="Name" DataIndex="Name" Width="120"
Cls="columnAlignLeft" Filterable="true">
</ext:Column>
<ext:Column ID="colRisk" runat="server" Text="Price" DataIndex="Price" Width="120"
Cls="columnAlignLeft" Filterable="true">
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="grdView1" runat="server">
<Listeners>
<AfterRender Handler="this.getHeaderCt().getHeaderAtIndex(2).hide();" />
</Listeners>
</ext:GridView>
</View>
<Plugins>
<ext:FilterHeader ID="FilterHeader222" runat="server">
</ext:FilterHeader>
</Plugins>
</ext:GridPanel>

</form>
</body>
</html>