Disabled WebCombo Cursor

8 replies. Last post: March 3, 2011 4:36 PM by Yudi
Tags :
  • (None)
A YousifMember

When we disable the WebCombo object, moving the mouse over the pulldown arrow still changes the cursor to the hand/finger pointer.  When disabled, we want to change this or it should be done by default so the cursor goes back to just a the default since you can't pull anything down anyway when disabled.

I've tried setting it via a style, but that seems to get overridden by inline styles "under the hood."  Is there a layout setting I'm missing.  Does the control offer this setting?

Answers

Yudi Member

Currently there is no DisabledStyle for WebCombo.

I’d like to suggest you to do it in client-side when disabling WebCombo. The tips is: we need to get the div element of the drop down arrow and then set the style-cursor property to “default”.

The snippet code below shows the JavaScript that I use to disable WebCombo plus set the cursor back to default.

function button1_onclick() {
    var WebCombo1 = ISGetObject("WebCombo1");
    var DropDownArrowElement = document.getElementById(WebCombo1.ClientID+"_f").childNodes[1];

    WebCombo1.Disable();
    DropDownArrowElement.style.cursor = "default";

    return true;
}

Hope this helps.

*Edited reason: Adding more effective method as suggested by A Yousif. Thank you and two thumbs up for A Yousif.

All Replies

Yudi Member

By default, WebCombo doesn’t have the hand/finger cursor type style when user moves the mouse pointer over the drop down arrow.
Could you please kindly let us know in detail the technique that you use to have the hand/finger cursor type style on drop down arrow mouse over?

A YousifMember

Hello Yudi,

Here's an example of our base skin and CSS.  As you can see, we only use the cursor setting twice and it's set to pointer.  So we never set it to hand.

Skin:

<PRISM:PrismVirtualComboBoxBase
    runat="server"
    CssClassFrameDisabled="BaseComboBoxFrameDisabled"
    UseDefaultStyle="false"
    AllowAutoDataCaching="true"
    LayoutSettings-AllowAddItem="false"
    LayoutSettings-AllowNavigationOnMouseWheel="false"
    LayoutSettings-AllowTextWrapping="false" 
    LayoutSettings-AlwaysShowAllRowsOnDropdown="true" 
    LayoutSettings-AlwaysShowHelpButton="false" 
    LayoutSettings-ColumnStyle-CssClass="BaseComboBoxColumn"
    LayoutSettings-ComboMode="SingleColumn"
    LayoutSettings-DropDownStyle-Active-CssClass="BaseComboBoxDropDown"
    LayoutSettings-DropDownStyle-Normal-CssClass="BaseComboBoxDropDown"
    LayoutSettings-DropDownStyle-Over-CssClass="BaseComboBoxDropDown"     
    LayoutSettings-EntryMode="Default"
    LayoutSettings-FrameStyle-Active-CssClass="BaseComboBoxTextBox"
    LayoutSettings-FrameStyle-Normal-CssClass="BaseComboBoxTextBox" 
    LayoutSettings-FrameStyle-Over-CssClass="BaseComboBoxTextBox" 
    LayoutSettings-ResultBoxStyle-CssClass="BaseComboBoxResultBox"
    LayoutSettings-ResultFrameStyle-CssClass="BaseComboBoxResultFrame" 
    LayoutSettings-RowStyle-Active-CssClass="BaseComboBoxActiveRow" 
    LayoutSettings-RowStyle-Normal-CssClass="BaseComboBoxNormalRow" 
    LayoutSettings-RowStyle-Over-CssClass="BaseComboBoxOverRow" 
    LayoutSettings-SelectedRowStyle-CssClass="BaseComboBoxSelectedRow" 
    LayoutSettings-StatusBoxStyle-CssClass="BaseComboBoxStatusBox"
    LayoutSettings-TextBoxStyle-Active-CssClass="BaseComboBoxTextBox" 
    LayoutSettings-TextBoxStyle-Normal-CssClass="BaseComboBoxTextBox" 
    LayoutSettings-TextBoxStyle-Over-CssClass="BaseComboBoxTextBox"
/>

CSS:

.BaseComboBoxDropDown
{
	font-family: Webdings;
	border: 0px;
	background-color: white;
	color: #3f3f3f;
	cursor: pointer;
	width: 0px;
}

.BaseComboBoxDropDownDisabled
{
	font-family: Webdings;
	border: solid 1px #e0e0e0;
	background-color: #ffffff;
	color: #FFEEEE;
	cursor: pointer;
}

.BaseComboBoxFrame
{
	border: solid 1px #ddcccc;
	background-color: white;
	color: #3f3f3f;
	overflow: hidden;
	height: 20px;
	width: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.BaseComboBoxFrameDisabled
{
	border: solid 1px #e0e0e0;
	background-color: white;
	color: #ffeeee;
	overflow: hidden;
	height: 20px;
	width: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
}

.BaseComboBoxColumn
{
	border-width: 0px;
}

.BaseComboBoxInactiveRow
{
    color: Gray;
}

.BaseComboBoxActiveRow
{
    border: 0px;
	font-size: 10pt;
	font-family: Calibri;
	font-weight: lighter;
	color: #666666;
	height: 20px;
}

.BaseComboBoxNormalRow
{
	background-color: #FFFFFF;
	border: 0px;
	font-size: 10pt;
	font-family: Calibri;
	font-weight: lighter;
	color: #666666;
	height: 20px;
}

.BaseComboBoxOverRow
{
	background-color: #CCBBAA;
	border: 0px;
	font-size: 10pt;
	font-family: Calibri;
	font-weight: lighter;
	color: #666666;
	height: 20px;
}

.BaseComboBoxSelectedRow
{
	background-color: #DDCCBB;
	border: 0px;
	font-size: 10pt;
	font-family: Calibri;
	font-weight: lighter;
	color: #666666;
	height: 20px;
}

.BaseComboBoxResultFrame
{
	border-style: solid;
	border-color: #DDCCCC;
	border-width: 1px;
	margin-left: 0px;
	margin-right: 0px;
	top: auto;
	left: auto;
	width: 100%;
	height: auto;
	background: #FFFFFF;
}

.BaseComboBoxResultBox
{
    border: 0px;
    border-collapse: collapse;
	background: #FFFFFF;
	position: relative;
	top: auto;
	left: auto;
	z-index: 9001;
}

.BaseComboBoxStatusBox
{
    border: 0px;
	background-color: #EEEEEE;
	font-size: 10pt;
	font-family: Calibri;
	font-weight: lighter;
}

.BaseComboBoxTextBox
{
    border: 0px;
	font-size: 10pt;
	font-family: Calibri;
	background-color: #FFFFFF;
	color: Black;
	overflow: hidden;
	width: 100%;
	height: inherit;
	top: 0;
	left: -1px;
}
Yudi Member

Currently there is no DisabledStyle for WebCombo.

I’d like to suggest you to do it in client-side when disabling WebCombo. The tips is: we need to get the div element of the drop down arrow and then set the style-cursor property to “default”.

The snippet code below shows the JavaScript that I use to disable WebCombo plus set the cursor back to default.

function button1_onclick() {
    var WebCombo1 = ISGetObject("WebCombo1");
    var DropDownArrowElement = document.getElementById(WebCombo1.ClientID+"_f").childNodes[1];

    WebCombo1.Disable();
    DropDownArrowElement.style.cursor = "default";

    return true;
}

Hope this helps.

*Edited reason: Adding more effective method as suggested by A Yousif. Thank you and two thumbs up for A Yousif.
A YousifMember

Thanks Yudi.  This is a lot of work for something simple that should be in the grid styles to configure.  So would you kindly ask for this to be added as a feature in the next patch or hot fix please?  In the meanwhile we'll use the client-side solution.  Thank you.

Yudi Member

You,re welcome, Yousif.

I have forwarded your feature request to WebCombo development team. The team will check the feasibility to implement this feature in the next build of WebCombo.

The feature request is filed under Task #929. Should I hear any news from the development team regarding this feature request, I’ll let you know.

A YousifMember

Yudi,

Can you please not mark a post an answer until the person requesting it has confirmed that it is indeed an answer?  I can mark the post as answered once I've verified it.

A YousifMember

Yudi,

Could you update your "answer" post above to use this more effective method of getting the WebCombo's drop down element please?  Thanks.

var DropDownArrowElement = document.getElementById(WebCombo1.ClientID+"_f").childNodes[1];

Your method above actually failed for me as one of the childNodes referenced was null.  It would be nice if an ID was provided on the dropdown element so it can be referenced directly without "guess work" as to where it is.  Maybe a suffix like "_dd" if not already used for the element the way "_f" is used for the frame.  Would you kindly request this as an enhancement addition to Task #929 please?  Thank you.

Yudi Member

As your suggestion, I have added the new approach to get the drop-down element of WebCombo. This approach really is better and more effective.

It seems that the pattern [WebComboID] plus a suffix like “_dd” is not reserved yet. I have combined this feedback to Task #929.

Thank you.

All times are GMT -5. The time now is 9:53 PM.
Previous Next