Questions on KendoReact Forum

4 answers

1.7K+ views

KendoReact DropDownButton Auto-Close Prevention

Hello,

I currently am working on a project where we need a dropdownbutton that displays a checklist list where multiple items can be selected/checked before the list closes.

I know that several other Kendo React components have an auto-close flag or similar feature, but so far I have been unable to prevent the DropDownButton component from auto-closing whenever one of the items in the dropdown is selected.

Is there some way (either some existing parameter or known workaround) to prevent the close event from happening "onItemClick" for the DropDownButton as I only want it to happen "onBlur"?

General Discussions

answered on 26 Apr 2021

2 answers

511 views

Datepicker and Arabic-Hindi Numbers

I'm trying to add a local date picker i was successful in localizing
everything in the picker except changing the numbers my code is:

import { DatePicker } from '@progress/kendo-react-dateinputs';

import {

IntlProvider,

LocalizationProvider,

load,

loadMessages,

} from '@progress/kendo-react-intl';

import currencyData from 'cldr-core/supplemental/currencyData.json';

import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';

import numberingSystems from 'cldr-core/supplemental/numberingSystems.json';

import weekData from 'cldr-core/supplemental/weekData.json';

import caGregorian from 'cldr-dates-full/main/ar-SA/ca-gregorian.json';

import dateFields from 'cldr-dates-full/main/ar-SA/dateFields.json';

import timeZoneNames from 'cldr-dates-full/main/ar-SA/timeZoneNames.json';

import numbers from 'cldr-numbers-full/main/ar-SA/numbers.json';

import React, { Component } from 'react';

import arMessages from '../config/kendo/ar-SA.json';

import { AppDateInput } from './AppDateInput';

import { AppPopup } from './AppPopup';

loadMessages(arMessages, 'ar-SA');

load(

likelySubtags,

currencyData,

weekData,

numbers,

caGregorian,

dateFields,

timeZoneNames,

numberingSystems

);

class AppDatePicker extends Component {

render() {

return (

<LocalizationProvider language='ar-SA'>

<IntlProvider locale='ar-SA'>

<DatePicker

popup={AppPopup}

dateInput={AppDateInput}

defaultValue={this.props.defaultValue}

onChange={this.props.onChange}

/>

</IntlProvider>

</LocalizationProvider>

);

}

see attached pic for result

know i can't change the numbers from 0123456789 to ٠١٢٣٤٥٦٧٨٩
any idea how to do that ?

thanks

Monther

General Discussions

answered on 26 Apr 2021

5 answers

221 views

Data Tools - Filter - EnumFilter

I would like to use the EnumFilter in the Data Tools Filter component and I'm not sure how to populate it. Are there any examples of this in use?

Thanks,

Richard.

General Discussions

answered on 23 Apr 2021

2 answers

484 views

KendoEditor does not display styles

I am using the KendoEditor and when I add table the table doesn't have borders or any style. When I test on your page the table is having (inspect element) this class and style

ProseMirror td, .ProseMirror th {
min-width: 1em;
border: 1px solid #ddd;
padding: 3px 5px;
vertical-align: top;
box-sizing: border-box;
position: relative;

}

But in my case this is missing, there is not a class for td for ProseMirror, and the only style that I get is this

.k-editor-content > .ProseMirror table {
white-space: pre-wrap;
}

Any idea what might be causing this problem ? :)

General Discussions

answered on 23 Apr 2021

1 answer

621 views

How to turn off autocomplete at the form level

When using the Form component how can I turn off autocomplete for the entire form? IE: autocomplete="off"

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Thank you

General Discussions

answered on 21 Apr 2021

2 answers

177 views

React Editor: Behave like normal input field?

Hello,

I have three questions about the Kendo React Editor:

Is it possible to move the toolbar to the right side of the editor instead of above it?
Is it possible to restrict the editor to being one line only (like a <input type="text"> and not a <textarea>)?
Is it possible to prevent the user from using key inputs (like Ctrl+B for bold)?

What I want to do is basically an editor that behaves like a normal input field but where I can have a custom dropdown for adding tags, preferably positioned to the right of the "input field".

What I have is an array of "tags" that I want to be able to add to a text field. The tags should be "stylable" like tags I had in a previous question (https://www.telerik.com/forums/creating-a-custom-editor-node-with-html-inside). Other than that I want the field to behave like a regular text field (i.e. no styling, no keyboard shortcuts etc.) and I figured that the easiest way was to create an editor with the above constraints.

Constraints #2 and #3 are most important, I can live without #1 if it's not possible.

General Discussions

answered on 21 Apr 2021

4 answers

343 views

Any typescript + kendo examples / best practices?

Hi, sorry for the broad question.

Im finding it quite hard to stay typed without explicitly casting when using handlers and custom renders (using grid and form). Are there anyway to avoid this?

General Discussions

answered on 19 Apr 2021

1 answer

137 views

Scheduler retrieving data from custom editor

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 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 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 className="k-form-field">

<Label>

Note

</Label>

<div className="k-form-field-wrap">

<Field

name={"Comment"}

component={TextArea}

rows={1}

/>

</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 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>

</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

General Discussions

answered on 16 Apr 2021

1 answer

171 views

Change DateTimePicker time do 24h format

Hello instead of displaying the time AM and PM 1-12 in the DateTimePicker could we display it just with 24 hours format ?

General Discussions

answered on 16 Apr 2021

7 answers

184 views

Passing token to Scheduler custom editor form

Hello everyone,

I've the following code:

render() {

return (

<Scheduler

height={"100%"}

data={this.state.data}

onDataChange={this.handleDataChange}

transport={{

token: this.props.token

}}

modelFields={{

id: "TaskID",

title: "Title",

description: "Comment",

start: "Start",

end: "End",

recurrenceRule: "RecurrenceRule",

recurrenceId: "RecurrenceID",

recurrenceExceptions: "RecurrenceException",

token: this.props.token

}}

editItem={TaskItem}

form={TaskForm}

editable={{

add: true,

remove: true,

drag: true,

resize: true,

edit: true

}}

group={{

resources: ["Persons"],

orientation: "horizontal"

}}

resources={[{

name: "Persons",

data: [

{text: "Sascha", value: 35, color: "#5392E4"},

{text: "Alex", value: 39, color: "#5392E4"},

{text: "Leonhard", value: 54, color: "#5392E4"},

{text: "Daniel", value: 91, color: "#5392E4"}

],

field: "PersonIDs",

valueField: "value",

textField: "text",

colorField: "color"

}]}

>

<DayView title="Day View"

workDayStart={"05:00"}

workDayEnd={"20:00"}

showWorkHours={true}

slotDuration={60}

slotDivisions={4}

/>

<WorkWeekView title="Week View"

workWeekStart={Day.Monday}

workWeekEnd={Day.Friday}

workDayStart={"05:00"}

workDayEnd={"20:00"}

showWorkHours={true}

slotDuration={60}

slotDivisions={4}

/>

</Scheduler>

);

}

And I need to pass a Bearer token property to my form you can see on the code above called TaskForm. So that on the TaskForm with the following code I can get this token on the this.props a pass it to other components. I need this so on many of the child components in this form I can make api calls with axios.

class TaskForm extends Component {

constructor(props) {

super(props);

}

/*const requiredValidator = React.useCallback(

(value) => (value === undefined || value === null || value === ''

? 'Field is required.'

: undefined),

[]

);

const formValidator = (_dataItem, formValueGetter) => {

let result = {};