Hello again, @JCarlosF!
If you want it to be permantently (statically) read-only, you can just remove the
<Editor> block from it. But that's the "obvious answer" that is probably not what you want.
So if you want to dynamically enable or disable it, you can use the editor's
beforeEdit event with a simple logic that checks a boolean to each column (or wherever else if you prefer), and only allow the edit clicks to pass thru if that boolean is true-ish.
I have adapted the example you pointed to add one bottombar button for each column, toggling the column state via a single client-side method (advantage: no server round-trip to toggle columns). The adapted example goes last, after I show a next option.
If you want to
serve the page with the selected columns (say, given the user access level to the grid), you'd better off switching the grid to be
drawn at code behind. This way you can conditionally bind the
editor config to each column you want. But once served, it will be final, with no means to enable/disable (other than client-side manipulation). This would be a nice option to save on page logic if you don't need to switch editable/readonly status selectively from columns, but just allow them according to the initial state of the request (user clearance, data being handled, etc).
Here's the adapted for client-side, dynamically enabling and disabling editability of specific columns:
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.GridPanel1.Store.Primary.DataSource = new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Locking Column Cell Editing - Ext.NET Examples</title>
<script>
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 + "%");
};
var toggleEditable = function (btn, colIdx) {
var col = App.GridPanel1.getColumns()[colIdx];
if (col.editable === true) {
col.editable = false;
btn.setText(btn.text.replace(/: .*$/, ": readonly"));
} else {
col.editable = true;
btn.setText(btn.text.replace(/: .*$/, ": editable"));
}
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<h1>Locking Column Cell Editing Example</h1>
<p>This example shows how to edit a locking Panel using cell editing.</p>
<p>It is not possible to lock or unlock <i>all</i> columns using the user interface. Each side, locked or unlocked must always contain at least one column.</p>
<ext:GridPanel
ID="GridPanel1"
runat="server"
ColumnLines="true"
Title="Locking Grid Column"
Width="600"
Height="350">
<Store>
<ext:Store 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="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Defaults>
<ext:Parameter Name="editable" Value="true" Mode="Raw" />
</Defaults>
<Columns>
<ext:Column
runat="server"
Text="Company<br>Name"
DataIndex="company"
Width="200"
Locked="true"
Sortable="false">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Price" DataIndex="price" Width="97" Lockable="false">
<Renderer Format="UsMoney" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="change" Width="97">
<Renderer Fn="change" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="% Change" DataIndex="pctChange" Width="97">
<Renderer Fn="pctChange" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="97">
<Editor>
<ext:DateField runat="server" />
</Editor>
</ext:DateColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CellSelectionModel runat="server" />
</SelectionModel>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1">
<Listeners>
<BeforeEdit Handler="return e.column.editable" />
</Listeners>
</ext:CellEditing>
</Plugins>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Col 1: editable" Handler="toggleEditable(this, 0)" />
<ext:Button runat="server" Text="Col 2: editable" Handler="toggleEditable(this, 1)" />
<ext:Button runat="server" Text="Col 3: editable" Handler="toggleEditable(this, 2)" />
<ext:Button runat="server" Text="Col 4: editable" Handler="toggleEditable(this, 3)" />
<ext:Button runat="server" Text="Col 5: editable" Handler="toggleEditable(this, 4)" />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:GridPanel>
</body>
</html>
Hope this helps!
