[CLOSED] Checkbox is not rendering for Empty text in MultiCombo

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [CLOSED] Checkbox is not rendering for Empty text in MultiCombo

    Hi,
    In Ext.Net 2.5 version, the checkbox is NOT rendering for the listitem which has Text="" and Value = something in the MultiCombo. Please see the below example code and picked from Ext.Net 2.5 Examples. Please let us know the solution ASAP.
    Please see the attached screenshot

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>MultiCombo - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <style type="text/css">
             .x-boundlist-item
            {
                font-size: 11px;
                height: 24px;
            }
        </style>
        <script>
            var updateButtonText = function (item, checked) {
                var text = [];
                
                item.parentMenu.items.each(function (item) {
                    if (item.checked) {
                       text.push(item.text);
                    }
                });
                
                if (text.length == 0) {
                    App.Button1.setText("[Select Colors]");
                } else {
                    App.Button1.setText("[" + text.join(",") + "]");
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h2>Simple MultiCombo</h2>
            
            <ext:MultiCombo runat="server" Width="260">
                <Items>
                    <ext:ListItem Text="Item 1" Value="1" />
                    <ext:ListItem Text="Item 2" Value="2" />
                    <ext:ListItem Text="Item 3" Value="3" />
                    <ext:ListItem Text="Item 4" Value="4" />
                    <ext:ListItem Text="Item 5" Value="5" />
                    <ext:ListItem Text=" " Value="10" />
                </Items>
                
                <SelectedItems>
                    <ext:ListItem Value="2" />
                    <ext:ListItem Index="4" />
                </SelectedItems>
            </ext:MultiCombo>
            <br />
            
            <h2>MultiCombo with WrapBySquareBrackets</h2>
            
            <ext:MultiCombo 
                runat="server" 
                WrapBySquareBrackets="true" 
                Width="260">
                <Items>
                    <ext:ListItem Text="Item 1" Value="1" />
                    <ext:ListItem Text="Item 2" Value="2" />
                    <ext:ListItem Text="Item 3" Value="3" />
                    <ext:ListItem Text="Item 4" Value="4" />
                    <ext:ListItem Text="Item 5" Value="5" />
    <ext:ListItem Text=" " Value="10" />
                </Items>
                
                <SelectedItems>
                    <ext:ListItem Value="2" />
                    <ext:ListItem Index="4" />
                </SelectedItems>
            </ext:MultiCombo>
            <br />
            
            <h2>MultiCombo with SelectionMode="Selection"</h2>
            
            <p>Selected items are highlighted.</p>
            
            <ext:MultiCombo runat="server" SelectionMode="Selection" Width="260">
                <Items>
                    <ext:ListItem Text="Item 1" Value="1" />
                    <ext:ListItem Text="Item 2" Value="2" />
                    <ext:ListItem Text="Item 3" Value="3" />
                    <ext:ListItem Text=" " Value="10" />
                    <ext:ListItem Text="Item 4" Value="4" />
                    <ext:ListItem Text="Item 5" Value="5" />
                </Items>
                
                <SelectedItems>
                    <ext:ListItem Value="2" />
                    <ext:ListItem Index="4" />
                </SelectedItems>
            </ext:MultiCombo>
            <br />
            
            <h2>MultiCombo with SelectionMode="All" (checkboxes and highlight)</h2>
            
            <p>Selected items are highlighted and checked.</p>
            
            <ext:MultiCombo runat="server" SelectionMode="All" Width="260">
                <Items>
                    <ext:ListItem Text="Item 1" Value="1" />
                    <ext:ListItem Text="Item 2" Value="2" />
                    <ext:ListItem Text="Item 3" Value="3" />
                    <ext:ListItem Text=" " Value="10" />
                    <ext:ListItem Text="Item 4" Value="4" />
                    <ext:ListItem Text="Item 5" Value="5" />
                </Items>
                
                <SelectedItems>
                    <ext:ListItem Value="2" />
                    <ext:ListItem Index="4" />
                </SelectedItems>
            </ext:MultiCombo>
            <br />
            
            <h2>Button with Menu to emulate MultiCombo</h2>
            
            <ext:Button 
                ID="Button1" 
                runat="server" 
                Icon="Rgb" 
                Text="[Select Colors]" 
                Width="200">
                <Menu>
                    <ext:Menu runat="server" Width="200">
                        <Defaults>
                            <ext:Parameter Name="HideOnClick" Value="false" Mode="Raw" />
                        </Defaults>
                        <Items>
                            <ext:CheckMenuItem runat="server" Text="Red" CheckHandler="updateButtonText" Width="194" />
                            <ext:CheckMenuItem runat="server" Text="Green" CheckHandler="updateButtonText" />
                            <ext:CheckMenuItem runat="server" Text="Blue" CheckHandler="updateButtonText" />
                        </Items>                    
                    </ext:Menu>
                </Menu>
            </ext:Button>
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	MultiComboIssue.PNG 
Views:	151 
Size:	19.9 KB 
ID:	25107  
    Last edited by fabricio.murta; Apr 13, 2018 at 5:39 PM. Reason: no feedback from the user in 7+ days
  2. #2
    Hello @iansriley!

    This issue still happens down to Ext.NET 4.5.x. Just tried your test case in the latest release.... so well, that's maybe a feature now.

    Good news is that you can just replace the empty whitespace entries with &nbsp; and you'll get your checkbox.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you for the temporary solution... now checkbox is getting rendered, but.. when select that item it's showing same "&nbsp;" on display, it's not good to show like this to end user, please see the attached screenshot.

    Is there any work around for this as well....

    Attached Thumbnails Click image for larger version. 

Name:	MultiComboIssueDisplay.PNG 
Views:	154 
Size:	9.9 KB 
ID:	25108  
    Last edited by iansriley; Feb 08, 2018 at 7:11 AM.
  4. #4
    Hello @iansriley!

    There must be something else in your actual use case that's triggering this. On the test case you provided, I just get an empty string (well, with the translated long space by &nbsp;, but not the untranslated string).

    I initially did this just in Ext.NET 4.5 so when you reported this behavior I wasn't sure; then I just copied the sample to version 2.5 (actually 2.5.3) and it worked well. When I select the "blank" entry, I just get the colon and the blank item selected.

    Here's the playback of a run in the example using Ext.NET 2: https://extnet.github.io/Ext.NET/for...ombo_entry.gif

    EDIT: just to clarify, "in the test case you provided" has also the change with &nbsp; in the dropdown entry instead of a simple white space.
  5. #5
    Yes, it's working fine with static ListItems but not with Store data.... please check following example and attached screenshot.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        
        private object TestData
        {
            get
            {
                return new object[]
                {
                    new object[] { "AL", "Alabama", "The Heart of Dixie" },
                    new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
                    new object[] { "AZ", "Arizona", "The Grand Canyon State" },
                    new object[] { "AR", "Arkansas", "The Natural State" },
                    new object[] { "CA", "California", "The Golden State" },
                    new object[] { "VA", "&nbsp;", "" },
                    new object[] { "CO", "Colorado", "The Mountain State" },
                    new object[] { "CT", "Connecticut", "The Constitution State" },
                    new object[] { "DE", "Delaware", "The First State" },
                    new object[] { "DC", "District of Columbia", "The Nation's Capital" },
                    new object[] { "FL", "Florida", "The Sunshine State" },
                    new object[] { "GA", "Georgia", "The Peach State" }
                    
                };
            }
        }
    </script>
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>MultiCombo - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <style type="text/css">
             .x-boundlist-item
            {
                font-size: 11px;
                height: 24px;
            }
        </style>
        <script>
            var updateButtonText = function (item, checked) {
                var text = [];
                
                item.parentMenu.items.each(function (item) {
                    if (item.checked) {
                       text.push(item.text);
                    }
                });
                
                if (text.length == 0) {
                    App.Button1.setText("[Select Colors]");
                } else {
                    App.Button1.setText("[" + text.join(",") + "]");
                }
            };
        </script>
    </head>
    <body>
        <form runat="server" style="padding:10px;">
            <ext:ResourceManager runat="server" />
            
            <h2>Simple MultiCombo</h2>
            
            <ext:MultiCombo runat="server" Width="260" DisplayField="name" ValueField="abbr">
                 <Store>
                        <ext:Store runat="server" Data="<%# TestData %>" AutoDataBind="true" >
                            <Model>
                                <ext:Model runat="server">
                                    <Fields>
                                        <ext:ModelField Name="abbr" />
                                        <ext:ModelField Name="name"  />
                                        <ext:ModelField Name="slogan" />
                                    </Fields>
                                </ext:Model>
                            </Model>
    
                            <Reader>
                                <ext:ArrayReader />    
                            </Reader>
                        </ext:Store>
                    </Store>           
            </ext:MultiCombo>
            <br />
            
            
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	MultiComboIssueDisplay.PNG 
Views:	149 
Size:	12.1 KB 
ID:	25109  
  6. #6
    Hello @iansriley!

    Thanks for the code sample, and good news, you can just mangle the multi combo's display template to make it look the way you need.

    As we need the &nbsp; on the picker for it to show nothing -yet- show the checkbox, we shold still rely on that string. But then we just transform it into nothing whenever it wants to get into the list of selections with the code block below (within the ext:MultiCombo block definition:

    <DisplayTpl runat="server">
        <Html>
            <tpl for=".">{[typeof values === "string" ? values : ((values["name"] == "&nbsp;") ? "" : values["name"])]}<tpl if="xindex < xcount">, </tpl></tpl>
        </Html>
    </DisplayTpl>
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Jan 30, 2014, 5:38 AM
  2. [CLOSED] MultiCombo checkbox problem
    By PoloTheMonk in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 04, 2013, 7:19 AM
  3. [CLOSED] MultiCombo collapses on a CheckBox click in IE8.
    By Leonid_Veriga in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 18, 2013, 8:30 AM
  4. [CLOSED] Multicombo always show the same text
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 28, 2012, 9:23 AM
  5. [CLOSED] [1.0] Multicombo not Rendering After SVN Update
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 17, 2009, 6:18 AM

Tags for this Thread

Posting Permissions