Aug 18, 2015, 12:43 PM
[FIXED] [#871] [3.2.1] Hiding GridPanel headers
Hi,
I need to be able to toggle the visibility of GridPanel headers and display descriptive message within the View depending on presence of records in the Store. When the Store is empty, the GridPanel should display a "No records to display" message and hide the headers. When one or more records are found in the Store, the headers should reappear and the message be dismissed. Please refer to the code sample below. A similar paradigm was functional in v1.7. Please advise how to tweak it.
I need to be able to toggle the visibility of GridPanel headers and display descriptive message within the View depending on presence of records in the Store. When the Store is empty, the GridPanel should display a "No records to display" message and hide the headers. When one or more records are found in the Store, the headers should reappear and the message be dismissed. Please refer to the code sample below. A similar paradigm was functional in v1.7. Please advise how to tweak it.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
private object[] TestData
{
get
{
var now = DateTime.Now;
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, now },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
};
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.GridPanel1.GetView().EmptyText = "No records to display.";
this.GridPanel1.HideHeaders = true;
}
}
private void DataBind()
{
this.Store1.DataSource = this.TestData;
this.Store1.DataBind();
}
protected void Store1_ReadData(object sender, StoreReadDataEventArgs e)
{
var store = sender as Store;
if (store == null) return;
var dataSource = store.DataSource;
if (dataSource != null) return;
DataBind();
}
[DirectMethod]
public void CustomLoad(int count)
{
this.Store1.DataSource = this.TestData.Take(count);
this.Store1.DataBind();
this.GridPanel1.GetView().EmptyText = string.Empty;
this.GridPanel1.HideHeaders = false;
}
</script>
<script type="text/javascript">
var refreshHandler = function () {
var grid = this.up('gridpanel');
Ext.net.Mask.show({
el: grid
});
grid.getStore().reload({
callback: function () {
Ext.net.Mask.hide();
}
});
};
var customLoad = function () {
var count = 5;
App.direct.CustomLoad(count, {
eventMask: { showMask: true, msg: "Custom Loading..." },
success: function (result) {
App.GridPanel1.getView().refresh();
}
});
};
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Local Data Paging - Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" Flex="1">
<Store>
<ext:Store ID="Store1" runat="server" RemoteSort="false" RemotePaging="false" AutoLoad="true" PageSize="10" OnReadData="Store1_ReadData">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="company">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Width="200">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
<Editor>
<ext:TextField ID="TextField2" runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Change" Width="100" DataIndex="change" />
<ext:Column ID="Column4" runat="server" Text="Change" Width="100" DataIndex="pctChange" />
<ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="120" DataIndex="lastChange"
Format="HH:mm:ss" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" RefreshHandler="refreshHandler">
<Items>
<ext:Button runat="server" Text="Custom Load">
<Listeners>
<Click Fn="customLoad"></Click>
</Listeners>
</ext:Button>
</Items>
</ext:PagingToolbar>
</BottomBar>
<View>
<ext:GridView ID="GridView1" runat="server">
</ext:GridView>
</View>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Aug 18, 2015 at 3:04 PM.
Reason: [FIXED] [#871] [3.2.1]
