BuyLog In
Ticket T1284677
Visible to All Users

SelectBox - NumberBox component usage in SelectBox

created 6 days ago

I use SelectBox component with custom item render. When I click on the NumberBox component, it makes a selection. If I remove the format property of NumberBox, it works correctly. How can I use NumberBox component in SelectBox?

Code Example:

TypeScript
export class Example extends React.Component<{}, {}> {

  ref = React.createRef<NumberBoxRef>();

  render() {  
    return (  
<div style={{ width: 600 }}>  
<SelectBox  
          displayExpr={'label'}  
          valueExpr={'value'}  
          dataSource={\[{ label: 'Apple', value: 1 }\]}  
          itemRender={(params: any) => {  
            return <Row justify={'space-between'}>  
              {params.label}  
<div onClick={(e) => { e.stopPropagation(); this.ref.current?.instance().focus(); }}  >  
<NumberBox ref={this.ref} showClearButton={true} format={'#,##0.00'} />  
</div>  
</Row>  
          }}  
        />  
</div>  
    );  
  }  
}
Sign in to comment on this post

Answers approved by DevExpress Support

created 3 days ago

Hello,

There is no out-of-the-box solution to keep the SelectBox component's dropdown open after an item click. As a workaround, you can set the SelectBox.showSelectionControls property to true and apply this custom CSS to hide the radio component.

CSS
.dx-list-item-before-bag.dx-list-select-radiobutton-container {
  display: none;
}

Let me know if this works for you.

Regards,
Charles

    Sign in to comment on this post

    Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

    Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.