PDA

View Full Version : [CLOSED] Disabling cell editing based on cell value in Ext.Net 2.1



bayoglu
Jan 27, 2013, 11:11 AM
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.



<%@ 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>

Vladimir
Jan 27, 2013, 8:45 PM
Hi,

To prevent cell editing you need to return false in BeforeEdit handler
- return false; in 'beforeCellEditHandler'
- change BeforeEdit (add 'return')


<BeforeEdit Handler="return beforeCellEditHandler(e);"></BeforeEdit>

bayoglu
Jan 27, 2013, 9:05 PM
Hi,

To prevent cell editing you need to return false in BeforeEdit handler
- return false; in 'beforeCellEditHandler'
- change BeforeEdit (add 'return')


<BeforeEdit Handler="return beforeCellEditHandler(e);"></BeforeEdit>


Thanks Vladimir, that works.
Am I missing a documentation explaning this behavior?
Please mark as closed.

Vladimir
Jan 27, 2013, 9:12 PM
Here is the link to API where it is mentioned
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.CellEditing-event-beforeedit

bayoglu
Jan 30, 2013, 6:35 PM
Here is the link to API where it is mentioned
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.CellEditing-event-beforeedit

Thank you Vladimir.