[OPEN] [#649] When Tree selection is not set to TreeSelectionModel, node is selected when it's expanded

  1. #1

    [OPEN] [#649] When Tree selection is not set to TreeSelectionModel, node is selected when it's expanded

    In 12/04/2014 i opened a thread related to node selection after its expansion http://forums.ext.net/showthread.php...-it-s-expanded.

    In 14/01/2015 i confirmed that it has been fixed on version 3.1.

    But at this time i found another issue regarding node expansion.

    When TreePanel's SelecionModel is set to TreeSelectionModel (default), everything works as expected.

    But when TreePanel's SelecionModel is set to CheckboxSelectionModel, RowSelectionModel or CellSelectionModel, the node is selected when it's expanded.

    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" Theme="Gray" ScriptMode="Debug" runat="server" />
        <ext:TreePanel RootVisible="false" Title="Ext.Net" Height="700" Width="500" runat="server">
            <Store>
                <ext:TreeStore runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="~/Example/LoadTreeFakeChildren">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader RootProperty="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="Name" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:TreeStore>
            </Store>
            <Root>
                <ext:Node NodeID="0" Text="Root" />
            </Root>
            <ColumnModel>
                <Columns>
                    <ext:TreeColumn Text="Name" DataIndex="Name" Flex="2" runat="server" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" />
            </SelectionModel>
        </ext:TreePanel>
    </body>
    </html>
    namespace SandBox.Controllers
    {
        public class ExampleController : System.Web.Mvc.Controller
        {
            public ActionResult Index()
            {
                return View();
            }
            public StoreResult LoadTreeFakeChildren()
            {
                NodeCollection nodes = new NodeCollection(false);
    
                for (int index = 1; index < 6; index++)
                {
                    Node node = new Node();
                    node.NodeID = index.ToString() + DateTime.Now.Second;
                    node.CustomAttributes.Add(new ConfigItem { Name = "Name", Value = node.NodeID, Mode = ParameterMode.Value });
                    nodes.Add(node);
                }
    
                return new StoreResult { Data = nodes.ToJson() };
            }
        }
    }


    As mentioned on the related thread, it's possible to overcome this issue by overriding Ext.grid.NavigationModel.onCellClick, as shown below:

    Note: It only fixes CheckboxSelectionModel and RowSelectionModel
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <script type="text/javascript">
            Ext.override(Ext.grid.NavigationModel, {
                onCellClick: function (view, cell, cellIndex, record, row, recordIndex, clickEvent) {
                    if (Ext.isEmpty(clickEvent.target.className) || clickEvent.target.className.indexOf("expander") < 0) {
                        if (this.position.isEqual(clickEvent.position)) {
                            this.fireNavigateEvent(clickEvent);
                        } else {
                            this.setPosition(clickEvent.position, null, clickEvent);
                        }
                    }
                }
            });
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" Theme="Gray" ScriptMode="Debug" runat="server" />
        <ext:TreePanel RootVisible="false" Title="Ext.Net" Height="700" Width="500" runat="server">
            <Store>
                <ext:TreeStore runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="~/Example/LoadTreeFakeChildren">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader RootProperty="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="Name" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:TreeStore>
            </Store>
            <Root>
                <ext:Node NodeID="0" Text="Root" />
            </Root>
            <ColumnModel>
                <Columns>
                    <ext:TreeColumn Text="Name" DataIndex="Name" Flex="2" runat="server" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
        </ext:TreePanel>
    </body>
    </html>
    Last edited by Daniil; Jan 22, 2015 at 5:36 PM. Reason: [OPEN] [#649]
  2. #2
    Hi Raphael,

    I am curious does ExtJS really support for a TreePanel any other selection models except a TreeModel?

    I would except it should, but it is not quite in reality. For example, there is the vetoSelection method in the Ext.selection.TreeModel class.

    There is the logic with the selectOnExpanderClick config option.
    vetoSelection: function(e) {
        var view = this.view,
            select = this.selectOnExpanderClick,
            veto = !select && e.type === 'click' && e.getTarget(view.expanderSelector || (view.lockingPartner && view.lockingPartner.expanderSelector));
    
        return veto || this.callParent([e]);
    }
    The config option is presented in a TreeModel, that makes me feel that we don't rather support any other selection models for a TreePanel. Even if it mostly works.

    As a fix/workaround, I would also suggest you to try injecting a TreeModel's vetoSelection logic into the vetoSelection method of other selection models.

    Hope this helps.
  3. #3
    Thank you Daniil

    I reported to sencha: http://www.sencha.com/forum/showthre...nded&p=1085320

    Let's gonna await their opinion.
  4. #4
    They opened a bug. Thank you for reporting it to them!

    Created an Issue to track it.
    https://github.com/extnet/Ext.NET/issues/649
  5. #5
    Thank you Daniil.

Similar Threads

  1. [CLOSED] [#604] Tree node is selected when it's expanded
    By RCN in forum 3.x Legacy Premium Help
    Replies: 13
    Last Post: Jan 20, 2015, 5:30 PM
  2. Replies: 3
    Last Post: Jan 13, 2014, 2:51 PM
  3. [CLOSED] Save the Tree expanded Node state between sessions
    By Peter.Treier in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 02, 2013, 3:51 PM
  4. [CLOSED] how to add a child node to the selected tree node
    By hdsoso in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 18, 2013, 1:10 AM
  5. Replies: 11
    Last Post: Feb 06, 2013, 5:09 PM

Posting Permissions