PDA

View Full Version : [CLOSED] enable/disable editing for each column in Gridpanel



JCarlosF
Oct 12, 2020, 3:58 PM
Hi! I have a question about the "cell editing" example:

1. How can I enable / disable editing for each column?

For example, if the gridpanel has 5 columns, enable editing in column 1 and 3 and disable editing in columns 2,4 and 5,

thanks!

fabricio.murta
Oct 12, 2020, 5:07 PM
Hello @JCarlosF!

All you need to do is set the column as Editable="False" or not give it an editor component at all to have it not editable.

If you want to dynamically enable/disable editing though, you need to set everything as editable at first, and handle the triggering through events. It depends on how exactly you are editing it though, i.e. which editing mechanism you are using with your grid panel. If using a cell editor or a row editor also, it will make the history different between the approaches to enable/disable editing for specific columns.

Hope this helps. If not, please be more specific on which editor you are using, maybe you can point an example in Examples Explorer you are basing on.

JCarlosF
Oct 12, 2020, 6:27 PM
thanks, i am using in the following example:

https://examples5.ext.net/#/GridPanel/Locking_Grid/Cell_Editing/

I can't find the editable property on the column

thanks!

fabricio.murta
Oct 12, 2020, 8:09 PM
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 (https://examples5.ext.net/#/GridPanel/ArrayGrid/DirectEvent_Creation/). 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!

JCarlosF
Oct 13, 2020, 4:16 PM
perfect! yes that helps me,

thanks!

fabricio.murta
Oct 13, 2020, 9:40 PM
Glad it helped, thank you very much for the feedback!