[CLOSED] Set grid editable cell

  1. #1

    [CLOSED] Set grid editable cell

    Hi,

    I have a grid with a cell Edit Plugin. A new row is inserted after button click. And now I want get the first cell of the row the focus and make it editable.

    My java script looks like this.

          function handleAddGridRow(grid, cellEditing) {
    
            grid.store.insert(0, {
              company: "",
              price: "true",
              change: "",
              pctChang: "",
              lastChan: "",
              industry: ""
            
            });
            grid.getView().focusRow(0);
            cellEditing.startEditByPosition(1, 2);
          };

    Thanks for help.
    Last edited by Daniil; Dec 18, 2013 at 1:31 PM. Reason: [CLOSED]
  2. #2
    Hi @elke.schreiber,

    Example
    cellEditing.startEditByPosition({
        row: 0,
        column: 0
    });
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @elke.schreiber,

    Example
    cellEditing.startEditByPosition({
        row: 0,
        column: 0
    });

    Hi Daniil,

    Yes, when I only have a cellEditing plugin it works.
    But unfortunately I have a cellEditing and a rowExpander in my plugin and in this combination it doesn't works.

    I have an example which demonstrate it.

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
    
      private object TestData
      {
        get
        {
          return new object[]
                {
                    new object[] { "AL", "Alabama", "The Heart of Dixie" },
                    new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
                    new object[] { "WY", "Wyoming", "Like No Place on Earth" } 
                };
        }
      }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (X.IsAjaxRequest)
            {
                //We do not need to DataBind on an DirectEvent
                return;
            }
            
            this.Store1.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am", "Manufacturing"},
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am", "Manufacturing"},
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am", "Computer"},
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am", "Services"},
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am", "Retail"}
                };
    
            this.Store1.DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>RowExpander with FormPanel Detail - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
    
        <style>
            .white-footer .x-toolbar-footer{
              background-color: white !important;
           }
        </style>
    
        <script>
    
          function handleAddGridRow(grid, cellEditing) {
    
            grid.store.insert(0, {
              company: "",
              price: "true",
              change: "",
              pctChang: "",
              lastChan: "",
              industry: ""
            
            });
    
           // grid.getView().focusRow(0);
            cellEditing.startEditByPosition({
              row: 0,
              column: 0
            });
          };
        </script>
    
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
              <ext:Panel ID="pnlPackaging" runat="server" Header="false" Layout="FitLayout"
                ButtonAlign="Left">
                <TopBar>
                  <ext:Toolbar ID="Toolbar2" runat="server" Flat="false">
                    <Items>
                      <ext:ToolbarFill />
                      <ext:Button ID="buttonAdd" runat="server" Text="uuuuuu" Icon="Add">
                        <Listeners>
                          <Click Handler="handleAddGridRow(#{GridPanel1},#{CellEditing2});" />
                        </Listeners>
                      </ext:Button>
                      <ext:ToolbarSpacer ID="ToolbarSpacer2" runat="server" Width="30" />
                    </Items>
                  </ext:Toolbar>
                </TopBar>
                <Items>
                  <ext:GridPanel ID="GridPanel1"
                    runat="server"
                    Title="Expander Rows with control"
                    Collapsible="true"
                    AnimCollapse="true"
                    Icon="Table"
                    Width="600"
                    Height="350" AutoScroll="true">
                    <Bin>
                      <ext:Store ID="Store2" runat="server" Data="<%# TestData %>">
                        <Model>
                          <ext:Model ID="Model2" runat="server">
                            <Fields>
                              <ext:ModelField Name="abbr" />
                              <ext:ModelField Name="name" />
                              <ext:ModelField Name="slogan" />
                            </Fields>
                          </ext:Model>
                        </Model>
    
                        <Reader>
                          <ext:ArrayReader />
                        </Reader>
                      </ext:Store>
                    </Bin>
                    <Store>
                      <ext:Store
                        ID="Store1"
                        runat="server"
                        IgnoreExtraFields="false"
                        PageSize="10">
                        <Model>
                          <ext:Model ID="Model1" 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" />
                              <ext:ModelField Name="industry" />
                            </Fields>
                          </ext:Model>
                        </Model>
                      </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel1" runat="server">
                      <Columns>
    
                        <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
                          <Editor>
                            <ext:TextField ID="ttt" runat="server"></ext:TextField>
                          </Editor>
                        </ext:Column>
                        <ext:Column ID="Column1"
                          runat="server"
                          Text="Company"
                          Flex="1">
                          <Editor>
                            <ext:ComboBox ID="ComboBox1"
                              runat="server"
                              DisplayField="name"
                              Width="320"
                              LabelWidth="130"
                              QueryMode="Local"
                              TypeAhead="true"
                              StoreID="Store2">
                            </ext:ComboBox>
                          </Editor>
                        </ext:Column>
    
                        <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
                        </ext:Column>
                        <ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
                        </ext:Column>
                        <ext:DateColumn ID="DateColumn1"
                          runat="server"
                          Text="Last Updated"
                          DataIndex="lastChange"
                          Format="yyyy/MM/dd" />
                      </Columns>
                    </ColumnModel>
                    <Plugins>
                      <ext:RowExpander ID="RowExpander1" runat="server" SingleExpand="false" ExpandOnDblClick="false">
                        <Component>
                          <ext:FormPanel ID="FormPanel1"
                            runat="server"
                            BodyPadding="6"
                            Height="180"
                            Border="false"
                            DefaultAnchor="-5"
                            Cls="white-footer">
                            <Items>
                              <ext:NumberField ID="NumberField1"
                                runat="server"
                                Name="price"
                                FieldLabel="Price">
                                <Listeners>
                                  <Blur Handler="var grid = this.up('grid'), form = this.up('form');
                                                            form.getForm().updateRecord(form.record);">
                                  </Blur>
                                </Listeners>
                              </ext:NumberField>
                              <ext:NumberField ID="NumberField2"
                                runat="server"
                                Name="change"
                                FieldLabel="Change" />
                              <ext:NumberField ID="NumberField3"
                                runat="server"
                                Name="pctChange"
                                FieldLabel="% Change" />
                              <ext:DateField ID="DateField1"
                                runat="server"
                                Name="lastChange"
                                FieldLabel="Last Updated"
                                Format="yyyy/MM/dd" />
                            </Items>
    
                            <Buttons>
                              <ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk">
                                <Listeners>
                                  <Click Handler="var grid = this.up('grid'), form = this.up('form');
                                                            grid.getRowExpander().collapseRow(grid.store.indexOf(form.record));
                                                            form.getForm().updateRecord(form.record);" />
                                </Listeners>
                              </ext:Button>
                              <ext:Button ID="Button2" runat="server" Text="Cancel" Icon="Decline">
                                <Listeners>
                                  <Click Handler="var grid = this.up('grid'), form = this.up('form');
                                                            grid.getRowExpander().collapseRow(grid.store.indexOf(form.record));" />
                                </Listeners>
                              </ext:Button>
                            </Buttons>
    
                            <Listeners>
                              <AfterRender Handler="this.getForm().loadRecord(this.record);" />
                            </Listeners>
                          </ext:FormPanel>
                        </Component>
                      </ext:RowExpander>
                      <ext:CellEditing ID="CellEditing2" runat="server" CliksToEdit="1">
                      </ext:CellEditing>
                    </Plugins>
                    <BottomBar>
                      <ext:PagingToolbar ID="PagingToolbar1" runat="server" />
                    </BottomBar>
                  </ext:GridPanel>
                </Items>
              </ext:Panel>
        </form>
    </body>
    </html>

    mfg
    Elke
  4. #4
    In this case you should do:
    column: 1
  5. #5
    Quote Originally Posted by Daniil View Post
    In this case you should do:
    column: 1

    Sooooooooooooo easy.
    Mercy
    Elke

Similar Threads

  1. Drag Cell from Grid 1 and Drop to Grid 2 Cell
    By darkwalker in forum 2.x Help
    Replies: 0
    Last Post: Sep 24, 2013, 4:53 AM
  2. [CLOSED] how to set the ColumnGroup cell to be editable?
    By tobros in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 05, 2013, 5:01 AM
  3. Replies: 1
    Last Post: Mar 15, 2013, 12:33 AM
  4. Replies: 12
    Last Post: Sep 07, 2012, 2:42 PM
  5. Replies: 4
    Last Post: Jul 10, 2012, 5:35 PM

Posting Permissions