[FIXED] [#672] [3.2.0] Set selection model to multi when there is one record selected

**RCN** · Feb 02, 2015, 5:36 PM

On the following example proceed through the following steps:

Select a record
Click on Set Selection Mode to Multi button
Hold SHIFT key and select another record. Error - It does not select the specified range.

Everything works as expected when selection mode is set to multi prior selecting first record.

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <script type="text/javascript">
        var SetSelectionModeToMulti = function () {
            App._grd.selModel.setSelectionMode("MULTI");
        }
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" ScriptMode="Debug" runat="server" />
    <ext:Button Text="Set Selection Mode to Multi" runat="server">
        <Listeners>
            <Click Handler="SetSelectionModeToMulti();" />
        </Listeners>
    </ext:Button>
    <br />
    <ext:GridPanel ID="_grd" runat="server" Title="Records" Frame="false" Width="500" Height="500">
        <Store>
            <ext:Store AutoLoad="true" ID="_str" runat="server">
                <Proxy>
                    <ext:AjaxProxy Url="~/Example/LoadFakeRecords/">
                        <ActionMethods Read="POST" />
                        <Reader>
                            <ext:JsonReader RootProperty="data" />
                        </Reader>
                    </ext:AjaxProxy>
                </Proxy>
                <Model>
                    <ext:Model IDProperty="ID" runat="server">
                        <Fields>
                            <ext:ModelField Name="ID" Type="String" />
                            <ext:ModelField Name="Name" Type="String" />
                            <ext:ModelField Name="LastName" Type="String" />
                            <ext:ModelField Name="Address" Type="String" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Text="ID" DataIndex="ID" runat="server" />
                <ext:Column Text="Name" Flex="1" DataIndex="Name" runat="server" />
                <ext:Column Text="Last Name" DataIndex="LastName" runat="server" />
                <ext:Column Text="Address" DataIndex="Address" runat="server" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:CheckboxSelectionModel Mode="Single" runat="server" />
        </SelectionModel>
    </ext:GridPanel>
</body>
</html>

namespace SandBox.Controllers
{
    public class ExampleController : System.Web.Mvc.Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public StoreResult LoadFakeRecords()
        {
            List<Entity> lst = new List<Entity>();

            for (int index = 0; index < 15; index++)
            {
                lst.Add(new Entity
                {
                    ID = index,
                    Name = string.Format("Name - {0}", index),
                    LastName = string.Format("Last Name - {0}", index),
                    Address = string.Format("Address - {0}", index)
                });
            }

            return new StoreResult(lst, lst.Count());
        }
    }

    [Serializable]
    public class Entity
    {
        public int ID { get; set; }

        public string Name { get; set; }

        public string LastName { get; set; }

        public string Address { get; set; }
    }
}

**fabricio.murta** · Feb 03, 2015, 4:01 AM

You can also reproduce this by:

1. Clicking the multiMode change button (regardless of selecting an item or not).
part 1: make your selection
2. clicking one item
3. holding shift
4. clicking another item (above or below)
5. releasing shift
part 2: lose focus and try again
6. click anywhere outside the grid frame (lose the focus to the grid)
7. try repeating steps 3-5 to extend/shrink selection

In other words, this another sample suggests the behavior is not a problem due to the button or the method called: it is a problem due to losing focus to the control.

Notice how you can keep up with your selection if you hold CTRL while selecting, and also while you hold CTRL+SHIFT (to select a segment of the last item you selected).
For example:
1. Click item 1.
2. hold shift, and click item 4 (you'll select 1 thru 4)
3. release shift
4. hold ctrl, and click item 7.
5. without releasing ctrl, hold also shift, and click item 12.

Voila, two segments. You may click outside (to lose focus) and then, with ctrl held, click back without losing your selection. And then continue.

So, what do you think, does this make sense?

EDIT:
Reproducible on ExtJS example (grid with multi select): Grid with Buffered Store.
Not reproducible on ExtJS example (multiselect control ditto): MultiSelect & ItemSelector

**RCN** · Feb 03, 2015, 12:17 PM

1. Clicking the multiMode change button (regardless of selecting an item or not).
part 1: make your selection
2. clicking one item
3. holding shift
4. clicking another item (above or below)
5. releasing shift
part 2: lose focus and try again
6. click anywhere outside the grid frame (lose the focus to the grid)
7. try repeating steps 3-5 to extend/shrink selection

It's due NavitationModel's previousRecord

On SelectionModel's onNavigate, SelectionModel's selectionStart receives the instance of NavitationModel's previousRecord, which is null, as shown below:

from = (me.selectionStart && me.isSelected(e.previousRecord)) ? me.selectionStart : (me.selectionStart = e.previousRecord)

So, what do you think, does this make sense?

Yes.

**RCN** · Feb 03, 2015, 12:31 PM

**RCN** · Feb 03, 2015, 12:40 PM

**fabricio.murta** · Feb 03, 2015, 7:20 PM

Hello Raphael.

Wow you really come ahead with a solution for the matter.

But well, I see a couple problems on your implementation. You're -always- basing on the last selected element. And that's breaking sequently made selections.

In the other hand, your solution really hits where it hurts, just a little thinkering more and the issue is sorted out!

See what it happens when you shift select 1-6 then continue expanding the selection to 9, 11 and 13 (always holding shift). It also happens when selecting from above to down. Maybe just a matter of checking whether the lastSelected row is really selected or not.

But I really think the best of the best approaches here would be to build a MultiSelect component side by side with the panel, and see exactly why it works (and selectionModel doesn't) and then apply the same mechanism (reusing already present code) in the grid's selectionModel.

At least to me, the MultiSelect component seemed very stable at what matters to multiple selections and could be used as a base for the fix.

**fabricio.murta** · Feb 03, 2015, 7:33 PM

Just by testing for a previous selection seems to have fixed the issue, totally.

So your override would be changed to:

        Ext.define('Ext.selection.Model', {
		override: 'Ext.selection.Model',
        	onNavigate: function (e) {
        		if (this.selectionMode == "MULTI" && e.previousRecord == null) {
        			var lastSelected = this.selected.last();
        			if (lastSelected != null) {
        				this.setSelectionStart(lastSelected);
        				e.previousRecord = lastSelected;
        			}
        		}
        		this.callParent(arguments);
        	}
        });

Everything now seems to work fine. Notice the only thing I changed was adding the && e.previousRecord == null condition to the test.

As a side note, when writing overrides, for some reason sencha advised (i've seen in some forums and so on) us to use the above Ext.define and override: 'class' approach.

Although your fix really does the job, I think I will still have at least a look on the MultiSelect component before applying anything to the code base.

Again, thank you for the investigation and fix! That's much appreciated.

**RCN** · Feb 03, 2015, 7:57 PM

But I really think the best of the best approaches here would be to build a MultiSelect component side by side with the panel, and see exactly why it works (and selectionModel doesn't) and then apply the same mechanism (reusing already present code) in the grid's selectionModel.

Although your fix really does the job, I think I will still have at least a look on the MultiSelect component before applying anything to the code base.

Checkbox Selection Model is a Multi Select component. There is no need to build a new one. Honestly, i just cant imagine the need for this, at all. If i am not wrong, it should be fixed.

**RCN** · Feb 03, 2015, 7:59 PM

As a side note, when writing overrides, for some reason sencha advised (i've seen in some forums and so on) us to use the above Ext.define and override: 'class' approach.

Can you share the link?

**RCN** · Feb 03, 2015, 8:17 PM

I confirm that && e.previousRecord == null is required.

Again, thank you for the investigation and fix! That's much appreciated.

You're welcome

Thread: [FIXED] [#672] [3.2.0] Set selection model to multi when there is one record selected

Thread Tools

Search Thread

Display

[FIXED] [#672] [3.2.0] Set selection model to multi when there is one record selected

Similar Threads

[FIXED] [#122] Checkbox selection model

[CLOSED] Ext.selection.Model.selectWithEvent is just fired when selection mode is set to Multi

[CLOSED] GridPanel selection model does not update, after adding record

how to get only last selected row from checkbox selection model multi selection

[CLOSED] Model selection problem with lock and selected record after change page

Posting Permissions

Sitemap

Downloads

Resources

Thread: [FIXED] [#672] [3.2.0] Set selection model to multi when there is one record selected

[FIXED] [#672] [3.2.0] Set selection model to multi when there is one record selected

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us