[CLOSED] How to highlight the value of spinner filed when you use tab button navigation in grid panel

[leon_tang]

Hi:

Could I highlight the content in the spinner filed when I use tab button navigation in grid panel?

The scenario is when you press tab button, the spinner field will navigate to next cell but the content in the spinner field is not highlight.

The question is how could I highlight the content in the spinner field when I use tab navigate to next cell?
The demo code is below:

<%@ Page Language="C#" %>
 
<%@ Import Namespace="System.Collections.Generic" %>
 
<%@ 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 Price { get; set; }
        public double Change { get; set; }
        public double PctChange { get; set; }
        public DateTime LastChange { get; set; }
    }
     
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.BindData();
        }
    }
 
    private void BindData()
    {
        this.GridPanel1.Store.Primary.DataSource = this.GetData();
        this.GridPanel1.Store.Primary.DataBind();
    }
 
    private List<Company> GetData()
    {
        return new List<Company> 
        {
            new Company { ID = 1, Name = "3m Co", Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = DateTime.Now },
            new Company { ID = 2, Name = "Alcoa Inc", Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = DateTime.Now },
            new Company { ID = 3, Name = "Altria Group Inc", Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = DateTime.Now },
            new Company { ID = 4, Name = "American Express Company", Price = 52.55, Change = 0.01, PctChange = 0.02, LastChange = DateTime.Now },
            new Company { ID = 5, Name = "American International Group, Inc.", Price = 64.13, Change = 0.31, PctChange = 0.49, LastChange = DateTime.Now },
            new Company { ID = 6, Name = "AT&T Inc.", Price = 31.61, Change = -0.48, PctChange = -1.54, LastChange = DateTime.Now },
            new Company { ID = 7, Name = "Boeing Co.", Price = 75.43, Change = 0.53, PctChange = 0.71, LastChange = DateTime.Now },
            new Company { ID = 8, Name = "Caterpillar Inc.", Price = 67.27, Change = 0.92, PctChange = 1.39, LastChange = DateTime.Now },
            new Company { ID = 9, Name = "Citigroup, Inc.", Price = 49.37, Change = 0.02, PctChange = 0.04, LastChange = DateTime.Now },
            new Company { ID = 10, Name = "E.I. du Pont de Nemours and Company", Price = 40.48, Change = 0.51, PctChange = 1.28, LastChange = DateTime.Now },
            new Company { ID = 11, Name = "Exxon Mobil Corp", Price = 68.1, Change = -0.43, PctChange = -0.64, LastChange = DateTime.Now },
            new Company { ID = 12, Name = "General Electric Company", Price = 34.14, Change = -0.08, PctChange = -0.23, LastChange = DateTime.Now },
            new Company { ID = 13, Name = "General Motors Corporation", Price = 30.27, Change = 1.09, PctChange = 3.74, LastChange = DateTime.Now },
            new Company { ID = 14, Name = "Hewlett-Packard Co.", Price = 36.53, Change = -0.03, PctChange = -0.08, LastChange = DateTime.Now },
            new Company { ID = 15, Name = "Honeywell Intl Inc", Price = 38.77, Change = 0.05, PctChange = 0.13, LastChange = DateTime.Now },
            new Company { ID = 16, Name = "Intel Corporation", Price = 19.88, Change = 0.31, PctChange = 1.58, LastChange = DateTime.Now },
            new Company { ID = 17, Name = "International Business Machines", Price = 81.41, Change = 0.44, PctChange = 0.54, LastChange = DateTime.Now },
            new Company { ID = 18, Name = "Johnson & Johnson", Price = 64.72, Change = 0.06, PctChange = 0.09, LastChange = DateTime.Now },
            new Company { ID = 19, Name = "JP Morgan & Chase & Co", Price = 45.73, Change = 0.07, PctChange = 0.15, LastChange = DateTime.Now },
            new Company { ID = 20, Name = "McDonald\"s Corporation", Price = 36.76, Change = 0.86, PctChange = 2.40, LastChange = DateTime.Now },
            new Company { ID = 21, Name = "Merck & Co., Inc.", Price = 40.96, Change = 0.41, PctChange = 1.01, LastChange = DateTime.Now },
            new Company { ID = 22, Name = "Microsoft Corporation", Price = 25.84, Change = 0.14, PctChange = 0.54, LastChange = DateTime.Now },
            new Company { ID = 23, Name = "Pfizer Inc", Price = 27.96, Change = 0.4, PctChange = 1.45, LastChange = DateTime.Now },
            new Company { ID = 24, Name = "The Coca-Cola Company", Price = 45.07, Change = 0.26, PctChange = 0.58, LastChange = DateTime.Now },
            new Company { ID = 25, Name = "The Home Depot, Inc.", Price = 34.64, Change = 0.35, PctChange = 1.02, LastChange = DateTime.Now },
            new Company { ID = 26, Name = "The Procter & Gamble Company", Price = 61.91, Change = 0.01, PctChange = 0.02, LastChange = DateTime.Now },
            new Company { ID = 27, Name = "United Technologies Corporation", Price = 63.26, Change = 0.55, PctChange = 0.88, LastChange = DateTime.Now },
            new Company { ID = 28, Name = "Verizon Communications", Price = 35.57, Change = 0.39, PctChange = 1.11, LastChange = DateTime.Now },
            new Company { ID = 29, Name = "Wal-Mart Stores, Inc.", Price = 45.45, Change = 0.73, PctChange = 1.63, LastChange = DateTime.Now }
        };
    }
 
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Simple Array Grid - Ext.NET Examples</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" RemoveViewState="true" IDMode="Explicit" />
     
    <ext:GridPanel
        ID="GridPanel1"
        runat="server"
        Title="Editable GridPanel"
        StripeRows="true"
        TrackMouseOver="true"
        Width="600"
        Height="350"
        AutoExpandColumn="Name"
        ClicksToEdit="1">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="ID">
                        <Fields>
                            <ext:RecordField Name="ID" Type="Int" />
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="Price" />
                            <ext:RecordField Name="Change" />
                            <ext:RecordField Name="PctChange"/>
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column Header="ID" DataIndex="ID" Width="35" />
                <ext:Column ColumnID="Name" Header="Name" DataIndex="Name">
                    <Editor>
                        <ext:TextField ID="SpinnerField1" runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Price" DataIndex="Price">
                    <Editor>
                        <ext:SpinnerField ID="SpinnerField2" runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Change" DataIndex="Change">
                    <Editor>
                        <ext:SpinnerField ID="SpinnerField3" runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Change" DataIndex="PctChange">
                    <Editor>
                        <ext:SpinnerField ID="SpinnerField4" runat="server" />
                    </Editor>
                </ext:Column>
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
        </SelectionModel>
    </ext:GridPanel>          
</body>
</html>

Thank you

[leon_tang]

found the answer by self.

In "BeforeEdit" even handler, use javascript

spinnerfield.selectOnFocus=true;

this will automatically highlight the value in the spinnerfield when you select or navigate it