GridPanel cell focus

Page 1 of 2 12 LastLast
  1. #1

    GridPanel cell focus

    Hi,

    I would like to change border or background color when a cell has focus. Is this possible?

    I'm trying it in this way, but it doesn't seem to work:

    .x-grid3-focus
    {
             background-color: Red;
             border: dotted 1px #fff8da;       
    }
    Thanks in advance,

    Dominik.
  2. #2
    Hi,

    I guess you mean selected cells.

    Example
    <%@ 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)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                store.DataBind();
            }
        }
    </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 runat="server">
        <title>Ext.NET Example</title>
    
        <style type="text/css">
            .my-grid .x-grid3-cell-selected {
                background-color: red !important;
                border: dotted 1px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                AutoHeight="true" 
                Cls="my-grid">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" />
                        <ext:Column Header="Test2" DataIndex="test2" />
                        <ext:Column Header="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #3
    Hi Daniil,

    Thanks for your sample code, but it is not working when I add a RowSelectionModel:

    <SelectionModel>
        <ext:RowSelectionModel runat="server" SingleSelect="true" />
    </SelectionModel>
    How can I deal with this issue?

    Thanks again,

    Dominik.
  4. #4
    Then please clarify what do you mean under "cell focus"?
  5. #5
    Hi again,

    I want to notice users which cell has focus when they use tab key.
  6. #6
    In addition,

    I have these properties in my grids:
    TrackMouseOver="true"
    StripeRows="true"
  7. #7
    Do you go through Columns Editors using tab key, right?
  8. #8
    Not just editing data, also when user is pressing tab keys in my forms...
  9. #9
    Basically, the idea is to get this sample code working when tabs keys are pressed:

    <%@ 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)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                store.DataBind();
            }
        }
    </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 runat="server">
        <title>Ext.NET Example</title>
     
        <style type="text/css">
            .my-grid .x-grid3-cell-selected {
                background-color: red !important;
                border: dotted 1px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                AutoHeight="true"
                TrackMouseOver="true"
                StripeRows="true"
                Cls="my-grid">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" />
                        <ext:Column Header="Test2" DataIndex="test2" />
                        <ext:Column Header="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                        <ext:RowSelectionModel runat="server" SingleSelect="true" />
                </SelectionModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Regards,

    Dominik.
    Last edited by Dominik; Feb 23, 2012 at 3:02 PM.
  10. #10
    Well, there is no a real focus in cells.

    CellSelectionModel just has the functionality to move selection on keys - it catches the keyDown event of a grid's body and handle by the respective way.

    RowSelectionModel has no such functionality since it doesn't select cells. It doesn't deal with the keyDown event at all.

    Generally, you could try to catch Tab key yourself to provide some custom functionality.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] focus on first cell in new record gridpanel
    By albayrak in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 09, 2014, 4:40 AM
  2. Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  3. [CLOSED] Have cell, want to trigger editor and give focus...
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 21, 2011, 6:01 PM
  4. Replies: 5
    Last Post: Aug 27, 2009, 7:01 AM
  5. GP - Validate Edit Keep Cell Focus
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Jun 05, 2009, 8:14 AM

Tags for this Thread

Posting Permissions