Overview

Trigger a state update of a parent item through its children, by utilizing the built-in React context and hooks functionalities.

The SchedulerEditItem provides each of it's value/callback pairs through context to be available for each of its child components.

This architecture allows the user to define what is happening on every action. The SchedulerEditItem already has a default callback handlers, which the developer can override if needed, or explicitly call after custom logic is executed.

Accessing the Parent State

The SchedulerEditItem internal state can be modified by accessing the value/callback pair you want to modify, and call the callback to trigger an action.

Accessing the parent state through its children does not toggle controlled-state of the component, but rather define when a state change must happen. If you want to control the internal state from outside, please refer to the SchedulerEditItem Controlled State

Accessing the internal state can be done through:

• Custom Hooks
• Context.Consumer

Custom Hooks

The following hooks are available for each child Functional Component of the SchedulerEditItem:

• useSchedulerEditItemDragItemContext
• useSchedulerEditItemFormItemContext
• useSchedulerEditItemRemoveItemContext
• useSchedulerEditItemResizeItemContext
• useSchedulerEditItemShowOccurrenceDialogContext
• useSchedulerEditItemShowRemoveDialogContext

In order the trigger a state change, use the desired hook inside your custom component:

Copy Codeconst CustomSchedulerItem = (props) => {
    const [formItem, setFormItem] = useSchedulerEditItemFormItemContext();

    const handleClick = React.useCallback(
        () => { setFormItem(props.dataItem); },
        [setFormItem, props.dataItem]
    )

    return (<SchedulerItem {...props} onClick={handleClick} />)
}

Context.Consumer

The following Contexts are available for each child Class Component of the SchedulerEditItem:

• SchedulerEditItemDragItemContext
• SchedulerEditItemFormItemContext
• SchedulerEditItemRemoveItemContext
• SchedulerEditItemResizeItemContext
• SchedulerEditItemShowOccurrenceDialogContext
• SchedulerEditItemShowRemoveDialogContext

In order the trigger a state change, use the desired context inside your custom component:

Copy Codeclass CustomSchedulerItem extends React.Component {
    render() {
        return (
            <SchedulerEditItemFormItemContext.Consumer>
            {([formItem, setFormItem]) => (
                <SchedulerItem
                    {...this.props}
                    onClick={() => { setFormItem(this.props.dataItem) }}
                />
            )}
            </SchedulerEditItemFormItemContext.Consumer>
        )
    }
}

Custom Action Binding

Providing custom bindings for a specific component provides the ability to bind specific actions to state changes. This allows the developer to define a middleware to change what is happening on a specific event.

For example, the default onDoubleClick handler is changing the internal formItem state from null to the props.dataItem (if props.isRecurring is false) which leads to the form dialog to be rendered, thus triggering edit. If the application requires such action to be triggered on onClick, the developer must handle the onClick callback of the SchedulerItem and set the corresponding formItem state of it's SchedulerEditItem parent.

The following example extends the Attaching callback handlers demo, to provide editing through the visualized popup.

Suggested Links

• API Reference of the Scheduler
• Scheduler Context
• Slot Context
• SchedulerEditSlot
• SchedulerSlot
• KendoReact Scheduler