Jun 22, 2012, 3:26 PM
[CLOSED] Mapping Columns to different DataIndexes
I have a GridPanel that shows several columns that contain codes. For the experienced user this is fine and saves a lot of space for each row because the codes are shorter in length compared to their descriptions. But for new users they are not use to the codes yet.
My tought was to initially show the gridpanel with codes in the columns, but allow for a "Display Option" menu that a user could decide to switch from codes to descriptions. So here are some thoughts:
Any thoughts or suggestions? What would be the javascript command to refresh the grid panel after performing either one of the above options.
My tought was to initially show the gridpanel with codes in the columns, but allow for a "Display Option" menu that a user could decide to switch from codes to descriptions. So here are some thoughts:
- Have hidden columns for the descriptions and through javascript show the description columns, hide the code columns and refresh the grid panel.
- An alternate way might be to remap the columns DataIndex property to a different ModelField and refresh the grid panel.
Any thoughts or suggestions? What would be the javascript command to refresh the grid panel after performing either one of the above options.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "AB", "Decription 1", "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "XY", "Decription 2", "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "AB", "Decription 1", "9/1 12:00am" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Code vs Description - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.x-grid-row-over .x-grid-cell-inner {
font-weight : bold;
}
</style>
<script type="text/javascript">
var template = '<span style="color:{0};">{1}</span>';
var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};
var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<h1>Simple Array Grid</h1>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="600"
Height="350">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<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="code" Type="String" />
<ext:ModelFiled Name="description" Type="String" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
<ext:Column runat="server" Text="Price" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:Column runat="server" Text="Blah 1" DataIndex="code" />
<ext:Column runat="server" Text="Blah 2" DataIndex="description" hidden="true" />
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
</ext:GridPanel>
</body>
</html>
Last edited by Daniil; Jun 26, 2012 at 9:21 PM.
Reason: [CLOSED]
Originally Posted by cwolcott
