[CLOSED] Disabling cell editing based on cell value in Ext.Net 2.1

  1. #1

    [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.

    <%@ 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]
  2. #2
    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>
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Quote Originally Posted by Vladimir View Post
    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.
  4. #4
    Here is the link to API where it is mentioned
    http://docs.sencha.com/ext-js/4-1/#!...ent-beforeedit
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    Quote Originally Posted by Vladimir View Post
    Here is the link to API where it is mentioned
    http://docs.sencha.com/ext-js/4-1/#!...ent-beforeedit
    Thank you Vladimir.

Similar Threads

  1. [CLOSED] Cell editing with complex editor
    By Leonid_Veriga in forum 2.x Premium Help
    Replies: 3
    Last Post: Sep 21, 2012, 5:21 PM
  2. Replies: 2
    Last Post: Aug 09, 2012, 4:25 AM
  3. Replies: 4
    Last Post: Jul 10, 2012, 5:35 PM
  4. [CLOSED] Editing cell of gridPanel
    By supera in forum 2.x Premium Help
    Replies: 7
    Last Post: May 23, 2012, 12:47 PM
  5. [CLOSED] ColumnTree cell editing
    By kenanhancer in forum 1.x Premium Help
    Replies: 2
    Last Post: Feb 04, 2011, 7:38 AM

Posting Permissions