[CLOSED] GridPanel, Focus whole row (not single cell)

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] GridPanel, Focus whole row (not single cell)

    Hi,

    Can we get full row focused ? Not only single cell.

    In previous version there was .x-grid-row-focused CSS class. Now I can see only .x-grid-item-focused which focus single cell.

    Thank you.
    Last edited by Daniil; Jan 30, 2015 at 7:37 PM. Reason: [CLOSED]
  2. #2
    Hi!

    In this example https://examples3.ext.net/#/GridPanel/ArrayGrid/Simple/ you can see .x-grid-item-selected css class on the <table> tag.
    Maybe you can use this class.
    Last edited by Sergei; Jan 10, 2015 at 8:26 PM.
  3. #3
    Thank you,

    Yes, I could use that class... the problem is we have the same class for selected items too.

    My idea was about whole row classes:

    - different css class for current item (when keyboard navigation is on)
    - different css class for selected (checked) rows
    - I have got my custom color striping already implemented

    This is how it looked like in ExtJS4 (Ext.Net 2.5.3)

    Click image for larger version. 

Name:	focus and selction.png 
Views:	14 
Size:	77.3 KB 
ID:	18631

    So in my case "sharing" .x-grid-selected-item is not an option. I am sure that that change in ExtJS5 is related to different focus approach (tab key etc) and getting previous behaviour might not be as simple as it sounds.

    This is what I have managed to get in new version:

    Click image for larger version. 

Name:	focus and selection extjs501.png 
Views:	13 
Size:	38.6 KB 
ID:	18641

    I was trying to dig into ExtJS5 code but don't have time to do it now (still on tight schedule).

    If anyone can point me how to get (or extend/override) selection model or GridView to get the extra "row-focused" class I would be grateful !

    Thank you,
    Last edited by matt; Jan 11, 2015 at 3:05 PM.
  4. #4
    Hi everybody,

    Oh, that is very unfortunate that Sencha didn't implement an API option to get the old behavior back with ease.

    I've played a bit with that. Hope this example helps.

    Example
    <%@ Page Language="C#" %>
    
    <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[] { "test", "test" },
                    new object[] { "test", "test" },
                    new object[] { "test", "test" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
    
        <script>
            // Regards to @matt for this override to prevent cell navigation on left and right arrow keys
            // http://forums.ext.net/showthread.php?50321&p=231051&viewfull=1#post231051
            Ext.override(Ext.view.Table, {
                walkCells: function (pos, direction, e, preventWrap, verifierFn, scope) {
                    if (direction == 'up' || direction == 'down') {
                        return this.callParent(arguments);
                    } else {
                        return false;
                    }
                }
            });
    
            // Emulation of row focus
            Ext.grid.NavigationModel.override({
                focusRowCls: "row-focused",
    
                focusItem: function(item) {
                    // var row = item.up("table");
    
                    // Add the class with a delay if you don't want to see a focus color before a selection color
                    // Ext.Function.defer(row.addCls, 75, row, [this.focusRowCls]); 
    
                    item.up("table").addCls(this.focusRowCls);
                    item.addCls(this.focusCls);
                    item.focus();
                },
    
                setPosition: function() {
                    this.callParent(arguments);
                    
                    if (this.previousCell) {
                        this.previousCell.up("table").removeCls(this.focusRowCls);
                    }
                }
            });
        </script>
    
        <style>
            /* This is to remove a border of focused cell */
            .x-grid-item-focused .x-grid-cell-inner:before {
                border: none;
            }
    
            table.row-focused:not(.x-grid-item-selected) {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Matt, it might be interesting you take a look on the following threads:

    http://forums.ext.net/showthread.php?52111
    http://forums.ext.net/showthread.php?51911
  6. #6
    To remove a border of focused header:
    Click image for larger version. 

Name:	ho001.png 
Views:	5 
Size:	3.6 KB 
ID:	19611
    <style type="text/css">
        .x-column-header-focus .x-column-header-inner:before {
            border: none !important;
        }
    </style>
    Last edited by RCN; Jan 28, 2015 at 11:44 AM.
  7. #7
    Thank you Daniil for providing the following css override, it works like a charm
    <style type="text/css">
        .x-grid-item-focused .x-grid-cell-inner:before {
            border: none;
        }
    </style>
    But after some investigation i found that the border appears due .x-grid-item-focused .x-grid-cell-inner, as shown below:
    Click image for larger version. 

Name:	fr001.png 
Views:	11 
Size:	20.5 KB 
ID:	19621

    Daniil, is there any reason to set the z-index?
    Last edited by RCN; Jan 28, 2015 at 12:45 PM.
  8. #8
    There are two z-indexes:
    .x-grid-item-focused .x-grid-cell-inner:before {
        border: 1px solid #3d91cf;
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
    
    .x-grid-item-focused .x-grid-cell-inner {
        z-index: 1;
    }
    We made some investigation and tend to think that those z-indexes are redundant. We assume that the cell focus styles were a bit different initially where z-index were required, but then the styles were reworked and z-indexes have been left by mistake. It is our assumption. Maybe, there is some reason, but we could not determine it. At least, if remove those z-index, we cannot notice any change in behavior.
  9. #9
    Ozgur determined the reason. Thanks to him.

    A before pseudo-element (an element with a border) has to be behind its parent element (an actual cell). Otherwise, then you click on cell, you click on a pseudo-element and it breaks a GridPanel's event model.
  10. #10
    Ozgur determined the reason. Thanks to him.

    A before pseudo-element (an element with a border) has to be behind its parent element (an actual cell). Otherwise, then you click on cell, you click on a pseudo-element and it breaks a GridPanel's event model.
    +100 to Ozgur.

    Based on that, should we consider it a bug?
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. Multiple information in single cell in GridPanel
    By jamalmellal in forum 2.x Help
    Replies: 1
    Last Post: Oct 29, 2013, 5:46 PM
  3. [CLOSED] Help in gridpanel's cell focus
    By canusr1 in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Jul 17, 2013, 3:13 PM
  4. GridPanel Cell Focus
    By shaileshsakaria in forum 2.x Help
    Replies: 4
    Last Post: Jan 12, 2013, 6:36 AM
  5. GridPanel cell focus
    By Dominik in forum 1.x Help
    Replies: 12
    Last Post: Mar 02, 2012, 11:21 AM

Tags for this Thread

Posting Permissions