We Keep Coding

How to add custom select all checkbox in toolbar using mui datagrid

I am currently using mui data grid to create my table. The properties are as follows
<DataGrid
rows={serialsList || []}
columns={columns}
rowsPerPageOptions={[25, 50, 100]}
//pageSize={93}
checkboxSelection={this.state.cancelShipFlag ? true : false}
disableSelectionOnClick={false}
components={{
Toolbar: NewToolbar,
}}
onSelectionModelChange={(ids) => {
const selectedIDs = new Set(ids);
console.log('Selected ID ' + selectedIDs);
const selectedRows = rowData.filter((row) => selectedIDs.has(row.id));
this.setState({ rowinfo: selectedRows });
console.log(selectedRows);
}}
/>
I want to create a custom select All checkbox in the toolbar which selects all the rows in the table upon selection. How do I achieve this?

you can change your checkbox like this :
<DataGrid
loading={loading}
pagination
checkboxSelection
isRowSelectable={isRowSelectable as SclTableProps['isRowSelectable']}
columns={columns as SclTableProps['columns']}
rows={rows}
selectionModel={selectionModel}
components={{
BaseCheckbox: (a) => loading ? <>loading...</> : (
<Checkbox checked={a.checked} /> // <-- this is imported from '#material-ui'
),
}}
/>
but I don't suggest you do this why? cause, when you use the custom checkbox in the data grid check box, lost its own functionality and you must write all logic by yourself

Re render component after fetching searched data in Material UI autocomplete

I'm using Material UI Autocomplete to get searched data, it works fine, but it's re-render after the search runs and clears the value without focus, then we have to click again to get fetched value.
here Is my auto-complete component
<AutoCompleteNewDesign
disableClearable
freeSolo
id="combo-box-demo"
onChange={(e, selectValue) => {
setInvoiceSelectedData(selectValue);
}}
options={invoiceSearchList}
getOptionLabel={option => (option ? String(option?.data1) : '')}
renderOption={option => (
<div>
{option.data1} - {option.data2}
</div>
)}
renderInput={params => (
<TextField
params={params}
name="name-here"
variant="outlined"
onChange={e => {
dispatch(
searchName(e.target.value);
}}
/>
)}
filterOptions={filterOptions}
/>
I used this reducer to store data which fecth when user searched
const { searchedNames } = useSelector(state => state.searchReducer);
How to call my dispatch asynchronous as well as prevent this re-render

React Hook Form dynamic required

I'm trying to make a form with two fields using react hook form where the required value of the text field depends on the value of the select drop down.
Here is my code:
const { handleSubmit, control, errors } = useForm();
const [isPickupPoint, togglePickupPoint] = useState(false);
const handleDestinationTypeChange: EventFunction = ([selected]) => {
togglePickupPoint(selected.value === "PICKUP_POINT");
return selected;
};
<Grid item xs={6}>
<InputLabel>Destination type</InputLabel>
<Controller
as={Select}
name="destinationType"
control={control}
options={[
{ label: "Pickup point", value: "PICKUP_POINT" },
{ label: "Shop", value: "SHOP" },
]}
rules={{ required: true }}
onChange={handleDestinationTypeChange}
/>
{errors.destinationType && (
<ErrorLabel>This field is required</ErrorLabel>
)}
</Grid>
<Grid item xs={6}>
<Controller
as={
<TextField
label="Pickup Point ID"
fullWidth={true}
disabled={!isPickupPoint}
/>
}
control={control}
name="pickupPointId"
rules={{ required: isPickupPoint }}
/>
{errors.pickupPointId && (
<ErrorLabel>This field is required</ErrorLabel>
)}
</Grid>
<Grid item xs={12}>
<Button
onClick={onSubmit}
variant={"contained"}
color={"primary"}
type="submit"
>
Save
</Button>
</Grid>
The isPickupPoint flag changes properly because the disabled prop of the textfield works fine. Only when the PICKUP_POINT option is selected the text field is active. But the required prop is not working, it is always false. When I try submitting the form when its empty the destinationType error label appears, but when I try to submit the form with the PICKUP_POINT option and empty pickupPointId field it passes with no errors.
How can I make this dynamic required prop work?

Based on the code here, it looks like isPickUpPoint is working as expected since it works for disable. Since you are using the same property for required, it should flow through. I would suspect that the bug may lie in your Controller component. I would take a look there and make sure that the property is what you expected to be.
Also for disabled the condition is !isPickUpPoint, so it will trigger when it's false.
For required the condition is isPickUpPoint so it will trigger when it's true.
That's also a bit of a disconnect since it looks like it's the same input.

Not able to get name property of select dropdown in Material UI React

I am trying to implement select dropdown but while handling the onChange method, I am getting event.target.name as undefined.When i select the 1st option , i need to access 'English'. How do i do that.
const [lang, setLang] = React.useState('')
const handleChange = event => {
setLang(event.target.value)
}
<Select
id="demo-simple-select"
value={lang}
onChange={handleChange}
displayEmpty
className={classes.selectEmpty}
renderValue={value => (
<div>
{fixed} <span>{value}</span>
</div>
)}
MenuProps={{
transformOrigin: {
vertical: "top",
horizontal: "right"
},
getContentAnchorEl: null
}}
>
<MenuItem value="" disabled>
<LanguageIcon className={classes.content} />
<span>
<Trans>Languages</Trans>
</span>
</MenuItem>
<MenuItem value={"en"}>English</MenuItem>
<MenuItem value={"ja"}>
<span>
<Trans>日本語 (Japanese)</Trans>
</span>
</MenuItem>
</Select>;

I think you misunderstood, what is attribute name from the event.target object. It's the name of your Select component and not certain text for MenuItem.
As far as I understood what you are trying to achieve, you have to use objects for values and not a string. For example - { name: 'English', code: 'en' }.
Here is codesandbox with working example. Unfortunately from code, you've provided can't find out what is {fixed}, <LanguageIcon>, <Trans>, etc. So couldn't adapt it fully

Dynamic FormControlLabel Radio inside RadioGroup is not getting checked

I'm using a RadioGroup component to display a dynamic list of Radio options using FormControlLabel. The dynamic radio options are successfully getting displayed and I'm able to retrieve the selected radio option using onChange in RadioGroup. However, when I check a radio option, that particular option does not appear "checked".
Here's the code I'm using:
export default class Book extends Component {
state = {
slot: null,
};
...
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
...
<FormControl component="fieldset" className={classes.formControl}>
<FormLabel component="legend">Select availability slot</FormLabel>
<RadioGroup
aria-label="Slot"
name="slot"
className={classes.group}
value={this.state.slot}
onChange={this.onChange}
>
{this.props.experience.availability !== null ? (
this.props.experience.availability.map(single => (
<FormControlLabel
key={single.id}
value={single.id}
control={<Radio color="primary" />}
label={single.title}
/>
))
) : ""}
// Some manual options in addition to the above dynamic list
<FormControlLabel
value="female"
control={<Radio color="primary" />}
label="Female"
/>
<FormControlLabel
value="male"
control={<Radio color="primary" />}
label="Male"
/>
</RadioGroup>
</FormControl>
...
}
this.props.experience.availability is an array of objects that I'm getting from a call I'm making to the backend. The call is being made in componentDidMount(). I use Redux, which makes the result available as a prop.
Now, if I manually add a few FormControlLabel components in the same RadioGroup, I can see that it's checked after selecting that option.
I've taken two screenshots - this is when the manual FormControlLabel is selected: https://ibb.co/pL5Fy6L and this is when one of my dynamic option is selected: https://ibb.co/Jq7mLN4
You can see that in the second one, the "Female" option gets unchecked but the option that I selected (20-06-2019) does not appear to be checked.
Can you please help me fix this?
Thanks in advance!

For anybody who might be facing the same issue, here's what I was doing wrong.
The problem was that I was passing an integer value to the value prop instead of a string like: value={single.id} so I added toString() to convert it to string like this: value={single.id.toString()} and it's working fine now.