PDA

View Full Version : [OPEN] [#101] How can I highlight a MultiSelect to show its required field on the client?



Fahd
Jul 27, 2012, 4:25 PM
For example with the Red squiggly line where the box border is Red.



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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">

protected void Select(object sender, DirectEventArgs e)
{
// NOTE: DO SERVER SIDE WORK !!!
X.Msg.Alert("Server Side", "Client side validation passed !!!").Show();
}


</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>MultiSelect - Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>
MultiSelect
</h1>
<ext:Button ID="Button1" runat="server" OnDirectClick="Select" Text="Select" CausesValidation="false" AllowBlank="false" />
<br />
<ext:FormPanel ID="Panel1" runat="server" Border="false" Width="300" Height="250" Layout="FitLayout">
<Items>
<ext:MultiSelect ID="MultiSelect1" runat="server" SingleSelect="true" AllowBlank="false">
<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" />
</Items>
</ext:MultiSelect>
</Items>
</ext:FormPanel>
</form>
</body>
</html>

Daniil
Jul 27, 2012, 8:25 PM
Hi,


AllowBlank="false"
currently doesn't work.

Thanks for the report, we are investigating.

Daniil
Jul 30, 2012, 10:46 AM
There are two bugs.

One is on our Ext.NET side, it has been fixed in SVN.

Another one is on ExtJS side:
http://www.sencha.com/forum/showthread.php?233404

They have opened a bug.

For now, I can suggest to handle the ValidityChange event to apply some CSS class to highlight a MultiSelect as invalid.

Example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

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

<style type="text/css">
.multiselect-invalid .x-panel-body {
border-color: Red !important;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:MultiSelect ID="MultiSelect1" runat="server" AllowBlank="false">
<Items>
<ext:ListItem Text="Item 1" Value="1" />
<ext:ListItem Text="Item 2" Value="2" />
<ext:ListItem Text="Item 3" Value="3" />
</Items>
<Listeners>
<ValidityChange Handler="this[isValid ? 'removeCls' : 'addCls']('multiselect-invalid');" />
</Listeners>
</ext:MultiSelect>

<ext:Button runat="server" Text="Validate" Handler="App.MultiSelect1.validate();" />
</body>
</html>

Daniil
Dec 29, 2012, 6:15 AM
Opened an Issue to track this defect, see:
https://github.com/extnet/Ext.NET/issues/101