[CLOSED] Excel-style editting in GridPanel

  1. #1

    [CLOSED] Excel-style editting in GridPanel

    Hi,

    I've read the following topic:
    http://forums.ext.net/showthread.php...on-by-keyboard
    http://forums.ext.net/showthread.php...en-key-pressed

    But I don't know how to make excel-style editting in gridpanel.
    That means:
    When I press UP/DOWN/LEFT/RIGHT key the cell editing is actived for the corresponding cell.

    If possible, can you give me an example in razor syntax
    Last edited by Daniil; Mar 21, 2013 at 7:07 AM. Reason: [CLOSED]
  2. #2
    Hello!

    You can try to use the following approach. It's in ASPX but it's easy to move it to Razor.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        public class Company
        {
            public int ID { get; set; }
            public string Name { get; set; }
            public double Amount { get; set; }
        }
        
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
      
        private void BindData()
        {
            this.GridPanel1.GetStore().DataSource = this.GetData();
            this.GridPanel1.GetStore().DataBind();
        }
        
        private List<Company> GetData()
        {
            return new List<Company>   
                {  
                    new Company { ID = 1, Name = "3m Co",  Amount = 2 },  
                    new Company { ID = 2, Name = "Alcoa Inc",  Amount = 0 },  
                    new Company { ID = 3, Name = "Altria Group Inc",  Amount = 0},  
                    new Company { ID = 4, Name = "American Express Company",Amount = 0},  
                    new Company { ID = 5, Name = "American International Group, Inc.", Amount = 0},  
                    new Company { ID = 6, Name = "Wal-Mart Stores, Inc.", Amount = 0 } , 
                    new Company { ID = 7, Name = "American  Group2, Inc.", Amount = 0},  
                    new Company { ID = 8, Name = "Wal-Mart Stores2, Inc.", Amount = 0 }  
                };
        } 
    
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <ext:GridPanel 
            runat="server" 
            Width="600" 
            Height="300" 
            ID="GridPanel1"
            Title="Edit Plants?" 
            Frame="true">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server" Name="Plant">
                            <Fields>
                                <ext:ModelField Name="Name" Type="String" />
                                <ext:ModelField Name="Amount" Type="Int" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Sorters>
                        <ext:DataSorter Property="Name" Direction="ASC" />
                    </Sorters>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
    		    <Columns>
                    <ext:Column 
                        runat="server" 
                        Text="Name" 
                        DataIndex="Name" 
                        Flex="1">
                        <Editor>
                            <ext:TextField runat="server" AllowBlank="false">
                                <Listeners>
                                    <SpecialKey Handler="
                                    var grid = this.up('gridpanel');
    
                                    if (e.getKey() === e.UP) {
                                        grid.direction = 'UP';
                                        grid.editingPlugin.completeEdit();
                                    } else {
                                        grid.direction = null;
                                    }" />
                                </Listeners>
                            </ext:TextField>
                        </Editor>
                    </ext:Column>
                    
                    <ext:Column runat="server" Text="Name" DataIndex="Name" />
    		    </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CellSelectionModel runat="server" />
            </SelectionModel>
            <Plugins>
                <ext:CellEditing runat="server" ClicksToEdit="2">
                    <Listeners>
                        <Edit Handler="
                            if (e.grid.direction != null) {
                                switch (e.grid.direction) {
                                    case 'UP':  Ext.Function.defer(function() {
                                        this.startEdit(e.rowIdx - 1, e.column);
                                    }, 50, this);
                                }
                                e.grid.direction = null;
                            }
                        "></Edit>
                    </Listeners>
                </ext:CellEditing>
            </Plugins>
        </ext:GridPanel>
    </body>
    </html>

Similar Threads

  1. How can Export data from GridPanel to Excel
    By delta in forum 2.x Help
    Replies: 2
    Last Post: Nov 14, 2012, 1:07 AM
  2. Exporting gridpanel content to excel
    By sonlas7y20 in forum 1.x Help
    Replies: 2
    Last Post: Dec 13, 2011, 8:01 PM
  3. How to get editting text from grid panel
    By VietView in forum 1.x Help
    Replies: 6
    Last Post: Feb 18, 2009, 12:58 AM
  4. How to export GridPanel to the Excel?
    By jachnicky in forum 1.x Help
    Replies: 3
    Last Post: Dec 01, 2008, 4:57 PM

Posting Permissions