Jan 27, 2013, 10:11 AM
[CLOSED] Disabling cell editing based on cell value in Ext.Net 2.1
Hi guys,
I have read plenty of posts regarding how to disable editing of grid panel cells based on their values. Most of them were for Ext.Net 1.x and could not get it with those methods. e.cancel property is no longer included in beforeEdit handler of editor plugin. cancelEdit also does not work. I also could not locate the stopEditing function for the edit plugin.
My scenario is:
Users can input new rows to the grid panel using an Insert button. No blank value is allowed and if editing is canceled by user (esc key etc.) empty record is being removed from store. Editing plugin is only supposed to be used for new item insertion. If a cell already contains a value, editor should not fire with double click. See the simplified code generating the issue. What is the way of disabling cell editing plugin based on the edited cell's value? (I want the editor combobox even do not appear). How is that possible? I am sure it is (; (;
By the way, this is my first premium support post. I got plenty of useful information from replies to my previous (free) posts and also posts of other friends. I hope I will not bother you with newbie questions (;
Thank you.
I have read plenty of posts regarding how to disable editing of grid panel cells based on their values. Most of them were for Ext.Net 1.x and could not get it with those methods. e.cancel property is no longer included in beforeEdit handler of editor plugin. cancelEdit also does not work. I also could not locate the stopEditing function for the edit plugin.
My scenario is:
Users can input new rows to the grid panel using an Insert button. No blank value is allowed and if editing is canceled by user (esc key etc.) empty record is being removed from store. Editing plugin is only supposed to be used for new item insertion. If a cell already contains a value, editor should not fire with double click. See the simplified code generating the issue. What is the way of disabling cell editing plugin based on the edited cell's value? (I want the editor combobox even do not appear). How is that possible? I am sure it is (; (;
By the way, this is my first premium support post. I got plenty of useful information from replies to my previous (free) posts and also posts of other friends. I hope I will not bother you with newbie questions (;
Thank you.
<%@ 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)
{
GridPanel1Store.DataSource = new object[]
{
new object[] { 1, "Item 01"},
new object[] { 2, "Item 02"},
new object[] { 3, "Item 03"}
};
GridPanel1Store.DataBind();
ComboBox1Store.DataSource = new object[]
{
new object[] { "Item 01"},
new object[] { "Item 02"},
new object[] { "Item 03"},
new object[] { "Item 04"},
new object[] { "Item 05"},
new object[] { "Item 06"},
new object[] { "Item 07"},
new object[] { "Item 08"},
new object[] { "Item 09"},
new object[] { "Item 10"},
};
ComboBox1Store.DataBind();
}
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>"Cell edit disable"</title>
<script type="text/javascript">
var insertHandler = function () {
App.GridPanel1Store.insert(0,{});
App.GridPanel1.editingPlugin.startEditByPosition({ row: 0, column: 0 });
}
var cellEditingHandler = function (e) {
if (e.record.data.Col1 == "") {
e.record.cancelEdit();
}
}
var cancelCellEditingHandler = function (e) {
if (e.record.data.Col1 == "") {
e.grid.getStore().remove(e.record);
e.grid.getView().refresh();
}
}
var beforeCellEditHandler = function (e) {
if (e.originalValue != "") {
App.CellEditing1.cancelEdit(); //does not work
// e does not have e.cancel property to set true for canceling edit (as it did in ext.net 1.x)
// .stopEditing() function is no longer there
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server"/>
<div>
<ext:Panel ID="Panel1" runat="server" Layout="FitLayout" Width="800">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" MinHeight="200">
<Store>
<ext:Store ID="GridPanel1Store" runat="server">
<Model>
<ext:Model ID="Model2" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"/>
<ext:ModelField Name="Col1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server" ID="ColumnModel1">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Col1" DataIndex="Col1" Align="Left" Flex="1">
<Editor>
<ext:ComboBox ID="ComboBox1" runat="server" DisplayField="Col1" ValueFiled ="Col1" Width="320" QueryMode="Local" Editable="false" AllowBlank="false">
<Store>
<ext:Store ID="ComboBox1Store" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Col1">
<Fields>
<ext:ModelField Name="Col1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi"/>
</SelectionModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server"> <%--Also tried setting Enabled="false". No effect ??--%>
<Listeners>
<Edit Handler="cellEditingHandler(e);"></Edit>
<CancelEdit Handler="cancelCellEditingHandler(e)"></CancelEdit>
<BeforeEdit Handler="beforeCellEditHandler(e)"></BeforeEdit>
</Listeners>
</ext:CellEditing>
</Plugins>
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Insert" Icon="Add">
<Listeners>
<Click Handler="insertHandler();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</Items>
</ext:Panel>
</div>
</form>
</body>
</html>
Last edited by Baidaly; Jan 27, 2013 at 9:17 PM.
Reason: [CLOSED]