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 = {}; result.Patient = [ requiredValidator(formValueGetter('Patient')) ].filter(Boolean).reduce((current, acc) => current || acc, ''); result.Treatment = [ requiredValidator(formValueGetter('Treatment')) ].filter(Boolean).reduce((current, acc) => current || acc, ''); return result; };*/ componentDidMount() { console.log(this.props); } render() { return ( <SchedulerForm {...this.props} editor={TaskFormEditor} dialog={TaskDialog} /*validator={formValidator}*/ /> ); }}export default TaskForm;
When I double-click an empty time slot in the Week View, I arrive at the new event editor. The default duration for a new meeting is 15 minutes (likely the result of my slotDivisions and slotDuration properties, see below). I would like this default to be 30 minutes while retaining the behavior where time of day is listed on the left hand side, with slots starting every 15 minutes.
I have my scheduler configured thus:
<Scheduler
data={data}
editable={true}
onDataChange={handleDataChange}
resources={resources}
>
<WeekView slotDivisions={1} slotDuration={15} />
</Scheduler>
Is there a property I can set? Or perhaps is there an event handler I can use to manually tweak the scheduled end time when starting to edit a new event?
Hello,
first I want to say that I have been trying to find the solution in this forum, on StackOverflow and in the examples posted by ProseMirror but so far I have been unable. I have tried some suggestions but non have helped me. If the answer is somewhere I have already looked (or not looked) I apologize.
I have a KendoReact Editor which can be pre-filled with a value from an API. This value can contain "custom tags" looking like this
${some_tag_key}
or like this
<span style={{visibility: 'hidden'}}>$</span>some_tag_key<span style={{visibility: 'hidden'}}>$</span>
These tags are used by the API to parse a text for an email, and the editor is used to create difference standardized email templates. An example of a full text coming from the API would be:
<p>Hello ${receiver},</p> <p>Welcome to this page!</p> <p> Best regards<br> <span style={{visibility: 'hidden'}}>$</span>sender<span style={{visibility: 'hidden'}}>$</span> </p>
I also have a list of "custom tags" the user should be able add to the email template using a dropdown. I can focus on either of the above "tag types", and I don't need to support both.
I have some prerequisites:
Therefore I am trying to create a custom node to put these tags in. My thought is that any tags coming from the API should be translated into this custom node, and any tags added using a dropdown should also be this custom node, and when exported to HTML have the code of a tag.
I have focused on the second solution ("<span style={{...") since it looked more straight forward to me, but I'm open to use the other one if it might be easier. This is what I have done so far: [https://stackblitz.com/edit/react-ts-1hlrqt](https://stackblitz.com/edit/react-ts-1hlrqt).
But now I am stuck. I have three questions:
Thanks in advance!
Hey everyone,
I'm considering KenoReact for some upcoming projects. It looks like an excellent component library.
I have one question regarding themes. Judging by the documentation it appears that themes can only be customized by overwriting SCSS variables directly within the SCSS file before the theme is imported. Theme customization in general appears somewhat limited in that there doesn't seem to be any way to programmatically override the theme.
For instance, if I wanted to allow a client to pick their own theme colours via a colour picker, save the colours to DB and then use those values in the theme I don't see any clear way to do this. For instance this type of implementation would be possible with Material-UI theming. One possibility is to use the styled components integration to override the theme? Though I imagine this might be somewhat cumbersome.
Any insight would be appreciated, thank you!

Hello,
Yesterday I got great help from Nikolay in creating a custom editor node, see https://www.telerik.com/forums/creating-a-custom-editor-node-with-html-inside. Now I would like to extend his solution so that when a user types (for example) `${name}`, it will be converted into my new node.
I looked at https://www.telerik.com/kendo-react-ui/components/editor/plugins/#toc-input-rules and tried to add this to the code solution from Nikolay. This is my StackBlitz so far: https://stackblitz.com/edit/react-y3dx71-uqujbr?file=app%2Fmain.jsx
On line 55, I added code for creating the new rule, and on line 78 I add the new rule to the editor plugins. But this does not seem to work, when I input something that I thought would match the rule, nothing happens.
What am I doing wrong here?
Also, I would like to add a condition to the rule: It should only be converted if the text matches one of the "code" props in the "shortcodes" array in InsertShortcodeTool.tsx. I tried looking at match property in the input rules documentation, but honestly I don't understand how it works.
I ran into the same problem illustrated here: https://www.telerik.com/forums/inline-cell-edit-functional
However the solution is unusable with large lists (even with paging) due to the obvious iterations, the lag between character inputs is horrendous. This is not an issue with other inputs such as the number input editor, only the text editor. Has there been any discussion surrounding this, the input control should keep track of this independently instead of needing to cycle through the entire data list on every keystroke.
Thanks
I am seeing some weird behavior when it comes to resizing locked columns in the grid. Can you confirm that it is supported, if so there seems to be a bug. Try make the name column smaller or larger... different behaviors exist for both cases (see gif).
https://stackblitz.com/edit/react-b8behq-efiban?file=app/main.jsx
There is a feature in Month View where a day with many appointments will display an ellipsis ("...") at the bottom, indicating to the user that the day in question has more events scheduled than are listed on the screen. Does Week View have a feature similar to this?
My users will sometimes display busy schedules with many appointments listed, and I would rather display "..." than the first character of each appointment as the component tries to mash all the appointments into the same box.
This thread references the feature I'm referring to in Month View:
https://www.telerik.com/forums/react-scheduler-render-more-events-in-month-view
As does this GitHub Issue:

Do we have any way show checkbox enabled or disabled in React Kendo grid when using the below selected field.
<Column
field="selected"
width="75px"
filterable={false}
headerSelectionValue={
data.findIndex(dataItem => dataItem.selected === false) === -1
}

