Questions on KendoReact Forum

1 answer

411 views

Can remove Upload customListItem from UI, but removeURL with method is not being fired.

```

<button 
                                        type="button"
                                        className="k-button -k-button-icon k-flat k-upload-action" 
                                        
                                        onClick={(e) => this.actualUploader.current.onRemove(el.uid)}
                                        tabIndex="-1"
                                    >
                                        <span aria-label="Remove" title="Remove" className="k-icon k-delete k-i-x">
                                        </span>
                                        {/* remove (doesnt work yet) */}
                                    </button>
 

```

I'm using a ref to access the 'Upload' react element and fire the onRemove method. My assumption is that it will interact with my removeURL using the DELETE method which I've specified. However, I can only get the image to disappear from the state, and no HTTP Request is fired. What can I do to get this HTTP method fired?

Upload

answered on 17 May 2021

2 answers

1.9K+ views

Is there onSelect event for the Autocomplete component?

We are using the auto complete component that does a fetch for server side data based on the users entered text. We need to take action once they select an item from the list.

I don't see an onSelected event for the Autocomplete box. We did see it on (I believe) the combo box. Image of event attached.

We tried the combo box but didn't get the functionality we were looking for with the typeahead search.

The closest thing I found to working around the issue was to use itemRender and attach the click event to the div, but this is more of a hack as you can click just outside the div and still select what you want without firing the onclick.

const itemChildren = (
            //TODO, How can I add the onclick to the LI instead of this div.
            <div onClick={onClickPatientSelect} style={{ width: "100%", backgroundColor: "lightseagreen" }}>
                { li.props.children}
            </div>
        );
        return React.cloneElement(li, li.props, itemChildren);

Here is the current autocomplete code

<AutoComplete
            data={searchPatientData}
            value={searchText}
            onChange={onChange}
            textField="SearchDisplay"
            placeholder="Search for a patient"
            loading={loading}
            itemRender={itemRender}
        />

AutoComplete

answered on 17 May 2021

1 answer

238 views

Kendo React Grid appearing behind Window component

I am using a Kendo React Grid inside a Kendo React Dialog Window component.

When the Window first displays the user inputs a value in a text input and clicks a button to load the grid. The Grid seems to appear behind the Window. I tried adding the:

.k-animation-container {
  z-index: 10003;
}

to my App.css file. This doesn't help. Do I need to put the style in the Window component code, or is this different from the animation-container issue/problem?

Some additional information:

When I open the Dialog Window I see this:

If I type an order number and click "View" I see this:

Part of the top of the grid where the headers should be and the scroll bar appear. That tells me the data loaded and the React state variable updated and caused the grid to redraw.

If I click the minimize icon in the window header and then the click restore icon I see the data:

I can share the code if it helps.

Thanks!

answered on 17 May 2021

1 answer

88 views

Conversational UI Keyboard Navigation

According to https://www.telerik.com/kendo-react-ui/components/conversationalui/keyboard-navigation/ I should be able to use the keyboard to select suggested actions, but I can see in the DOM that they all have `tabindex="-1"` which makes them not focusable.

Accessibility

Conversational UI

answered on 13 May 2021

1 answer

111 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

206 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

845 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

83 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

587 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

933 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>
    );
}