[CLOSED] rowEditing cannot start edit after column hide

  1. #1

    [CLOSED] rowEditing cannot start edit after column hide

    Hi All,

    An any grid with a plagin:
              <ext:RowEditing runat="server" ClicksToEdit="1">
                        <Listeners>
                            <BeforeEdit Handler="Add(item, e);"/>
                        </Listeners>                   
                    </ext:RowEditing>
    and
              function Add(item, e) {
    
                        if (!#{GridPanelName}.columns[0].hidden) {
                            #{GridPanelName}.columns[0].hide();
                        }
    
                        var started = #{GridPanelName}.getRowEditor().startEdit();
     
                    }
    the
    #{GridPanelName}.getRowEditor().startEdit();
    helps if it's a new row but it does not help if it tries to edit an existing row.

    Any suggestions?

    Thank you.
    Last edited by Daniil; Oct 24, 2014 at 7:41 AM. Reason: [CLOSED]
  2. #2
    Hi @rbtceo,

    Could you, please, provide a full test case to test with?
  3. #3
    1. click on any row (to update) -> the last column becomes hidden but row is not in 'edit' mode

    the page from http://examples2.ext.net/#/GridPanel/Plugins/RowEditor/

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                
                store.DataSource = new List<object>
                {
                    new { 
                        Name = "Bill Foot", 
                        Email = "bill.foot@object.net", 
                        Start = new DateTime(2007, 2, 5), 
                        Salary = 37000, 
                        Active = true
                    },
                    new { 
                        Name = "Bill Little", 
                        Email = "bill.little@object.net", 
                        Start = new DateTime(2009, 6, 13), 
                        Salary = 53000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Jones", 
                        Email = "bob.jones@object.net", 
                        Start = new DateTime(2008, 10, 6), 
                        Salary = 70000, 
                        Active = true
                    },
                    new { 
                        Name = "Bob Train", 
                        Email = "bob.train@object.net", 
                        Start = new DateTime(2009, 5, 5), 
                        Salary = 68000, 
                        Active = true
                    },
                    new { 
                        Name = "Chris Johnson", 
                        Email = "chris.johnson@object.net", 
                        Start = new DateTime(2009, 1, 25), 
                        Salary = 47000, 
                        Active = true
                    }
                };
                
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
        
    <html>
    <head id="Head1" runat="server">
        <title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        
        <ext:XScript runat="server">
            <script>
                var addEmployee = function () {
                    var grid = #{GridPanel1};
                    grid.editingPlugin.cancelEdit();
    
                    // Create a record instance through the ModelManager
                    var r = Ext.ModelManager.create({
                        name: 'New Guy',
                        email: 'new@object.net',
                        start: Ext.Date.clearTime(new Date()),
                        salary: 50000,
                        active: true
                    }, 'Employee');
    
                    grid.store.insert(0, r);
                    grid.editingPlugin.startEdit(0, 0);
                };
                
                var removeEmployee = function () {
                    var grid = #{GridPanel1},
                        sm = grid.getSelectionModel();
    
                    grid.editingPlugin.cancelEdit();
                    grid.store.remove(sm.getSelection());
                    if (grid.store.getCount() > 0) {
                        sm.select(0);
                    }
                };
    
                function Add(item, e) {
     
                    if (!#{GridPanel1}.columns[5].hidden) {
                        #{GridPanel1}.columns[5].hide();
                    }
     
                    var started = #{GridPanel1}.getRowEditor().startEdit();
     
                }
            </script>
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>GridPanel with RowEditor Plugin</h1>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server"
                Width="600"
                Height="400"
                Frame="true"
                Title="Employees">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Sorters>
                            <ext:DataSorter Property="start" Direction="ASC" />
                        </Sorters>
                        <Model>
                            <ext:Model runat="server" Name="Employee">
                                <Fields>
                                    <ext:ModelField Name="name" ServerMapping="Name" Type="String" />
                                    <ext:ModelField Name="email" ServerMapping="Email" Type="String" />
                                    <ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
                                    <ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
                                    <ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Plugins>
                    <ext:RowEditing ID="RowEditing1" runat="server" ClicksToEdit="1" >
                    <Listeners>
                        <BeforeEdit Handler="Add(item, e);"/>
                    </Listeners>                   
                </ext:RowEditing>
                </Plugins>            
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Add Employee" Icon="UserAdd">
                                <Listeners>
                                    <Click Fn="addEmployee" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete" Disabled="true">
                                <Listeners>
                                    <Click Fn="removeEmployee" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>            
                <ColumnModel>
                    <Columns>
                        <ext:RowNumbererColumn runat="server" Width="25" />
                        <ext:Column runat="server"                         
                            Text="Name" 
                            DataIndex="name" 
                            Flex="1">
                            <Editor>
                                <ext:TextField runat="server" AllowBlank="false" />
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" Text="Email" DataIndex="email" Width="160">
                            <Editor>
                                <ext:TextField runat="server" AllowBlank="false" Vtype="email" />
                            </Editor>
                        </ext:Column>
                        <ext:DateColumn runat="server" 
                            Text="Start Date" 
                            DataIndex="start" 
                            Format="MM/dd/yyyy" 
                            Width="100">
                            <Editor>
                                <ext:DateField 
                                    runat="server" 
                                    AllowBlank="false" 
                                    Format="MM/dd/yyyy"
                                    MinDate="01.01.2006" 
                                    MinText="Can not have a start date before the Company existed." 
                                    MaxDate="<%# DateTime.Now %>"
                                    AutoDataBind="true"
                                    />
                            </Editor>
                        </ext:DateColumn>
                        <ext:NumberColumn
                            runat="server"
                            Text="Salary" 
                            DataIndex="salary" 
                            Format="$0,0">
                            <Editor>
                                <ext:NumberField 
                                    runat="server" 
                                    AllowBlank="false" 
                                    MinValue="1" 
                                    MaxValue="150000" 
                                    />
                            </Editor>
                        </ext:NumberColumn>
                        <ext:CheckColumn
                            runat="server"
                            Text="Active?" 
                            DataIndex="active"                         
                            Width="50">
                            <Editor>
                                <ext:Checkbox runat="server" Cls="x-grid-checkheader-editor" />
                            </Editor>
                        </ext:CheckColumn>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length);" />
                </Listeners>
            </ext:GridPanel>
        </form>  
    </body>
    </html>
  4. #4
    Thank you.

    At least, the startEdit method assumes that you pass some parameters.
    http://docs.sencha.com/extjs/4.2.1/#...thod-startEdit

    Though, it is only a part of problem. The BeforeEdit listener is a part of "start editing" process. Then a user clicks a row, the startEdit method is called internally. It all means that you call the startEdit method inside another call of startEdit. It will lead to recursion.

    Also, I don't think that hiding a column within the "start editing" process is going to work smoothly.

    What about just to disable the Checkbox Editor when needed?
  5. #5
    Daniil,

    Thank you for your answer.

    It is a "delete" button in a real project, not a check box.

    I disabled it at first but a customer do not want to see it in the time of editing.

    Are there any other ways to hide it?
  6. #6
    Please provide a test case with that Delete button. I am not sure how it is organized and it might affect on a possible solution.
  7. #7
    Daniil,

    I use a
    ext:CommandColumn
    with
    ext:GridCommand
    now.
    It works fine.

    Thank you.
    The thread can be closed.
  8. #8
    The question is:

    Is it expected behaviour for CheckColumn and ImageCommandColumn?

    They both have the same problem with "hide column".
  9. #9
    Is it expected behaviour for CheckColumn and ImageCommandColumn?

    They both have the same problem with "hide column".
    Well, I am not sure. I would rather not hide a column within a BeforeEdit listener at all. I mean that there is no guarantee that it will work with a CommandColumn forever. Maybe, it stops working at some point.

    By the way, I think an ImageCommandColumn is better than a CommandColumn. It renders faster.
  10. #10
    Daniil,

    Thank you

Similar Threads

  1. Replies: 1
    Last Post: Mar 11, 2014, 6:34 AM
  2. How to hide start button in Ext.Net Desktop?
    By archana in forum 1.x Help
    Replies: 1
    Last Post: Oct 22, 2012, 11:53 AM
  3. Replies: 1
    Last Post: Oct 22, 2012, 11:52 AM
  4. GridPanel ext:RowEditing OnEvent "Edit"
    By xtremexploit in forum 2.x Help
    Replies: 2
    Last Post: Aug 23, 2012, 10:42 PM
  5. Hide RowBody on GP Edit
    By Tbaseflug in forum 1.x Help
    Replies: 5
    Last Post: Dec 30, 2008, 2:12 PM

Tags for this Thread

Posting Permissions