Questions on KendoReact Forum

1 answer

137 views

Can I only use several components from the react product?

Hi,

If i only use a few react components from your product, can i only package these components in my release and not used components will not be included?

General Discussions

answered on 10 May 2021

1 answer

245 views

Scheduler load resources data from api

Hello everyone,

I'm trying to load and set the resources from an api call as you can see in the following code with the line in resources with: "data: this.state.vehicles".

import React, {Component} from "react";
import {Scheduler, TimelineView} from "@progress/kendo-react-scheduler";
import {Day, ZonedDate} from "@progress/kendo-date-math";
import {guid} from "@progress/kendo-react-common";
import TaskForm from "../components/TaskForm"
import {TaskItem} from "../components/TaskItem";
import axios from "axios";

class DriveShiftsSchedulerPage extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
            date: new Date,
            vehicles: []
        }

        this.handleDataChange = this.handleDataChange.bind(this);
        this.handleDateChange = this.handleDateChange.bind(this);
    }

    loadWeekDriveShiftsAndVehicles(date) {

        let curr = new Date(date);
        let first = curr.getDate() - curr.getDay() + 1;
        let last = first + 6;

        let startDate = new Date(curr.setDate(first));
        let endDate = new Date(curr.setDate(last));

        startDate.setHours(0, 0, 0, 0);
        endDate.setHours(23, 59, 59, 999);

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

        axios.get("api/getVehiclesAndDriveShifts?start_date=" + this.convertToPhpDateTime(startDate) +
            "&end_date=" + this.convertToPhpDateTime(endDate), config)
            .then(res => {
                this.setState({
                    vehicles: res.data[0].map(dataItem => (
                        {
                            text: dataItem.label,
                            value: dataItem.id,
                            color: "#5392E4"
                        }
                    ))
                });
            });

    }

    componentDidMount() {
        let curr = new Date;
        this.loadWeekDriveShiftsAndVehicles(curr);
    }

    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;

        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: item.Comment !== undefined ? item.Comment : null,
            task_template_id: item.TaskTemplateId !== undefined ? item.TaskTemplateId.id : null,
            vehicle_id: item.VehicleId !== undefined ? item.VehicleId.id : null,
            user_time_spent: null,
            task_state_id: item.TaskStateId !== undefined ? item.TaskStateId.id : 2,
            priority_id: item.PriorityId !== undefined ? item.PriorityId.id : 3,
            periodicity_end_date: null,
            created_user_id: this.props.userId,
            changed_user_id: this.props.userId,
            active: true,
            deadline_execution: null,
            title: item.Title
        }));

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

        axios.post("api/saveTask", {
            data: data[0],
            crudId: crudId,
            mechanicId: mechanicId
        }, config).then(res => {
            //console.log(res);
        });
    }

    handleDateChange(event) {
        const newDate = event.value instanceof ZonedDate ? event.value._utcDate : event.value;
        const oldDate = this.state.date;

        //console.log(newDate);

        if (oldDate.getWeekNumber() !== newDate.getWeekNumber()) {
            this.loadWeekDriveShiftsAndVehicles(newDate);
        }

        this.setState({
            date: newDate
        });
    }

    render() {
        return (
            <Scheduler
                height={"100%"}
                data={this.state.data}
                onDataChange={this.handleDataChange}
                onDateChange={this.handleDateChange}
                date={this.state.date}
                modelFields={{
                    id: "TaskID",
                    title: "Title",
                    description: "Comment",
                    start: "Start",
                    end: "End",
                    projectId: "ProjectId",
                    vehicleId: "VehicleId",
                    taskTemplateId: "TaskTemplateId",
                    recurrenceRule: "RecurrenceRule",
                    recurrenceId: "RecurrenceID",
                    recurrenceExceptions: "RecurrenceException",
                    color: "color"
                }}
                editItem={TaskItem}
                form={TaskForm}
                editable={{
                    add: true,
                    remove: true,
                    drag: true,
                    resize: true,
                    edit: true
                }}
                group={{
                    resources: ["Vehicles"],
                    orientation: "vertical"
                }}
                resources={[{
                    name: "Vehicles",
                    data: this.state.vehicles,
                    field: "VehicleIDs",
                    valueField: "value",
                    textField: "text",
                    colorField: "color"
                }]}
            >
                <TimelineView title="Timeline View"
                              slotDuration={60}
                              slotDivisions={1}
                              numberOfDays={2}
                              workDayStart={"00:00"}
                              workDayEnd={"23:59"}
                              showWorkHours={true}
                />
            </Scheduler>
        );
    }

    loadWeekTasks(date) {

        let curr = new Date(date);
        let first = curr.getDate() - curr.getDay() + 1;
        let last = first + 6;

        let startDate = new Date(curr.setDate(first));
        let endDate = new Date(curr.setDate(last));

        startDate.setHours(0, 0, 0, 0);
        endDate.setHours(23, 59, 59, 999);

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

        axios.get("api/getTasks?start_date=" + this.convertToPhpDateTime(startDate) +
            "&end_date=" + this.convertToPhpDateTime(endDate), config)
            .then(res => {
                this.setState({
                    data: res.data.map(dataItem => (
                        {
                            TaskID: dataItem.id,
                            Start: this.parseAdjust(dataItem.start_date),
                            End: this.parseAdjust(dataItem.end_date),
                            isAllDay: false,
                            ProjectId: {
                                id: dataItem.template !== null ? dataItem.template.vehicle.project.id : (dataItem.vehicle !== null ? dataItem.vehicle.project.id : undefined),
                                projectId: dataItem.template !== null ? dataItem.template.vehicle.project.project_id : (dataItem.vehicle !== null ? dataItem.vehicle.project.project_id : undefined)
                            },
                            VehicleId: {
                                id: dataItem.template !== null ? dataItem.template.vehicle.id : (dataItem.vehicle !== null ? dataItem.vehicle.id : undefined),
                                label: dataItem.template !== null ? dataItem.template.vehicle.label : (dataItem.vehicle !== null ? dataItem.vehicle.label : undefined)
                            },
                            TaskTemplateId: {
                                id: dataItem.template !== null ? dataItem.template.id : undefined,
                                title: dataItem.template !== null ? dataItem.template.title : undefined
                            },
                            TaskStateId: {
                                id: dataItem.task_state_id
                            },
                            PriorityId: {
                                id: dataItem.priority_id
                            },
                            Comment: dataItem.comment === null ? undefined : dataItem.comment,
                            Title: dataItem.title === null ? undefined : dataItem.title,
                            PersonIDs: dataItem.users[0].id,
                        }
                    ))
                });
            });

    }

    convertToPhpDateTime(date) {
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hours = date.getHours();
        const minutes = date.getMinutes();
        const seconds = date.getSeconds();
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

    parseAdjust(date) {
        return new Date(date);
    };
}

export default DriveShiftsSchedulerPage;

It happens that the vertical scroll bar is shown without being needed. In my case it shows the vertical scroll bar and it isn't needed at all because of the few elements that are loaded. I also get an Warning saying `NaN` is an invalid value for the `width` css style property.

This problem doesn't happen if I set the resources data explicitly like for example:

data: [
                        {text: "Sascha", value: 35, color: "#5392E4"},
                        {text: "Alex", value: 39, color: "#5392E4"},
                        {text: "Daniel", value: 91, color: "#5392E4"},
                        {text: "Planned", value: 200, color: "#5392E4"}
                    ]

So I ask, is there a way to load the resources data on the componentDidMount method from an api, and have everything working well with the scheduler as like the data was inserted explicitly like on the code above?

Thanks in advance.

Best Regards,

Daniel

Scheduler

answered on 10 May 2021

8 answers

912 views

KendoReact licensing when using scripts instead of webpack

I have an existing web application where I'm trying to introduce new functionality using React and KendoReact. I am using npm but not webpack.

I can successfully load the scripts per the instructions (both from the CDN as shown, and from the npm packages using the versions in the dist/cdn directories).

However, it's complaining about the license not being activated:

Progress KendoReact

kendo-react-intl.js:1 License activation failed for @progress/kendo-react-intl

No license found.

See https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning for more information.

The Dojo examples on the instruction page exhibit this behavior too.

I've installed and activated the kendo-licensing package per the instructions, and included the now-licensed dist/index.js script in my page before any other KendoReact scripts. I still get the licensing error, though.

Is there any way to license an application that's only using prebuilt scripts?

General Discussions

answered on 05 May 2021

1 answer

102 views

Is it possible to animate a shape?

Hello,

I am trying to animate a shape (circle) to slide from left to right. I see that there are Animations components available and I have gone through examples. However, since all examples are made as Class components, and the way I draw the shape is with function component drawCircle(), I'm having trouble understanding how to access the circle object inside the component where I'm actually doing the animation.

drawCircle():

import { Circle, geometry } from '@progress/kendo-drawing';
const { Circle: GeomCircle } = geometry;

export default function drawCircle(surface) {
  const geometry = new GeomCircle([ window.innerWidth / 2,  window.innerHeight / 2 ], 40);
    const circle = new Circle(geometry, {
        stroke: { color: "red", width: 1 },
        fill: {color: "red"},
    });

  surface.draw(circle);
}

AnimateCircle:

import * as React from 'react';
import { Zoom } from '@progress/kendo-react-animation';

class AnimateCircle extends React.Component {
    constructor(props) {
        super(props);
        this.state = { show: true };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const { show } = this.state;
        const children = show ? (<p>Effect</p>) : null;

        return (
          <div>
            <dl>
              <dt>
                Zoom:
              </dt>
              <dd>
                <button className="k-button" onClick={this.onClick}>Animate</button>
              </dd>
            </dl>

            <Zoom>
              {children}
            </Zoom>
          </div>
        );
    }
}

export default AnimateCircle;

So, my idea was to somehow pass the circle object to a render method. Just like there is the paragraph Effect, I want to have that circle. I get an error that objects cannot be passed as React children.

I would appreciate if somebody could point me in the right direction.

Animation

answered on 04 May 2021

1 answer

648 views

React grid filtering

Hello Everyone!

I use Kendo react data grid. I have the filterable setting enabled. I have the state of the filter stored in the react state. When [onDataStateChange] fires, I save the new state - as in the demo. My problem is that the [onDataStateChange] event is fired whenever the text in the filter changes, which causes performance issues, especially if I use server side pagiing. Is it possible to define deboucing, or some other kind of search delay? I know I can delay the api call to the server side. But filtering over current data is in progress, which is an unwanted effect. In Jquery grid, the filter is fired after typing the Enter key, this is also sufficient. But I can't implement it for react grid.

Thank you very much.
Vlado

Grid

answered on 04 May 2021

1 answer

999 views

Grid not sorting or filtering (no state change)

Hi All

I am using the below functional component.

It triggers the function setGridState1 when any sort, filter, etc changes are made but the rows do no actually change in the grid.

Is there something simple that I could be missing here

const ReferralListSeg: React.FC<ReferralListSecProps> = (props: ReferralListSecProps) => {
    const [referrals, setReferrals] = React.useState<Referral[]>([]);
    const [gridState, setGridState] = React.useState({ filter: null, group: null, skip: 0, sort: null, take: 100, editField: undefined });

    const setGridState1 = (e) => {
        const { filter, group, skip, sort, take } = e.dataState;
        const newState = { filter, group, skip, sort, take, editField: undefined };
        setGridState(newState);
    }

    const totalRecords = (): number => {
        return referrals.length;
    }

    React.useEffect(() => {
        axios.get(apiAppendCode(apiURL('/ClientReferralsOpen/' + props.clientid)))
            .then((response) => {
                setReferrals(response.data);
            }, (error) => {
                debugger;
            });
    }, []);

    React.useEffect(() => {
    }, [gridState, setGridState]);

    return (
        <div className="container-fluid">
            {referrals &&
                <Grid
                    filterable={true}
                    sortable={true}
                    resizable={true}
                    pageable={true}
                    data={referrals}
                    total={totalRecords()}
                    {...gridState}
                    onDataStateChange={setGridState1}
                >
                    <Column sortable={true} field="createdon" title="Created" width="150px" cell={KendoGridDateCell} />
                    <Column field="name" title="Name" width="250px" />
                    <Column field="status" title="Status" cell={KendoGridRefStatusCell} />
                    <Column filterable={false} cell={KendoGridNavRefCell} width="180px" />
                </Grid>
            }
        </div>
    );
}

Grid

answered on 03 May 2021

2 answers

481 views

editable master-detailgrid loses focus on update

Hi,

I have a requirement to implement an editable master-detailgrid.

After updating a child-record, the master needs to be updated. The update is triggered by tabbing out of the current cell. Then the sum is calculated and updated in the master-grid.

My problem is, that after updating the master-grid , the child looses its focus.

Here is a simplyfied version of my project:

https://stackblitz.com/edit/react-ctg3nj

Any help would be appreciated.

Regards

Grid

updated answer on 30 Apr 2021

1 answer

352 views

How to draw a circle?

This is a very straightforward question, and I'm sure the answer is as well, but I can't seem to figure it out. I want to be able to draw a simple shape, in this case, a circle. Here is what I did:

RenderSurface.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Surface } from '@progress/kendo-drawing';

import drawCircle from './DrawCircle';

class RenderSurface extends React.Component {
  surface;
  componentDidMount() {
    drawCircle(this.createSurface());
  }
  createSurface = () => {
    const element = ReactDOM.findDOMNode(this);

    this.surface = Surface.create(element);

    return this.surface;
  }
  render() {
    return (<div id="surface" />);
  }
}

export default RenderSurface;

DrawCircle.jsx

import { geometry } from '@progress/kendo-drawing';
const { Circle } = geometry;


export default function drawCircle(surface) {
  const circle = new Circle([100, 100], 80, {
    stroke: { color: "red", width: 1 },
    color: "rgb(255, 0, 0)",
  });

  surface.draw(circle);
}

App.js

import '@progress/kendo-theme-default/dist/all.css';
import './App.scss';
import React from 'react';
import RenderSurface from './components/RenderSurface';

function App() {
  return (
    <div className="App">
      <RenderSurface/>
    </div>
  );
}

export default App;

When I run this, I get the following error:

TypeError: _node_map__WEBPACK_IMPORTED_MODULE_4__.default[srcElement.nodeType] is not a constructor

I though it might have to do with bad import, but whatever I tried, it's always this error. What am I doing wrong?

Drawing

answered on 30 Apr 2021

1 answer

254 views

Popup Enter and Exit Direction

Hi,

i'm using the popup component in Kendoreact and i tried to change the anmiation enter and exit direction from down and up to right and left with no luck any idea?

Thank You

Monther

Animation

Popup

answered on 30 Apr 2021

8 answers

1.5K+ views

Setting the default rendered font in the KendoReact Editor

How can i set the default rendered font in the KendoReact Editor? When the Editor renders, the content is set to the browser default font (times new roman for me). I don't want to enable users to CHANGE the font, I just want to set what the text looks like in the browser to fit the theme of the rest of my form. To further clarify, I don't want to have the editor serialize the font setting when submitting the form, and I don't want to add the font selector in the toolbar. I just want the appearance of a different font in the editable area than browser default.

I see 2 examples in the Editor documentation. The overview example appears to use browser default, and the Custom Rendering Example has the font set to a different font, but it is unclear how that is happening.

Overview Example:

https://www.telerik.com/kendo-react-ui/components/editor/

Custom Rendering Example:

https://www.telerik.com/kendo-react-ui/components/editor/custom-rendering/

General Discussions