[CLOSED] RowSelection not focussing on selected row

  1. #1

    [CLOSED] RowSelection not focussing on selected row

    Hi,

    I'm upgrading my first website to version 3 and have the following issue:
    The website contains a gridpanel that is based on a store with an ext:JsonPProxy.
    Selections of rows (singel rowselectionmodel) are done from other part of the application, both with the vb code

    Dim sm As RowSelectionModel = Me.gpOwner.GetSelectionModel()
    sm.SelectedRows.Clear()
     sm.SelectedRows.Add(New SelectedRow(cOwnerId))
    sm.UpdateSelection()
    and through javascript

    var record = #{StoreOwner}.getById(cOwnerId);
    #{RowSelectionModelOwner}.select(record,false,false);
    In both cases the row is selected, but the focus is not set to the row. Grid is not scrolling to the selected record. Store contains about 60 records and about 15 rows are visible. (no paging needed).

    Any idea? With Ext.Net 2.5 it worked.

    Hans Wapenaar
    Last edited by Daniil; Feb 09, 2015 at 12:46 PM. Reason: [CLOSED]
  2. #2
    It's possible to overcome the issue presented above by focusing row when selection change, as shown below:

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                List<Entity> lst = new List<Entity>();
    
                for (int index = 0; index < 100; index++)
                {
                    lst.Add(new Entity
                    {
                        ID = index,
                        Name = string.Format("Name - {0}", index)
                    });
                }
    
                this._srt.DataSource = lst;
                this._srt.DataBind();
            }
        }
    
        public class Entity
        {
            public int ID { get; set; }
    
            public string Name { get; set; }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
    
        <script>
            var SelectRecord = function (id) {
                var record = App._grd.getStore().data.map[id];
                if (record != null) {
                    App._grd.selModel.select(record, false, false);
                }
            };
    
            var FocusSelected = function () {
                var firstSelected = App._grd.selModel.selected.first();
                if (firstSelected != null) {
                    App._grd.getView().focusRow(firstSelected)
                }
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager ScriptMode="Debug" runat="server" />
        <ext:GridPanel ID="_grd" Title="Ext.Net" Width="600" Height="350" runat="server">
            <Store>
                <ext:Store ID="_srt" runat="server">
                    <Model>
                        <ext:Model IDProperty="ID" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" />
                                <ext:ModelField Name="Name" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" runat="server" />
                    <ext:Column Text="Name" DataIndex="Name" Flex="1" runat="server" />
                </Columns>
            </ColumnModel>
            <Buttons>
                <ext:Button Text="Reload" runat="server">
                    <Listeners>
                        <Click Handler="SelectRecord(5);" />
                    </Listeners>
                </ext:Button>
            </Buttons>
            <Listeners>
                <SelectionChange Handler="FocusSelected();" />
            </Listeners>
        </ext:GridPanel>
    </body>
    </html>
    Last edited by RCN; Feb 03, 2015 at 10:56 PM.
  3. #3
    It's possible to overcome the issue, globally, by overriding Ext.selection.Model.doSelect, as shown below:

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                List<Entity> lst = new List<Entity>();
    
                for (int index = 0; index < 100; index++)
                {
                    lst.Add(new Entity
                    {
                        ID = index,
                        Name = string.Format("Name - {0}", index)
                    });
                }
    
                this._str.DataSource = lst;
                this._str.DataBind();
            }
        }
    
        public class Entity
        {
            public int ID { get; set; }
    
            public string Name { get; set; }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
    
        <script>
            var SelectRecord = function (id) {
                var record = App._grd.getStore().data.map[id];
                if (record != null) {
                    App._grd.selModel.select(record, false, false);
                }
            };
    
            Ext.override(Ext.selection.Model, {
                doSelect: function (records, keepExisting, suppressEvent) {
                    this.callParent(arguments);
    
                    var firstSelected = this.selected.first();
                    if (firstSelected != null) {
                        App._grd.getView().focusRow(firstSelected)
                    }
                }
            });
        </script>
    </head>
    <body>
        <ext:ResourceManager ScriptMode="Debug" runat="server" />
        <ext:GridPanel ID="_grd" Title="Ext.Net" Width="600" Height="350" runat="server">
            <Store>
                <ext:Store ID="_str" runat="server">
                    <Model>
                        <ext:Model IDProperty="ID" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" />
                                <ext:ModelField Name="Name" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" runat="server" />
                    <ext:Column Text="Name" DataIndex="Name" Flex="1" runat="server" />
                </Columns>
            </ColumnModel>
            <Buttons>
                <ext:Button Text="Reload" runat="server">
                    <Listeners>
                        <Click Handler="SelectRecord(5);" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:GridPanel>
    </body>
    </html>
    Last edited by RCN; Feb 04, 2015 at 12:09 AM.
  4. #4
    Hans, do you use only Single mode? It would help us to find the best approach if you share more details of your scenario.
  5. #5
    Hi Raphael,

    Indeed I use single mode.

    I searched the examples for a JsonPProxy dataset and found one that I adjusted. I added a button to search for a record and it gives the same result as in my gridpanel: no focus on the selected row.

    It is your own table with revisions.
    Ajustments :
    - added c# script
    - IDProperty="revision" to Model
    - named the rowselectionmodel and set mode to single
    - add bottombar with button

    Click on the search button and scroll to see that revision 6106 is selected.


    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void btnSearch_onClick(Object sender, DirectEventArgs e)
        {
            RowSelectionModel sm = this.RowSelectionModelLog as RowSelectionModel;
            sm.SelectedRows.Clear();
            sm.SelectedRows.Add(new SelectedRow("6106"));
            sm.UpdateSelection();
        } 
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>SVN Log - Ext.NET Examples</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:GridPanel ID="GridPanel1"
                    runat="server" 
                    Title="Recent SVN Commits" 
                    TrackMouseOver="true"
                    Flex="2">
                    <Store>
                        <ext:Store runat="server">
                            <Proxy>
                                <ext:JsonPProxy Url="http://api.ext.net/log/get/?version=3.">
                                    <Reader>
                                        <ext:JsonReader RootProperty="data" />
                                    </Reader>
                                </ext:JsonPProxy>
                            </Proxy>
                            <Model>
                                <ext:Model runat="server"  IDProperty="revision">
                                    <Fields>
                                        <ext:ModelField Name="version" />
                                        <ext:ModelField Name="revision" />
                                        <ext:ModelField Name="author" />
                                        <ext:ModelField Name="date" Type="Date" DateFormat="yyyy-MM-ddTHH:mm:ss" />
                                        <ext:ModelField Name="tag" />
                                        <ext:ModelField Name="message" />
                                        <ext:ModelField Name="actionCount" />
                                        <ext:ModelField Name="actions" Type="Object" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column runat="server" ColumnID="id" Header="Revision" DataIndex="revision">
                                <Filter>
                                    <ext:NumberFilter />
                                </Filter>
                            </ext:Column>
                            <ext:Column runat="server" ColumnID="version" Header="Version" DataIndex="version" />
                            <ext:Column runat="server" ColumnID="author" Header="Author" DataIndex="author">
                                <Filter>
                                    <ext:ListFilter Options="vladimir,Daniil.Veriga,geoffrey.mcgill" />
                                </Filter>
                            </ext:Column>
                            <ext:DateColumn runat="server" Header="Date" DataIndex="date" Format="yyyy-MM-dd">
                                <Filter>
                                    <ext:DateFilter />
                                </Filter>
                            </ext:DateColumn>
                            <ext:Column runat="server" Header="Tag" DataIndex="tag">
                                <Filter>
                                    <ext:ListFilter Options="NEW,FIX,UPDATE" />
                                </Filter>
                            </ext:Column>
                            <ext:Column runat="server" Header="Message" DataIndex="message" Flex="1">
                                <Filter>
                                    <ext:StringFilter />
                                </Filter>
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel  ID="RowSelectionModelLog" runat="server" Mode="Single"  />
                    </SelectionModel>
                    <Plugins>
                        <ext:GridFilters runat="server" />
                    </Plugins>
                    <Plugins>
                        <ext:RowExpander runat="server">
                            <Template runat="server">
                                <Html>
                                    <div style="padding:5px;">
    						        <b>Description :</b><br /> 
                                        <div style="margin-left: 25px;">{message}</div>
                                    <br />
    						        <b>Actions :</b> [{actionCount} file<tpl if="actionCount &gt; 1">s</tpl> updated]
                                        <ol style="margin-left:25px !important; list-style-type: decimal !important;">
                                            <tpl for="actions"><li>{description}</li></tpl>
                                        </ol>
                                    </div>
    					        </Html>
                            </Template>
                        </ext:RowExpander>
                    </Plugins>
                    <BottomBar>
                        <ext:Toolbar runat="server" >
                            <Items>
                                <ext:Button ID="btnSearch" Text="Search 6106" runat="server" >
                                    <DirectEvents>
                                        <Click OnEvent="btnSearch_onClick">
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </BottomBar>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
  6. #6
    On post #2: Focus row when GridPanel's SelectionChange is raised.

    On post #3: Override Ext.selection.Model.doSelect.


    On more example, based on https://examples3.ext.net/#/GridPane...ow_Selection/:

    Click on Add 'Boeing Co.' to selection button

    Note: GridPanel's SelectionChange is responsible for focusing the row. Take a look on that.
    <!DOCTYPE html>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new List<Company> 
             { 
                 new Company("3m Co", 71.72, 0.02, 0.03),
                 new Company("Alcoa Inc", 29.01, 0.42, 1.47),
                 new Company("Altria Group Inc", 83.81, 0.28, 0.34),
                 new Company("American Express Company", 52.55, 0.01, 0.02),
                 new Company("American International Group, Inc.", 64.13, 0.31, 0.49),
                 new Company("AT&T Inc.", 31.61, -0.48, -1.54),
                 new Company("Boeing Co.", 75.43, 0.53, 0.71),
                 new Company("Caterpillar Inc.", 67.27, 0.92, 1.39),
                 new Company("Citigroup, Inc.", 49.37, 0.02, 0.04),
                 new Company("E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28),
                 new Company("Exxon Mobil Corp", 68.1, -0.43, -0.64),
                 new Company("General Electric Company", 34.14, -0.08, -0.23),
                 new Company("General Motors Corporation", 30.27, 1.09, 3.74),
                 new Company("Hewlett-Packard Co.", 36.53, -0.03, -0.08),
                 new Company("Honeywell Intl Inc", 38.77, 0.05, 0.13),
                 new Company("Intel Corporation", 19.88, 0.31, 1.58),
                 new Company("International Business Machines", 81.41, 0.44, 0.54),
                 new Company("Johnson & Johnson", 64.72, 0.06, 0.09),
                 new Company("JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
                 new Company("McDonald\"s Corporation", 36.76, 0.86, 2.40),
                 new Company("Merck & Co., Inc.", 40.96, 0.41, 1.01),
                 new Company("Microsoft Corporation", 25.84, 0.14, 0.54),
                 new Company("Pfizer Inc", 27.96, 0.4, 1.45),
                 new Company("The Coca-Cola Company", 45.07, 0.26, 0.58),
                 new Company("The Home Depot, Inc.", 34.64, 0.35, 1.02),
                 new Company("The Procter & Gamble Company", 61.91, 0.01, 0.02),
                 new Company("United Technologies Corporation", 63.26, 0.55, 0.88),
                 new Company("Verizon Communications", 35.57, 0.39, 1.11),
                 new Company("Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63)
             };
        }
    
        protected void Button1_Click(object sender, DirectEventArgs e)
        {
            RowSelectionModel sm = this.GridPanel1.GetSelectionModel() as RowSelectionModel;
    
            StringBuilder sb = new StringBuilder();
    
            foreach (SelectedRow row in sm.SelectedRows)
            {
                sb.AppendFormat("RecordID: {0}&nbsp;&nbsp;&nbsp;&nbsp;Row index: {1}<br/>", row.RecordID, row.RowIndex);
            }
            this.Label1.Html = sb.ToString();
        }
    
        protected void Clear_Click(object sender, DirectEventArgs e)
        {
            RowSelectionModel sm = this.GridPanel1.GetSelectionModel() as RowSelectionModel;
            sm.ClearSelection();
        }
    
        protected void Add_Click(object sender, DirectEventArgs e)
        {
            RowSelectionModel sm = this.GridPanel1.GetSelectionModel() as RowSelectionModel;
            sm.SelectedRows.Add(new SelectedRow("Boeing Co."));
            sm.UpdateSelection();
        }
    
        protected void SubmitSelection(object sender, DirectEventArgs e)
        {
            string json = e.ExtraParams["Values"];
    
            Dictionary<string, string>[] companies = JSON.Deserialize<Dictionary<string, string>[]>(json);
    
            StringBuilder sb = new StringBuilder();
            sb.Append("<table  cellspacing='15'>");
            bool addHeader = true;
    
            foreach (Dictionary<string, string> row in companies)
            {
                if (addHeader)
                {
                    sb.Append("<tr>");
                    foreach (KeyValuePair<string, string> keyValuePair in row)
                    {
                        sb.Append("<td style='white-space:nowrap;font-weight:bold;padding:5px;'>");
    
                        sb.Append(keyValuePair.Key);
    
                        sb.Append("</td>");
                    }
                    sb.Append("</tr>");
    
                    addHeader = false;
                }
    
                sb.Append("<tr>");
                foreach (KeyValuePair<string, string> keyValuePair in row)
                {
                    sb.Append("<td style='white-space:nowrap;padding:5px;'>");
    
                    sb.Append(keyValuePair.Value);
    
                    sb.Append("</td>");
                }
                sb.Append("</tr>");
            }
            sb.Append("</table>");
            this.Label1.Html = sb.ToString();
        }
    
        public class Company
        {
            public Company(string name, double price, double change, double pctChange)
            {
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
            }
    
            public Company()
            {
            }
    
            public string Name { get; set; }
            public double Price { get; set; }
            public double Change { get; set; }
            public double PctChange { get; set; }
        }
    </script>
    
    <html>
    <head runat="server">
        <title>Row Selection Model</title>
    
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <script>
            var FocusSelected = function () {
                var firstSelected = App.GridPanel1.selModel.selected.first();
                if (firstSelected != null) {
                    App.GridPanel1.getView().focusRow(firstSelected)
                }
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model runat="server" IDProperty="Name">
                        <Fields>
                            <ext:ModelField Name="Name" />
                            <ext:ModelField Name="Price" />
                            <ext:ModelField Name="Change" />
                            <ext:ModelField Name="PctChange" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                StoreID="Store1"
                Title="Company List"
                Collapsible="true"
                Width="600"
                Height="350">
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="Name" Flex="1" />
                        <ext:Column runat="server" Text="Price" Width="75" DataIndex="Price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="Change" />
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="PctChange" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Multi" />
                </SelectionModel>
                <Buttons>
                    <ext:Button runat="server" Text="Submit">
                        <DirectEvents>
                            <Click OnEvent="Button1_Click" />
                        </DirectEvents>
                    </ext:Button>
    
                    <ext:Button runat="server" Text="Submit with values">
                        <DirectEvents>
                            <Click OnEvent="SubmitSelection">
                                <ExtraParams>
                                    <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true}))" Mode="Raw" />
                                </ExtraParams>
                            </Click>
                        </DirectEvents>
                    </ext:Button>
    
                    <ext:Button runat="server" Text="Clear">
                        <DirectEvents>
                            <Click OnEvent="Clear_Click" />
                        </DirectEvents>
                    </ext:Button>
    
                    <ext:Button runat="server" Text="Add 'Boeing Co.' to selection ">
                        <DirectEvents>
                            <Click OnEvent="Add_Click" />
                        </DirectEvents>
                    </ext:Button>
                </Buttons>
                <Listeners>
                    <SelectionChange Handler="FocusSelected();" />
                </Listeners>
            </ext:GridPanel>
            <div style="width: 590px; border: 1px solid gray; padding: 5px;">
                <ext:Label ID="Label1" runat="server" />
            </div>
        </form>
    </body>
    </html>
    Last edited by RCN; Feb 04, 2015 at 11:08 AM.
  7. #7
    Hi Raphael,

    I tested your work-around with the selectionchange listener and the 'focusView'.
    That makes it work correctly.
    The selected row is shown now.


    Thanks for the suggestion.

    Hans Wapenaar
  8. #8
    I see that you added the SelectionChange listener to the rowselection example.
    https://examples3.ext.net/#/GridPane...Row_Selection/

    But focussing to the selected record works fine in this example also without the SelectionChange listener.

    Anyway: I can move on with the solution with a SelectionChange listener. But its is strange that focussing after a selection does not work with JsonPProxy data in version 3 while it worked in version 2.5 and that it also works when using another type of data store.

    Thanks,

    Hans
  9. #9
    Anyway: I can move on with the solution with a SelectionChange listener. But its is strange that focussing after a selection does not work with JsonPProxy data in version 3 while it worked in version 2.5 and that it also works when using another type of data store.
    I noticed several changes on selection mode. Some of them were resolved, some are pending and some are considered "new behaviour".

    Let's gonna wait a Ext.Net team position regarding this issue.

    Let's us know in case you need further assistance.
  10. #10
    Hello everybody,

    Confirm, the behavior has been changed from ExtJS 5.0 to 5.1.

    Previously in ExtJS 5.0 and Ext.NET 3.0, selecting a row automatically focuses a row. I should say that it might be sort of difficult to avoid auto-focus and scroll.

    Now in ExtJS 5.1 and Ext.NET 3.1 (should be released on February 17 or so) it doesn't focus a row automatically. A developer is supposed to focus a row manually if needed.

    I guess/assume it has been done to improve flexibility. Previously, it was difficult to avoid auto focus on select, but now no auto focus and it is easy to focus if needed (as Raphael demonstrated).

    Decided to add this breaking change item:
    9. [EXTJS] Selecting a GridPanel's row programmatically doesn't focus that
    row and doesn't scroll to that row automatically. Previously, it did.
    Here is a related discussion in the Ext.NET Community forums.
    http://forums.ext.net/showthread.php?53111
    Hans, thank you for pointing out the problem!

Similar Threads

  1. [CLOSED] RowSelection not working with component columns
    By blueworld in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 09, 2013, 12:29 PM
  2. set rowselection in gridpanel
    By HansWapenaar in forum 2.x Help
    Replies: 0
    Last Post: Jul 24, 2012, 2:24 PM
  3. [CLOSED] Label inside FieldSet focussing incorrect input
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 22, 2011, 3:00 PM
  4. Cancel RowSelection
    By rthiney in forum 1.x Help
    Replies: 0
    Last Post: Oct 12, 2009, 4:28 PM
  5. GridPanel getting Cell Values in RowSelection
    By EzaBlade in forum 1.x Help
    Replies: 5
    Last Post: Feb 03, 2009, 7:28 AM

Posting Permissions