May 26, 2022, 9:35 AM
[CLOSED] Problem with state and command column on dynamic grid
Hello
I have a problem with command column reproducible on this example
Note that without command column in game it works fine
Now the backround story (feel free to ignore, my problem is self demonstrated above):
I have a grid that loads its column dynamically according the result of SQL query
now the requirement is to have this grid statefull.
It was relativelly tricky by its own, but I found a solution like this
- before grid render without column set statefull to true
- once grid render set statefull to false ( oterwise adding any new column here would trigger storing state)
- get the previously stored state from state provider and call applyState method
- set statefull to true ( so any change on UI will trigger saving state)
using that seems to work without command column, but once the grid has command column the applyState throws the exception
I have a problem with command column reproducible on this example
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
function testState() {
var grid = <%= GridPanel1.ClientID %>
var state = { "columns": [{ "id": "h1" }, { "id": "h3", "width": 100 }, { "id": "h2", "width": 100 }, { "id": "h4" }] };
grid.applyState(state);
}
function addCommandColumn() {
var grid = <%= GridPanel1.ClientID %>
var commandColumnConfig = new Ext.grid.column.CommandColumn({
width: 140,
text:'Command column',
commands: [
{
xtype: "button",
command: "Edit",
tooltip: {
text: "Edit"
},
text: "Edit"
}, {
xtype: "tbseparator"
}, {
xtype: "button",
command: "Delete",
text: "Deactivate"
}
]
});
var columns = [];
columns.push({
text: 'id',
dataIndex: 'id'
});
columns.push({
text: 'company',
dataIndex: 'company'
});
columns.push(commandColumnConfig);
// store.rebuildMeta();
grid.reconfigure(columns);
grid.store.add({});
grid.store.add({});
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Namespace="" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Stateful="True"
StateID="test"
Title="Array Grid"
Width="800">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="10">
<Model>
<ext:Model runat="server" IDProperty="id">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="company" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
</ColumnModel>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Add column" Icon="Add" Handler="addCommandColumn()" />
<ext:Button runat="server" Text="Test State" Icon="Printer" Handler="testState()" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</form>
</body>
</html>Note that without command column in game it works fine
Now the backround story (feel free to ignore, my problem is self demonstrated above):
I have a grid that loads its column dynamically according the result of SQL query
now the requirement is to have this grid statefull.
It was relativelly tricky by its own, but I found a solution like this
- before grid render without column set statefull to true
- once grid render set statefull to false ( oterwise adding any new column here would trigger storing state)
- get the previously stored state from state provider and call applyState method
- set statefull to true ( so any change on UI will trigger saving state)
using that seems to work without command column, but once the grid has command column the applyState throws the exception
Last edited by fabricio.murta; Aug 02, 2022 at 3:43 PM.
Reason: duplicate of 63261
