[CLOSED] Multi Selector, Multiple Fields, missing "Remove this item" functionality

[rcombis]

Hello-

I love the new MultiSelector. Very nice functionality.

In the selector and the search I am displaying multiple fields.

When I display multiple fields I lose the built in functionality of the Multi Selector to remove an item from the Multi Selector by clicking the "X"

How do I use this functionality with multiple fields in the selector.

Sample Code:

<ext:MultiSelector runat="server" ID="sl_Codes" Width="400" Height="450" Title="Set Title" UI="Primary" AllowDeselect="true" >
    <Store>
        <ext:Store ID="str_codes_list" runat="server" ModelName="test_model" />
    </Store>

    <ColumnModel>
    <Columns>
        <ext:Column runat="server" DataIndex="code" Text="Code"   />
        <ext:Column runat="server" DataIndex="description" Text="Description"  /> 

    </Columns>
    </ColumnModel>
    <ViewConfig DeferEmptyText="false" EmptyText="No Codes selected" />
    <Search>
        <ext:MultiSelectorSearch runat="server" Width="400" Height="400" Field="code" Closable="true" CloseAction="Hide" UI="Primary" MarginSpec="1 1 1 1" Title="Set Title" ID="mss_1" >
            <SearchGridConfig runat="server" BufferedRenderer="false">
                <ColumnModel>
                <Columns>
                    <ext:Column runat="server" DataIndex="code" Text="Code"   />
                    <ext:Column runat="server" DataIndex="description" Text="Description" Flex="1" /> 
                </Columns>
                </ColumnModel>
            </SearchGridConfig>
            <Store>
                <ext:Store ID="str_codes_search" runat="server" ModelName="test_model">
                    <Sorters>
                        <ext:DataSorter Property="code" />
                    </Sorters>
                </ext:Store>
            </Store>
                    
        </ext:MultiSelectorSearch>
    </Search>         
</ext:MultiSelector>

Thanks and Happy New Year!

-Rob

[rcombis]

First:
On the 3.0 Multi Selector Example, if you filter in the search it also filters your actual selections.

So if you selected Lance Wood and you Search on "C", it will hide "Lance Wood" from your actual selection list even though you already selected it.

Is there a way to disable this?

Noticed this in my development environment as well.

Second:
If you show multiple columns, like my code above, in the Selector it gives you the ability to select all.

This is problematic as it doesn't remove the selections properly from the selected Grid.

Let me know if any questions.

Thanks,
Rob

[Daniil]

Hi @rcombis,

In the selector and the search I am displaying multiple fields.

Please clarify how have you achieved that?

When I display multiple fields I lose the built in functionality of the Multi Selector to remove an item from the Multi Selector by clicking the "X". How do I use this functionality with multiple fields in the selector.

I would recommend you to investigate the MultiSelector's and MultiSelectorSearch's JavaScript sources. There should be an answer.
http://docs.sencha.com/extjs/5.0/5.0...-MultiSelector
http://docs.sencha.com/extjs/5.0/5.0...SelectorSearch

Happy New Year!

Happy New Year!

[rcombis]

Danill-
I had noticed in the documentation that it states that:

* While this component is a grid and so you can configure `columns`, it is best to leave
* that to this class in its `initComponent` method. That allows this class to create the
* extra column that allows the user to remove rows. Instead use `{@link #fieldName}` and
* `{@link #fieldTitle}` to configure the primary column's `dataIndex` and column `text`,
* respectively.

So basically what I am trying to accomplish is not possible.

However there are some bugs with the Multi Selector.

You can view these on the 3.0 example. (copied from my second post above)

First:
On the 3.0 Multi Selector Example, if you filter in the search it also filters your actual selections.

So if you selected Lance Wood and you Search on "C", it will hide "Lance Wood" from your actual selection list even though you already selected it.

Is there a way to disable this?

Noticed this in my development environment as well.

Second:
If you show multiple columns, like my code above, in the Selector it gives you the ability to select all.

This is problematic as it doesn't remove the selections properly from the selected Grid.

In the selector and the search I am displaying multiple fields.
Please clarify how have you achieved that?

Using this code:

<ext:MultiSelectorSearch runat="server" Width="400" Height="400" Field="code" Closable="true" CloseAction="Hide" UI="Primary" MarginSpec="1 1 1 1" Title="Set Title" ID="mss_1" >
            <SearchGridConfig runat="server" BufferedRenderer="false">
                <ColumnModel>
                <Columns>
                    <ext:Column runat="server" DataIndex="code" Text="Code"   />
                    <ext:Column runat="server" DataIndex="description" Text="Description" Flex="1" />
                </Columns>
                </ColumnModel>
            </SearchGridConfig>
            <Store>
                <ext:Store ID="str_codes_search" runat="server" ModelName="test_model">
                    <Sorters>
                        <ext:DataSorter Property="code" />
                    </Sorters>
                </ext:Store>
            </Store>
                     
        </ext:MultiSelectorSearch>

[Daniil]

Apologize for the delay in answering. We are now very busy with incorporating ExtJS 5.1.0 to Ext.NET. Once we finished we will be able to investigate your questions in greater details and answer.

[Daniil]

It looks like ExtJS 5.1.0 doesn't help much with a MultiSelector. I found a bunch of still opened bugs on the Sencha forums.

Please clarify were you able to work around the problems so far?

[rcombis]

Daniil-

I ended up using a grid panel with a check column.

The grid panel using a checkbox selection model seems to have the same problems.

The only issue I have remaining is that when I sync the store, the grid scrolls to the top.

The grid has a few hundred rows, so it is a bit cumbersome.

So I disabled auto sync and have a button for the user to save the changes. So the gird doesn't scroll on every sync.

But it does still scroll when users hit "save" button which syncs the store.

Any suggestions?

Thanks,
Rob

[Daniil]

Rob, please start a new forum thread with the issue with a GridPanel. We would also appreciate if you provide a test case to reproduce the problem.