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

1 Attachment(s)

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

Code:

<%@ 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>

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   and you'll get your checkbox.

Hope this helps!

1 Attachment(s)

Thank you for the temporary solution... now checkbox is getting rendered, but.. when select that item it's showing same " " 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....

https://forums.ext.net/image/png;bas...AASUVORK5CYIIA

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  , 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   in the dropdown entry instead of a simple white space.

1 Attachment(s)

Yes, it's working fine with static ListItems but not with Store data.... please check following example and attached screenshot.

Code:

<%@ 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", " ", "" }, 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>

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   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:

Code:

<DisplayTpl runat="server"> <Html> <tpl for=".">{[typeof values === "string" ? values : ((values["name"] == " ") ? "" : values["name"])]}<tpl if="xindex < xcount">, </tpl></tpl> </Html> </DisplayTpl>

I hope this helps!

Hello @iansriley!

It's been a while since we last replied to this thread and still no feedback from you.

Did our response above help you at all, or do you still need assistance with this inquiry?

We may mark this thread as closed if you don't reply in 7+ days from now, but that won't prevent you from posting whenever you feel like it.