I want to try update modelValue and chang value in datepicker
watch(range, (range) => {
emit("update:modelValue", range);
console.log("update:modelValue", range)
});
watch(() => props.modelValue,
(modelValue) => {
range.value = {
start: modelValue.start,
end: modelValue.end,
};
}
);
is working but is delay and show error [Vue warn]: Maximum recursive updates exceeded in component .
Why you need the first watch?
watch(() => props.modelValue,
(modelValue) => {
// Maybe some if condition check to avoid unnecessary calls
range.value = {
start: modelValue.start,
end: modelValue.end,
};
emit("update:modelValue", range);
}
);
Related
I want to re-run
headerComponentFramework: (params) => {
console.log('xxx');
},
every single time the data value changes
<AgGridReact
defaultColDef={defaultColDef}
rowData={data}
columnDefs={columnDefs}
/>
To refresh a header, you can use the Grid API method refreshHeader.
To refresh a header when the data changes, you can listen to the following Grid Events: onCellValueChanged, onRowDataChanged and onRowDataUpdated.
See this implemented in the following plunkr.
const rowDataChanged = (params) => {
console.log('rowDataChanged');
params.api.refreshHeader();
};
const rowDataUpdated = (params) => {
console.log('rowDataUpdated');
params.api.refreshHeader();
};
const cellValueChanged = (params) => {
console.log('cellValueChanged');
params.api.refreshHeader();
};
So as I said in the title, I can't use onSearch and onInputChange at the same time. If I try to, onSearch gets ignored. Can you tell me why or is there an alternative to onInputChange? Im using AsyncTypeahead in a Form, so I need the values when I click a button.
const [from, setFrom] = useState('');
const onSearchStart = (query) => {
setTypeAhead({
...typeAhead,
startIsLoading: true
})
setFrom(query)
getStations(query).then(r => {
setTypeAhead({
...typeAhead,
startIsLoading: false,
startOptions: r || []
})
})
}
return(
<AsyncTypeahead
id={"from"}
isLoading={typeAhead.startIsLoading}
options={typeAhead.startOptions}
onInputChange={setFrom}
onSearch={onSearchStart}
/>
)
This isn't the whole code, but it shows everything that is causing the error
As a workaround you can use useRef to not trigger the re-render. Here is the code:
const fromRef = useRef('');
const onSearchStart = (query) => {
...
}
return(
<AsyncTypeahead
...
onInputChange={(text) => {
fromRef.current = text;
}}
onSearch={onSearchStart}
/>
)
Sup ya. Just wanna specify can we use it? I think we can just wanna be sure 100%
https://codesandbox.io/s/redux-toolkit-state-new-array-4sswi?file=/src/redux/slices/slice.js:111-425
const someSlice = createSlice({
name: "someSlice",
initialState: {
users: [],
status: ""
},
reducers: {
actionSuccess: (state, { payload }) => {
state.users = payload.users;
},
actionFailure: (state) => {
// can we use here function?
statusHandler(state)
}
}
});
A reducer should not trigger any side effects. That is, it should not do anything other than change the contents of the state. So you should not call a statusHandler which would trigger external effects.
If your statusHandler function does nothing but update the state, that does seem to work in my testing and I'm not aware of any reason why it shouldn't be okay.
Redux Toolkit uses Immer behind the scenes to deal with immutable updates, so this question basically boils down to whether these two functions, updatedInline and updatedExternally, are equivalent. They are, as far as I can tell.
const {produce} = immer;
const initialState = {
status: ''
};
const updatedInline = produce( initialState, draft => {
draft.status = 'failed';
})
const mutateStatus = (state) => {
state.status = 'failed';
}
const updatedExternally = produce( initialState, mutateStatus )
console.log("Updated Inline: \n", updatedInline);
console.log("Updated Externally: \n", updatedExternally);
<script src="https://cdn.jsdelivr.net/npm/immer#8.0.1/dist/immer.umd.production.min.js"></script>
I am trying to build data table using react and react-data-grid version "^7.0.0-canary.16",
The render method looks like this:
render() {
return (
<div className={"component"}>
<ReactDataGrid width={600} height={400}
rowKey="id"
columns={this.state.columns}
rows={this.state.rows}
onRowClick={this.onRowClick}
rowSelection={{
showCheckbox: true,
enableShiftSelect: true,
onRowsSelected: this.onRowsSelected,
onRowsDeselected: this.onRowsDeselected,
selectBy: {
indexes: this.state.selectedIndexes
}
}}
/>
</div>
)
}
So following the documentation on page https://adazzle.github.io/react-data-grid/docs/examples/row-selection
it should display checkbox in first column and when I select the checkbox it should call method this.onRowsSelected.
Alas, no checkbox is shown and no matter how I click the this.onRowsSelected method is never called.
On the other hand the method this.onRowClick is called, whenever I click somewhere in the table.
Does anyone have experience with this?
It seems to be showing the checkboxes with "react-data-grid": "6.1.0"
Although, I'm having issue with the checkboxes when we filter the data. The rowIdx changes and we lose context of that was previously selected. We want to make BE calls on selected Data. I tried changing it to use the row.id but no luck. It messes up the selection.
Here is a hook for managing the selection
import {useState} from 'react';
export const useRowSelection = () => {
const [selectedIndexes, setSelectedIndexes] = useState([]);
const onRowsSelected = rows => {
setSelectedIndexes(prevState => {
return prevState.concat(rows.map(r => r.rowIdx));
});
};
const onRowsDeselected = rows => {
let rowIndexes = rows.map(r => r.rowIdx);
setSelectedIndexes(prevState => {
return prevState.filter(i => rowIndexes.indexOf(i) === -1);
});
};
return {
selectedIndexes,
onRowsDeselected,
onRowsSelected,
};
};
Pass them to the RDG
const {selectedIndexes, onRowsDeselected, onRowsSelected} = useRowSelection();
const rowSelectionProps = enableRowSelection
? {
showCheckbox: true,
enableShiftSelect: true,
onRowsSelected: onRowsSelected,
onRowsDeselected: onRowsDeselected,
selectBy: {
indexes: selectedIndexes,
},
}
: undefined;
<ReactDataGrid
columns={columnDefinition}
getValidFilterValues={getFilterValues}
rowGetter={i => filteredData[i]}
rowsCount={filteredData.length}
onAddFilter={filter => handleOnAddFilter(filter)}
onClearFilters={() => handleOnCleanFilters()}
toolbar={toolbar}
contextMenu={contextMenu}
RowsContainer={ContextMenuTrigger}
rowSelection={rowSelectionProps}
rowKey="id"
/>
I am building a scheduling app. I am able to sort the database using the CJuiDatePicker widget's "onSelect" option. Now I am trying to use the "beforeShow" option to ensure that only dates that have tasks can be selectable. Can anyone help?
$this->widget('zii.widgets.jui.CJuiDatePicker', array(
'model'=>$dataProvider,
'attribute'=>'start_time',
'options'=>array(
'dateFormat' => 'yy-mm-dd',
'changeMonth' => true,
'changeYear' => true,
'beforeShowDay' => 'js:$.datepicker.noWeekends',
'beforeShow' => "js:function Check_Alert2(){
Check_Alert();
}
",
'onSelect' => "js:function SearchFunc() {
var data = $('input').serialize();
var url = document.URL;
var params = $.param(data);
url = url.substr(0, url.indexOf('?'));
window.History.pushState(null, document.title,$.param.querystring(url, data));
}"
),
'htmlOptions'=>array(
'style'=>'height:20px;',
'readonly' =>true,
),
));
i am still using the original code. I need an array generated within the beforeshowday. When i run your code it fails on the getdates() function call.
'beforeShowDay' => 'js:function(date){
var array = ["2013-10-30","2013-10-31","2013-12-18","2013-12-25"];
var string = jQuery.datepicker.formatDate("yy-mm-dd", date);
if (array.indexOf(string) == -1){
return [false,"", "No event"];
} else return [true,"", "Event"];