[CLOSED] set custom display text on MultiCombo Change event

**SoftwareMHC** · Aug 03, 2016, 8:55 PM

According to examples, all items selected on a MultiCombo control are displayed comma-separated:
https://examples1.ext.net/Examples/F...ox/MultiCombo/

I want to display the text: "Any" or "All" when selection changes. I have not been able to find documentation on how to do this. I got as far as calling a javascript function when items in the Multicombo are selected/unselected:

if (myCombo.getStore().data.items.length == myCombo.getValue().length) {        
        myCombo.setText("All"); //there's no such function
}

Any ideas on how to achieve this?

**fabricio.murta** · Aug 04, 2016, 1:24 AM

Hello!

Use setRawValue() to change the display text in the field.

Hope this helps!

**SoftwareMHC** · Aug 04, 2016, 4:36 PM

Thanks!

However,

setRawValue("All")

deselects all the items in the multicombo. I need to only change the display text, when all options are selected.

your help is much appreciated!

**fabricio.murta** · Aug 04, 2016, 4:57 PM

Hello @SoftwareMHC!

I can't reproduce this "lose all selection" behavior you are having. Can you provide a test case reproducing your scenario, where it erases the selection? Probably you want to add a simple button with an 'alert()' or 'console.log()' showing the selection has been cleared.

**SoftwareMHC** · Aug 04, 2016, 5:39 PM

Please interact with the following example to see what I mean. As you can see in the code, all items are selected when the page is loaded.

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET Example</title>

    <link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
    <script type="text/javascript">
        function selectionChanged(ctrl) {
            if (ctrl.getStore().data.items.length == ctrl.getValue().length) {
                ctrl.setRawValue("All");
            }
        }
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" Theme="Crisp" />
        
    <form runat="server">
        <ext:MultiCombo ID="uiControlx" runat="server" Editable="false" FieldLabel="bunch of options" InputWidth="70" MatchFieldWidth="false" LabelWidth="150">
			<Items>				                        
				<ext:ListItem Text="option1" Value="1" />
                <ext:ListItem Text="option2" Value="2" />
                <ext:ListItem Text="option3" Value="3" />
                <ext:ListItem Text="option4" Value="4" />
                <ext:ListItem Text="option5" Value="5" />
			</Items>
            <SelectedItems>
                <ext:ListItem Value="1" />
                <ext:ListItem Value="2" />
                <ext:ListItem Value="3" />
                <ext:ListItem Value="4" />
                <ext:ListItem Value="5" />                 
            </SelectedItems>
            <Listeners>
                <Change Handler="selectionChanged(this)" />                                        
            </Listeners>                                    
		</ext:MultiCombo> 
    </form>   
</body>
</html>

**fabricio.murta** · Aug 05, 2016, 6:19 AM

Hello!

Yes, if you do need this while you are loading, then you should let it handle its parent's ComboBox.getValue() sanity check -- which is to check if the displayed value matches the template-generated display value.

In ther words, replacing your selectionChanged() function by the one below, and also adding the (global-space, you may fit it somewhere else if you feel like it) staticDisplayValue() function, will make it work just fine:

function selectionChanged(ctrl) {
    var store = ctrl.getStore(),
        selection = ctrl.getValue();

    if (store && selection && store.data.items.length == selection.length) {
        if (!ctrl.orgGetDisplayValue)
        {
            ctrl.orgGetDisplayValue = ctrl.getDisplayValue;
        }

        ctrl.getDisplayValue = staticDisplayValue;
        ctrl.setRawValue(ctrl.getDisplayValue());
    } else if (ctrl.getDisplayValue == staticDisplayValue) {
        ctrl.getDisplayValue = ctrl.orgGetDisplayValue;
        ctrl.setRawValue(ctrl.getDisplayValue());
    }
}

var staticDisplayValue = function () {
    return "All";
}

I hope this helps!

**fabricio.murta** · Aug 05, 2016, 6:22 AM

By the way, there are more discussions in the forums about how to achieve similar goals with MultiCombo. If the idea above still doesn't help, give the forums a search. In particular, this thread helped coming up with the reply above: MultiCombox to display custom Text.

**SoftwareMHC** · Aug 09, 2016, 4:42 PM

Thanks Fabricio!

I ended up using the other example you suggested, I only modified the name of the property "valueModels" and used the one for version 3 "valueCollection" (or maybe this change is because of a different version of ExtJS).

Below is the fully working example. Thanks so much for your help!

I do have a question. I was going through the different objects via firebug (console.log(this)) and noticed that the property "SelectedItems" always was a 5 items array, despite of how many items were selected/unselected. Is this why you pointed me to use "valueCollection" instead? I'm just wondering.

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET Example</title>

    <link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
    <script type="text/javascript">
        
        var myGetDisplayValue = function () {
            var value;            
            //console.log(this);
            if (this.valueCollection.length == this.store.data.items.length) {
                value = "All";
            } else if (this.valueCollection.length > 1) {
                value = "Multi-Selection";
            } else if (this.valueCollection.length == 1) {
                value = this.displayTpl.apply(this.displayTplData);                
            } else {
                value = "No Selection!";
            }
            
            return this.wrapBySquareBrackets ? "[" + value + "]" : value;
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" Theme="Crisp" />
        
    <form runat="server">
        <ext:MultiCombo ID="uiControlx" runat="server" Editable="false" FieldLabel="bunch of options" InputWidth="70" MatchFieldWidth="false" LabelWidth="150">
            <CustomConfig>
                <ext:ConfigItem Name="getDisplayValue" Value="myGetDisplayValue" Mode="Raw" />
            </CustomConfig>
			<Items>				                        
				<ext:ListItem Text="option1" Value="1" />
                <ext:ListItem Text="option2" Value="2" />
                <ext:ListItem Text="option3" Value="3" />
                <ext:ListItem Text="option4" Value="4" />
                <ext:ListItem Text="option5" Value="5" />
			</Items>
            <SelectedItems>
                <ext:ListItem Value="1" />
                <ext:ListItem Value="2" />
                <ext:ListItem Value="3" />
                <ext:ListItem Value="4" />
                <ext:ListItem Value="5" />                 
            </SelectedItems>                                               
		</ext:MultiCombo> 
    </form>   
</body>
</html>

**fabricio.murta** · Aug 09, 2016, 5:19 PM

Hello!

I may sound strange and maybe I'm too forgetful but, I don't remember indicating you to use valueCollection explicitly, but just setRawValue. It just turned out that, if just using setRawValue, it does not work while the condition is met when loading the component; the selection was cleared because of a check inherited from the parent class, the comboBox's. This check test the displayed value against the template-generated value for the "combo box".

Maybe your assumption is because getValue() returns exactly the value of valueCollection. As is with getStore() which just returns the store.

While if debugging it is okay to just this.store.data.whatever (assuming the scope is set on the component!), relying on it on your production code may bring forth undesired results in the future. That's because at some point, getting that structure may change. Also, depending on the condition (maybe, using a proxy, auto-instantiating the store first use to name a couple possibilities), this.store may be null/undefined while this.getStore() may correctly return the dynamically or freshly created store.

I didn't investigate it, but the SelectedItems could be just an inherited property from the combo box so, to mesh the logic of the multi combo with combo box, this was left as if everything was selected by the underlying combo box.

Well, I'm not sure this hits your actual question, but hope so!

**SoftwareMHC** · Aug 09, 2016, 5:38 PM

Actually, you provided a link to an alternate solution and that's the code I modified to get to the solution. I hope that's ok :)

On the other hand, you make a very good point about using this.store.whatever, I've changed js function to the code below, please note the line using totalCount, I hope that's more appropriate to use and kinda future-proof:

var myGetDisplayValue = function () {
    var value;
    
    if (this.valueModels.length == this.getStore().totalCount) {
        value = "Â«AllÂ»";
    } else if (this.valueModels.length > 1) {
        value = "Multi-Selection";
    } else if (this.valueModels.length == 1) {
        value = this.displayTpl.apply(this.displayTplData);
    } else {
        value = "No Selection!";
    }    

    return this.wrapBySquareBrackets ? "[" + value + "]" : value;
};

Thread: [CLOSED] set custom display text on MultiCombo Change event

Thread Tools

Search Thread

Display

[CLOSED] set custom display text on MultiCombo Change event

Similar Threads

[CLOSED] HtmlEditor text change event?

[CLOSED] MultiCombox to display custom Text

calendar event display change and date format

[CLOSED] MultiCombo Change Event Not Saving ViewState

How to implement the search from database on textbox's text-change event and display the result with a div below the textbox?

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] set custom display text on MultiCombo Change event

[CLOSED] set custom display text on MultiCombo Change event

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us