|
|
Rank: Advanced Member
Groups: Member
Joined: 7/18/2008
Posts: 76
|
Good Morning, I am trying to see if your new combobox will meet our needs and while testing out this object, I have found that I cannot set the combo boxes text using the eo_SetComboBoxValue(object, text) within the anchors I have set within the dropdowntemplate. Below is the code I am using. I have two anchors and a checkboxlist inside the downdowntemplate of the combobox. The onclick event on the checkboxlist works as you have explained it within your help file (onclick="javascript:eo_SetComboBoxValue(event, getCheckBoxValues(this));"), however, the two anchors are not working, causing an error when it calls the eo_SetComboBoxValue. Can you explain why this is erroring out? It appears as if there is not a reference to the EO Combobox when calling the method, but I am not sure. Does the EO Combo Box allow that type of functionality? Thank you for your time.
Code: HTML/ASPX
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="comboBox.aspx.vb" Inherits="GreystarReports.comboBox" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!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 runat="server">
<title>ComboBox Sample</title>
</head>
<body>
<form id="frmComboBox" runat="server">
<div>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
</tr>
</table>
<eo:ComboBox ID="ecbClients" runat="server" ControlSkinID="None" DefaultIcon="00101070" HintText="Narrow by Clients" Width="225px" AllowCustomText="False">
<DropDownTemplate>
<div id="divFlyout" style="background-color: #C0D6F4; border: solid 1px blue; width: 220px; height: 160px; overflow: auto;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="standard-text" align="center" style="padding-left: 5px; padding-top: 2px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: Tahoma; font-size: 10pt;">
<a href="javascript:eo_SetComboBoxValue(event, checkBoxStatus('cblClients', true));">Select All</a>
</td>
<td style="font-family: Tahoma; font-size: 10pt; padding-left: 25px;">
<a href="javascript:eo_SetComboBoxValue(event, checkBoxStatus('cblClients', false));">Clear Selections</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-left: 5px;">
<div id="divScrollClient" style="background-color: #C0D6F4; border-top: 1px solid white; width: 190px; height: 100px; overflow: auto;">
<asp:CheckBoxList ID="cblClients" runat="server" Visible="true" onClick="javascript:eo_SetComboBoxValue(event, getCheckBoxValues(this));" Font-Names="Tahoma" Font-Size="10pt">
<asp:ListItem Text="Client1" Value="C1"></asp:ListItem>
<asp:ListItem Text="Client2" Value="C1"></asp:ListItem>
<asp:ListItem Text="Client3" Value="C1"></asp:ListItem>
</asp:CheckBoxList>
</div>
</td>
</tr>
</table>
</div>
</DropDownTemplate>
<IconAreaStyle CssText="font-family: tahoma; font-size: 12px; border-left: solid 1px #a8b1c6; border-top: solid 1px #a8b1c6; border-bottom: solid 1px #a8b1c6; vertical-align:middle;padding-left:2px; padding-right:2px;" />
<IconAreaHoverStyle CssText="font-family: tahoma; font-size: 12px; border-left: solid 1px #0a246a; border-top: solid 1px #0a246a; border-bottom: solid 1px #0a246a; vertical-align:middle;padding-left:2px; padding-right:2px;" />
<HintTextStyle CssText="font-style:italic;background-color:#c0c0c0;color:white;line-height:15px;" />
<TextAreaStyle CssText="font-family: tahoma; font-size: 12px; border-top: solid 1px #a8b1c6; border-bottom: solid 1px #a8b1c6; vertical-align:middle;padding-left:2px; padding-right:2px;" />
<TextAreaHoverStyle CssText="font-family: tahoma; font-size: 12px; border-top: solid 1px #0a246a; border-bottom: solid 1px #0a246a; vertical-align:middle;padding-left:2px; padding-right:2px;" />
<IconStyle CssText="width:16px;height:16px;" />
<ButtonAreaStyle CssText="border: solid 1px #a8b1c6; vertical-align:middle;" />
<ButtonAreaHoverStyle CssText="border: solid 1px #0a246a; vertical-align:middle;" />
<ButtonStyle CssText="width:14px;height:18px;background-color:#dee1e7; background-image:url(00020012); background-position: center center; background-repeat: no-repeat;" />
<ButtonHoverStyle CssText="width:14px;height:18px;background-color:#b6bdd2; background-image:url(00020012); background-position: center center; background-repeat: no-repeat;" />
</eo:ComboBox>
</div>
<script type="text/javascript">
function refreshList() {
try {
//Callback for Server Side Processing
}
catch (errorObject) {
alert(errorObject.Message);
}
} //End function refreshList() {
function getCheckBoxValues(oCheckBoxList) {
try {
var sList = "";
var checkbox = oCheckBoxList.getElementsByTagName("input");
var counter = 0;
//Loop Through all of the City Offices in the Checkbox List, if the City Office
//from the location matches the list, then check. All items will be disabled by default.
for (var iA = 0; iA < checkbox.length; iA++) {
var chkBoxText = checkbox[iA].parentNode.getElementsByTagName('label');
if (checkbox[iA].checked) {
sList = String(sList) + ", " + String(chkBoxText[0].innerHTML);
}
} //Loop for (var i = 0; i < checkbox.length; i++) {
sList = Right(sList, sList.length - 2);
var shortList = sList.substring(0, 95);
if (sList.length > 95) {
shortList = shortList + "...";
}
//alert("Length of Short List = " + shortList.length);
alert("Returning: " + shortList);
//Trying to apply shortList text value into the Combo Box
//var ecbClients = eo_GetObject("<%=ecbClients.ClientID %>");
//eo_SetComboBoxValue(ecbClients, sShortList);
//Callback for Server Side Processing
return shortList;
}
catch (errorObject) {
alert("Error in getCheckBoxValues: " + errorObject.Message);
return "";
} //End catch (errorObject)
} //end function getCheckBoxValues(oCheckBoxList) {
function checkBoxStatus(sCheckBoxList, bChecked) {
var oCheckBoxList = document.getElementById("<%=cblClients.ClientID %>");
var checkbox = oCheckBoxList.getElementsByTagName("input");
var counter = 0;
//Loop Through the Checkbox List and set the checked value from
for (var iA = 0; iA < checkbox.length; iA++) {
checkbox[iA].checked = bChecked;
} //Loop for (var i = 0; i < checkbox.length; i++) {
getCheckBoxValues(oCheckBoxList);
} //end function checkBoxStatus(oCheckBoxList, bChecked) {
//Javascript String Manipulation
function Left(str, n) {
if (n <= 0)
return "";
else if (n > String(str).length)
return str;
else
return String(str).substring(0, n);
}
function Right(str, n) {
if (n <= 0)
return "";
else if (n > String(str).length)
return str;
else {
var iLen = String(str).length;
return String(str).substring(iLen, iLen - n);
}
}
</script>
</form>
</body>
</html>
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, Please change your
Code: HTML/ASPX
<a href="javascript:eo_SetComboBoxValue(event, ...)" ... />
To:
Code: HTML/ASPX
<a href="javascript:void();"
onclick="eo_SetComboBoxValue(event, ...)" ... />
The reason is the first argument of eo_SetComboBoxValue is the DOM event object. href does not has an associated DOM event object since it is not a DOM event. onclick is an event so it has the event object. You will also need to change your checkBoxStatus to actually return a value. Otherwise the ComboBox will display "undefined". Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 7/18/2008
Posts: 76
|
Thank you for the explanation, it makes sense. Should have thought of that myself.... The anchors are now working. Couple of additional questions: Is there a way to keep the dropdown template visible while selecting multiple checkboxes? It is currently disappearing after each click. I want to allow multiple clicks and only disappear when the user looses focus from the dropdown. I have tried:
Code: HTML/ASPX
<asp:CheckBoxList ID="cblClients" runat="server" Visible="true" Font-Names="Tahoma" Font-Size="10pt" onClick="javascript:eo_SetComboBoxValue(event, getCheckBoxValues(this)); return false;">
2. Is there a way to have the HintText reappear if you pass back an empty string? (I have tried returning null, "", etc.) with no luck. I have cleaned up the code so that all of the functions are working. If anyone is interested.
Code: HTML/ASPX
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="comboBox.aspx.vb" Inherits="GreystarReports.comboBox" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!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 runat="server">
<title>ComboBox Sample</title>
</head>
<body>
<form id="frmComboBox" runat="server">
<div>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: Tahoma; font-size: 10pt;">
</td>
<td style="padding-left: 4px;">
<eo:ComboBox ID="ecbClients" runat="server" ControlSkinID="None" DefaultIcon="00101070" HintText="Narrow by Clients" Width="225px" AllowCustomText="False">
<DropDownTemplate>
<div id="divFlyout" style="background-color: #C0D6F4; border: solid 1px blue; width: 220px; height: 160px; overflow: auto;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="standard-text" align="center" style="padding-left: 5px; padding-top: 2px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: Tahoma; font-size: 10pt;">
<a href="javascript:void();" onclick="javascript:eo_SetComboBoxValue(event, checkBoxStatus(document.getElementById('<%=cblClients.ClientID %>'), true));">Select All</a>
</td>
<td style="font-family: Tahoma; font-size: 10pt; padding-left: 25px;">
<a href="javascript:void();" onclick="javascript:eo_SetComboBoxValue(event, checkBoxStatus(document.getElementById('<%=cblClients.ClientID %>'), false));">Clear Selections</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-left: 5px;">
<div id="divScrollClient" style="background-color: #C0D6F4; border-top: 1px solid white; width: 190px; height: 100px; overflow: auto;">
<asp:CheckBoxList ID="cblClients" runat="server" Visible="true" Font-Names="Tahoma" Font-Size="10pt" onClick="javascript:eo_SetComboBoxValue(event, getCheckBoxValues(this));">
<asp:ListItem Text="Client1" Value="C1"></asp:ListItem>
<asp:ListItem Text="Client2" Value="C1"></asp:ListItem>
<asp:ListItem Text="Client3" Value="C1"></asp:ListItem>
</asp:CheckBoxList>
</div>
</td>
</tr>
</table>
</div>
</DropDownTemplate>
<IconAreaStyle CssText="font-family: tahoma; font-size: 12px; border-left: solid 1px #a8b1c6; border-top: solid 1px #a8b1c6; border-bottom: solid 1px #a8b1c6; vertical-align:middle;padding-left:2px; padding-right:2px;" />
<IconAreaHoverStyle CssText="font-family: tahoma; font-size: 12px; border-left: solid 1px #0a246a; border-top: solid 1px #0a246a; border-bottom: solid 1px #0a246a; vertical-align:middle;padding-left:2px; padding-right:2px;" />
<HintTextStyle CssText="font-style:italic;background-color:#c0c0c0;color:white;line-height:15px;" />
<TextAreaStyle CssText="font-family: tahoma; font-size: 12px; border-top: solid 1px #a8b1c6; border-bottom: solid 1px #a8b1c6; vertical-align:middle;padding-left:2px; padding-right:2px;" />
<TextAreaHoverStyle CssText="font-family: tahoma; font-size: 12px; border-top: solid 1px #0a246a; border-bottom: solid 1px #0a246a; vertical-align:middle;padding-left:2px; padding-right:2px;" />
<IconStyle CssText="width:16px;height:16px;" />
<ButtonAreaStyle CssText="border: solid 1px #a8b1c6; vertical-align:middle;" />
<ButtonAreaHoverStyle CssText="border: solid 1px #0a246a; vertical-align:middle;" />
<ButtonStyle CssText="width:14px;height:18px;background-color:#dee1e7; background-image:url(00020012); background-position: center center; background-repeat: no-repeat;" />
<ButtonHoverStyle CssText="width:14px;height:18px;background-color:#b6bdd2; background-image:url(00020012); background-position: center center; background-repeat: no-repeat;" />
</eo:ComboBox>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function refreshList() {
try {
//Callback for Server Side Processing
}
catch (errorObject) {
alert(errorObject.Message);
}
} //End function refreshList() {
function getCheckBoxValues(oCheckBoxList) {
try {
var sList = "";
var checkbox = oCheckBoxList.getElementsByTagName("input");
var counter = 0;
//Loop Through all of the City Offices in the Checkbox List, if the City Office
//from the location matches the list, then check. All items will be disabled by default.
for (var iA = 0; iA < checkbox.length; iA++) {
var chkBoxText = checkbox[iA].parentNode.getElementsByTagName('label');
if (checkbox[iA].checked) {
sList = String(sList) + ", " + String(chkBoxText[0].innerHTML);
}
} //Loop for (var i = 0; i < checkbox.length; i++) {
sList = Right(sList, sList.length - 2);
var shortList = sList.substring(0, 95);
if (sList.length > 95) {
shortList = shortList + "...";
}
if (shortList.length = 0) {
return "";
}
else {
return shortList;
}
}
catch (errorObject) {
alert("Error in getCheckBoxValues: " + errorObject.Message);
return null;
} //End catch (errorObject)
} //end function getCheckBoxValues(oCheckBoxList) {
function checkBoxStatus(oCheckBoxList, bChecked) {
var checkbox = oCheckBoxList.getElementsByTagName("input");
var counter = 0;
//Loop Through the Checkbox List and set the checked value from
for (var iA = 0; iA < checkbox.length; iA++) {
checkbox[iA].checked = bChecked;
} //Loop for (var i = 0; i < checkbox.length; i++) {
return getCheckBoxValues(oCheckBoxList);
} //end function checkBoxStatus(oCheckBoxList, bChecked) {
//Javascript String Manipulation
function Left(str, n) {
if (n <= 0)
return "";
else if (n > String(str).length)
return str;
else
return String(str).substring(0, n);
}
function Right(str, n) {
if (n <= 0)
return "";
else if (n > String(str).length)
return str;
else {
var iLen = String(str).length;
return String(str).substring(iLen, iLen - n);
}
}
</script>
</form>
</body>
</html>
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Thanks for the update. As to your question:
1. Unfortunately there is no way to keep the combobox stay open after you call setComboBoxValue. It will always close the comboBox. We can probably add an argument to the function to let you specifying whether it should stay open;
2. That's a bug. It should automatically display the hint text once you clear the text. We will change that and provide you an update build;
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 7/18/2008
Posts: 76
|
That would be great if you could add that argument to the eo_SetComboBoxValue method. Please let me know if you decide to do that.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
No problem. We will reply once it's implemented (or if there is any particular reason that preventing us from implementing it).
Thanks!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, We have posted a new build that added a third argument to eo_SetComboBoxValue. Now you can do this:
Code: JavaScript
//Set the combobox value WITHOUT closing the drop down
eo_SetComboBoxValue(event, "test", false);
Note the third argument is false, which prevent the drop down from closing. Thanks!
|
|