Scheduler retrieving data from custom editor

[Daniel]

     Hello everyone,

I have a custom dialog editor for the scheduler with three custom DropDownLists as you can see in my code here:

import React, {Component} from "react";

import {FormElement, Field} from '@progress/kendo-react-form';
import {Label, Error} from '@progress/kendo-react-labels';
import {TextArea} from '@progress/kendo-react-inputs';
import {DateTimePicker} from '@progress/kendo-react-dateinputs';
import ProjectsEditor from "./ProjectsEditor";
import VehiclesEditor from "./VehiclesEditor";
import {TokenContext} from "./Context";
import TaskTemplatesEditor from "./TaskTemplatesEditor";

class TaskFormEditor extends Component {
    // This line of code is making all the difference, I'm associating the
    // context of this component with the context I created!!! :D
    static contextType = TokenContext;

    constructor(props) {
        super(props);
        this.state = {
            projects: [],
            vehicles: [],
            taskTemplates: [],
            filteredVehicles: [],
            filteredTaskTemplates: [],
            selectedProjectId: null,
            selectedVehicleId: null,
            vehiclesDisabled: true,
            taskTemplatesDisabled: true
        };
        this.handleProjectsChange = this.handleProjectsChange.bind(this);
        this.handleVehiclesChange = this.handleVehiclesChange.bind(this);
    }

    handleProjectsChange(event) {
        this.setState({
            filteredVehicles: this.state.vehicles.filter(vehicle => vehicle.projectId === event.value.id),
            vehiclesDisabled: false,
            selectedProjectId: event.value.id
        });
    }

    handleVehiclesChange(event) {
        this.setState({
            filteredTaskTemplates: this.state.taskTemplates.filter(taskTemplate => taskTemplate.vehicleId === event.value.id),
            taskTemplatesDisabled: false,
            selectedVehicleId: event.value.id
        });
    }

    componentDidMount() {
        const config = {
            headers: {
                "Content-type": "application/json",
                "Authorization": `Bearer ${this.context}`,
            },
        };

        axios.get("api/getProjectsVehiclesTaskTemplates?", config)
            .then(res => {
                this.setState({
                    projects: res.data[0].map(dataItem => (
                        {
                            id: dataItem.id,
                            projectId: dataItem.project_id
                        }
                    )),
                    vehicles: res.data[1].map(dataItem => (
                        {
                            id: dataItem.id,
                            label: dataItem.label,
                            projectId: dataItem.project_id
                        }
                    )),
                    taskTemplates: res.data[2].map(dataItem => (
                        {
                            id: dataItem.id,
                            title: dataItem.title,
                            vehicleId: dataItem.vehicle_id
                        }
                    ))
                });
            });
    }

    render() {
        return (
            <FormElement horizontal={true}>
                <div className="k-form-field">
                    <Label>
                        Project
                    </Label>
                    <div className="k-form-field-wrap">
                        <Field
                            name={"ProjectId"}
                            component={(props) =>
                                (<ProjectsEditor
                                    value={this.state.selectedProjectId}
                                    projects={this.state.projects}
                                    handleChange={this.handleProjectsChange}/>)}
                        />
                        {/*{props.errors.Patient && <Error>{props.errors.Patient}</Error>}*/}
                    </div>
                </div>
                <div className="k-form-field">
                    <Label>
                        Vehicle
                    </Label>
                    <div className="k-form-field-wrap">
                        <Field
                            name={"VehicleId"}
                            component={(props) =>
                                (<VehiclesEditor
                                    value={this.state.selectedVehicleId}
                                    vehiclesDisabled={this.state.vehiclesDisabled}
                                    vehicles={this.state.filteredVehicles}
                                    handleChange={this.handleVehiclesChange}/>)}
                        />
                    </div>
                </div>
                <div className="k-form-field">
                    <Label>
                        Task Template
                    </Label>
                    <div className="k-form-field-wrap">
                        <Field
                            name={"TaskTemplateId"}
                            component={(props) =>
                                (<TaskTemplatesEditor
                                    taskTemplatesDisabled={this.state.taskTemplatesDisabled}
                                    taskTemplates={this.state.filteredTaskTemplates}/>)}
                        />
                        {/*{props.errors.Treatment && <Error>{props.errors.Treatment}</Error>}*/}
                    </div>
                </div>
                <div className="k-form-field">
                    <Label>
                        Note
                    </Label>
                    <div className="k-form-field-wrap">
                        <Field
                            name={"Comment"}
                            component={TextArea}
                            rows={1}
                        />
                    </div>
                </div>
                <div className="k-form-field">
                    <Label>
                        Start
                    </Label>
                    <div className="k-form-field-wrap">
                        <Field
                            name={"Start"}
                            component={this.props.startEditor}
                            as={DateTimePicker}
                            rows={1}
                            format="t"
                        />
                    </div>
                </div>
                <div className="k-form-field">
                    <Label>
                        End
                    </Label>
                    <div className="k-form-field-wrap">
                        <Field
                            name={"End"}
                            component={this.props.endEditor}
                            as={DateTimePicker}
                            rows={1}
                            format="t"
                        />
                    </div>
                </div>
            </FormElement>
        );
    }
}

export default TaskFormEditor;

 

And my problem is that when I save the form, I can't get none of these values. I want to retrieve the Field with the names: ProjectId, VehicleId and TaskTemplateId.

To give an example of one, the Field with ProjectId is:

import React, {Component} from "react";
import {DropDownList} from "@progress/kendo-react-dropdowns";

class ProjectsEditor extends Component {

    constructor(props) {
        super(props);
        console.log(this.props);
    }

    render() {
        return (
            <DropDownList
                onChange={this.props.handleChange}
                value={this.props.projects.find((p) => p.id === this.props.value)}
                data={this.props.projects}
                dataItemKey={"id"}
                textField={"projectId"}
            />
        );
    }
}

export default ProjectsEditor;

 

I want to get this information in m

handleDataChange({created, updated, deleted}) {
        this.setState({
            data: this.state.data.filter((item) => deleted.find(current => current.TaskID === item.TaskID) === undefined)
                .map((item) => updated.find(current => current.TaskID === item.TaskID) || item)
                .concat(created.map((item) => Object.assign({}, item, {TaskID: guid()})))
        });

        let data = (created.length !== 0) ? created : (updated.length !== 0) ? updated : deleted;

 console.log(data);

        let crudId = (created.length !== 0) ? 1 : (updated.length !== 0) ? 0 : -1;

        const mechanicId = data[0].PersonIDs;

        data = data.map(item => ({
            id: item.TaskID,
            start_date: this.convertToPhpDateTime(item.Start),
            end_date: this.convertToPhpDateTime(item.End),
            comment: null,
            task_template_id: item.taskTemplateId,
            user_time_spent: null,
            task_state_id: 2,
            priority_id: 3,
            periodicity_end_date: null,
            created_user_id: this.props.userId,
            changed_user_id: this.props.userId,
            active: true,
            deadline_execution: null
        }));

        const config = {
            headers: {
                "Content-type": "application/json",
                "Authorization": `Bearer ${this.props.token}`
            }
        };

        /*axios.post("api/saveTask", {
            data: data[0],
            crudId: crudId,
            mechanicId: mechanicId
        }, config);*/
    }

 

Thank you very much from your help.

Best Regards,

Daniel

[Stefan]

Hello, Daniel.

Please advise when the value of the editor is needed, when the form is saved (SAVE button clicked), or at a different stage.

By default, this information will be available inside the onDataChange event.

In the following example all of the custom editors values are part of the newly saved event:

https://stackblitz.com/edit/react-dnziuw?file=app%2Fmain.jsx

If the information is not there in the real application, ensure that the name of the Field component is the same as the object field name, as this is how the Form is matching them.

Regards,
Stefan
Progress Telerik