Telerik Forums / KendoReact
This is a migrated thread and some comments may be shown as answers.

Scheduler retrieving data from custom editor

1 Answer 104 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 15 Apr 2021, 04:12 PM

     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

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 16 Apr 2021, 01:11 PM

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Tags
General Discussions
Asked by
Daniel
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or