Is there a way to know when a multiselect dropdown is collapsed? I have a multiselect dropdown as show here:
On unselecting all options, the dropdown still remains expanded as shown in the above image. On clicking somewhere else in the screen outside dropdown, it collapses. I need to perform some actions (for example, display a message) when dropdown collapses. Is there a way to know when a multiselect dropdown is collapsed?
I was able to use onBlur instead. But, I need to click outside Dropdown twice in order to print the message.
<Dropdown
options={[
{ key: 'A', text: 'Option a' },
{ key: 'B', text: 'Option b' },
{ key: 'C', text: 'Option c' }
]}
multiSelect={true}
onBlur={this.onFilterDropDownDismiss}
/>
private onFilterDropDownDismiss = (): void => {
console.log("Dismissed");
}
But, I need to display the message on one click outside. Please let me know if there are any suggestions to fix this.
IDropdownProps.onDismiss event could be utilized for that matter:
Callback issues when the options callout is dismissed
<Dropdown
options={[
{ key: 'A', text: 'Option a' },
{ key: 'B', text: 'Option b' },
{ key: 'C', text: 'Option c' }
]}
multiSelect={true}
onDismiss={this.onFilterDropDownDismiss}
/>
private onFilterDropDownDismiss = (): void => {
console.log("Dismissed");
}
Here is a demo for your reference
Related
1[I tried to change the z-index of pagination to 0 it didnt't work]
Here is the link to my codesandbox:
Please check the last select dropdown, it's going behind pagination.
https://codesandbox.io/s/jolly-chandrasekhar-uim6k
React-select exposes a menuPortalTarget prop, that lets you portal the select menu to a dom node of your choosing.
To target body :
<ReactSelect
options={[
{ value: "one", label: "One" },
{ value: "two", label: "Two" },
{ value: "three", label: "Three" }
]}
menuPortalTarget={document.body}
/>
CodeSandbox Link : https://codesandbox.io/s/blissful-cerf-wqtto
I need to limit the number of visible options displayed in the react-select dropdown panel.
At the moment it shows around 9 items but I need that limited to 5. I'm not sure how to go about making changes to the dropdown.
I figured this out by overriding core component styles. It was just a case of finding which component rendered the styles I was interested in.
In this case it was the menuList component that controlled the visible items in the dropdown. To override the component styles this is what I used:
const selectStyles = {
menuList: styles => {
console.log('menuList:', styles);
return {
...styles,
maxHeight: 136
};
}
};
return (
<Select
value={selectVal}
onChange={updateVal}
options={options}
styles={selectStyles}
/>
);
I found it very useful to console.log out the component styles to see what styles are available for a particular component as well as the default values used.
Do you use this react-dropdown library https://www.npmjs.com/package/react-dropdown-select?
This library has options attributes. Which are the options the user can select. For this answer. You can put 5 items in options like follow.
const options = [
{key: '1', value: 'first'},
{key: '2', value: 'two'},
{key: '3', value: 'three'},
{key: '4', value: 'four'},
{key: '5', value: 'five'}
];
<react-dropdown-selecte options={options} />
Background
I am using xotahal/react-native-material-ui material design in my React-Native application. I have implemented the ActionButton with multiple buttons in it. I can not find anywhere in the docs that is explains how to use this. I was able to find the component in the git repo and managed getting the buttons to render but I can't get them to fire of onClick().
Example
The buttons appear when the main blue button is clicked.
Question
What is the proper way to pass functions to these buttons, or where in the documentation is this explained?
Code
<ActionButton
actions={[
{ icon: 'note-add', label: 'Add', onPress: () => this.toggleSearch() },
{ icon: 'save', label: 'Save', onPress: () => this.handleOnSave() },]}
/>
toggleSearch() {
console.log('################## HEY SEARCH WORKS ##########################');
}
Problem with this is that no functions are fired when I click the button.
I would be grateful if someone knows where this is explained in the documentation.
ActionButton actions prop expects an object with the shape of {icon, label, name}. If you want to handle onPress you need to define it as a prop to the component and not to the actions object.
Example
<ActionButton
actions={[
{ icon: 'note-add', label: 'Add' },
{ icon: 'save', label: 'Save'}]}
onPress={(text) => this.onPress(text)}
/>
// ...
onPress(text) {
switch(text) {
case:
// do something on this case
break;
case:
// do another thing on this case
break;
}
}
I have created a toolbar with menu item in it:
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
padding: '30 0 0 0',
width : '100%',
items: [
{
xtype: 'splitbutton',
text : 'File',
menu: Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [
{
text: 'Import',
// code here
}
]
})
}
]
});
So what I am trying to do is to be able to use Import button just like File->Open.
I know that I can add xtype: 'filebutton', but it shows the browse button with the text field.
Also I want to let the user to choose only certain file extensions. After file is selected (we click open), I want to add it to my file tree in my viewport.
Thanks for any help.
I figured it out by using xtype: 'fileuploadfield' and hiding the file name/text field.
xtype: 'fileuploadfield',
buttonText : 'Open',
buttonOnly: true,
It is as simple as it gets. Just create a toolbar and have this code in its item field.
I have the following code for adding buttons in ever row of a DataGrid:
structure: [
{field: 'msConstId', width: '0%', name: 'Milestone',hidden: true},
{field: 'edit', width: '8%', name: 'Edit',formatter: function(data, rowIndex) {
return new dijit.form.Button({style: "width: 80px;",label:"Edit", iconClass:"dijitIconEditTask",showLabel:true, onClick:function(){ updateMilestone.show(); populateUpdateControls(); }});
}},
{field: 'delete', width: '10%', name: 'Delete',formatter: function(data, rowIndex) {
return new dijit.form.Button({style: "width: 80px;",label:"Delete", iconClass:"dijitIconDelete",showLabel:true, onClick:function(){ deleteMilestoneDialog(); }});
}}
]
The problem is that I want to assign an id to each of the button as "editBtnRowIndex" and "deleteBtnRowIndex". I want to use the id's for enabling and disabling buttons in specific grid rows.
Is that possible?
I had to go with a work around for this by looking at the data in other fields and disabling the button for that row with something like this:
var rowdata = grid.getItem(rowIndex);
rowIndex is passed as param to formatter function.
var val = rowdata.myRowID;
if(val=='specific value') {
//return disabled button
} else {
//return enabled button
}