Questions on KendoReact Forum

1 answer

596 views

Hello, is there support to display inline style in the Editor?

When pasting html data in ViewHtml (popup) tool that has inline styles in the tags it removes the styles and I get just the tags and content :) Is there a way to keep the styles and display them in the editor ?

General Discussions

answered on 27 Apr 2021

4 answers

1.9K+ views

[Solved] 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

555 views

[Solved] 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

247 views

[Solved] 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

544 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

718 views

[Solved] 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

207 views

[Solved] 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

412 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

179 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}