Jan 30, 2015, 4:32 PM
GridPanel: Group commands don't work correctly after grid.Reconfigure
Hello,
Grid group commands (image and grid) doesn't work correctly with Reconfigure method;
Code example below
Grid group commands (image and grid) doesn't work correctly with Reconfigure method;
Code example below
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
private static string[] LAST_NAMES = new string[] { "Jones", "Smith", "Lee", "Wilson", "Black", "Williams", "Lewis", "Johnson", "Foot", "Little", "Vee", "Train", "Hot", "Mutt" };
private static string[] FIRST_NAMES = new string[] { "Fred", "Julie", "Bill", "Ted", "George", "John", "Mark", "Mike", "Chris", "Bob", "Travis", "Kelly", "Sara" };
private static string[] CITIES = new string[] { "New York", "Los Angeles", "Chicago", "Houston", "Philadelphia", "Phoenix", "San Antonio", "San Diego", "Dallas", "San Jose" };
private static string[] DEPARTMENTS = new string[] { "Development", "QA", "Marketing", "Accounting", "Sales" };
private static Random RANDOM = new Random();
public class Employee
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int No { get; set; }
public string Department { get; set; }
}
private string[] GetUnigueName(List<string> usedNames)
{
string firstName = FIRST_NAMES[RANDOM.Next(FIRST_NAMES.Length)];
string lastName = LAST_NAMES[RANDOM.Next(LAST_NAMES.Length)];
string[] name = new string[] { firstName, lastName };
string key = firstName + lastName;
if (usedNames.Contains(key))
{
return this.GetUnigueName(usedNames);
}
else
{
usedNames.Add(key);
return name;
}
}
private object[] GetEmployeesData()
{
Employee[] data = new Employee[20];
List<string> usedNames = new List<string>();
for (int i = 0; i < 20; i++)
{
string[] name = this.GetUnigueName(usedNames);
data[i] = new Employee()
{
FirstName = name[0],
LastName = name[1],
No = int.Parse(RANDOM.Next(100, 200).ToString() + RANDOM.Next(100, 200).ToString()),
Department = DEPARTMENTS[RANDOM.Next(DEPARTMENTS.Length)]
};
}
return data;
}
private AbstractStore GetEmployeesStore()
{
Store store = new Store();
store.GroupField = "FirstName";
store.Data = this.GetEmployeesData();
store.Fields.Add("FirstName", "LastName", "No", "Department");
return store;
}
private List<ColumnBase> GetEmployeesColumns()
{
return new List<ColumnBase>
{
new Column()
{
Text = "First Name",
DataIndex = "FirstName",
Flex = 1
},
new Column()
{
Text = "Last Name",
DataIndex = "LastName",
Flex = 1
},
new Column()
{
Text = "Employee No.",
DataIndex = "No",
Width = 120
},
new Column()
{
Text = "Department",
DataIndex = "Department",
Flex = 1
}
};
}
protected void ShowEmployeesButton_Click(object sender, DirectEventArgs e)
{
var columns = this.GetEmployeesColumns();
columns.Insert(0, new ImageCommandColumn()
{
Commands =
{
new ImageCommand { CommandName = "AA", Icon = Icon.ApplicationAdd }
},
GroupCommands =
{
new GroupImageCommand { CommandName= "BB", Icon = Icon.ApplicationEdit }
}
});
X.Js.Call("Ext.suspendLayouts");
this.GridPanel1.Reconfigure(this.GetEmployeesStore(), this.GetEmployeesColumns());
X.Js.Call("Ext.resumeLayouts", true);
}
protected void ShowEmployeesButton2_Click(object sender, DirectEventArgs e)
{
GridPanel2.ColumnModel.Columns.AddRange(this.GetEmployeesColumns());
Store2.RemoveFields();
foreach (string str in new string[] { "FirstName", "LastName", "No", "Department" })
{
Store2.AddField(new ModelField { Name = str }, false);
}
Store2.RebuildMeta();
X.Js.Call("Ext.suspendLayouts");
this.GridPanel2.Reconfigure();
X.Js.Call("Ext.resumeLayouts", true);
Store2.DataSource = this.GetEmployeesData();
Store2.DataBind();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Reconfigure GridPanel - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Margins="0 0 10 0">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Center" Pack="Center" />
</LayoutConfig>
<Items>
<ext:TabPanel runat="server" Width="500" Height="330">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server" Title="Example 1">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button
ID="ShowEmployeesButton"
runat="server"
Text="Show Employees"
OnDirectClick="ShowEmployeesButton_Click"
Margins="0 0 0 10" />
</Items>
</ext:Toolbar>
</TopBar>
<ViewConfig EmptyText="Click a button to show a dataset" DeferEmptyText="false" />
<Features>
<ext:Grouping runat="server">
</ext:Grouping>
</Features>
</ext:GridPanel>
<ext:GridPanel
ID="GridPanel2"
runat="server" Title="Example 2">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button
ID="Button1"
runat="server"
Text="Show Employees"
OnDirectClick="ShowEmployeesButton2_Click"
Margins="0 0 0 10" />
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store ID="Store2" runat="server" IgnoreExtraFields="false" GroupField="FirstName">
<Model>
<ext:Model runat="server">
</ext:Model>
</Model>
</ext:Store>
</Store>
<ViewConfig EmptyText="Click a button to show a dataset" DeferEmptyText="false" />
<ColumnModel runat="server">
<Columns>
<ext:ImageCommandColumn runat="server" Width="36">
<Commands>
<ext:ImageCommand CommandName="AA" Icon="Add" />
</Commands>
<GroupCommands>
<ext:GroupImageCommand CommandName="BB" Icon="Anchor" Text="Text 1" />
</GroupCommands>
</ext:ImageCommandColumn>
<ext:CommandColumn runat="server" Hidden="true">
<GroupCommands>
<ext:GridCommand CommandName="CC" Icon="ApplicationOsxKey" Text="Text 2" />
</GroupCommands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<Features>
<ext:Grouping runat="server">
</ext:Grouping>
</Features>
</ext:GridPanel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>