Telerik Forums
KendoReact Forum
7 answers
227 views

     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;
Stefan
Telerik team
 answered on 16 Apr 2021
8 answers
687 views

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?

Brent
Top achievements
Rank 1
Iron
 answered on 15 Apr 2021
7 answers
745 views

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:

  • The extra characters "${", "}" or "<span style={{..." should not be displayed in the editor, but must be present when getting the HTML from the editor when creating or updating a template.
  • The tags should have a different appearance than the rest of the text to distinguish them. They should have grey background and a darker grey border.
  • The tags should be draggable.

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:

  1. How do I get text coming from API to be translated into my custom node? Right now I don't see anything at all.
  2. How to I add a new node with the correct tag key to the editor? I understand that right now I'm adding a mark and not a noe, but I don't understand how to add a node instead.
  3. How do I translate my custom nodes back to the correct "tag code"?

Thanks in advance!

Nikolay
Telerik team
 answered on 15 Apr 2021
2 answers
241 views

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!

Stefan
Telerik team
 answered on 15 Apr 2021
1 answer
167 views

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.

Martin
Top achievements
Rank 1
Veteran
Iron
 answered on 13 Apr 2021
5 answers
266 views

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

Krissy
Telerik team
 answered on 13 Apr 2021
2 answers
342 views

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

 

John
Top achievements
Rank 1
Veteran
 answered on 08 Apr 2021
3 answers
315 views

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:

https://github.com/telerik/kendo-react/issues/642

Kiril
Telerik team
 answered on 08 Apr 2021
1 answer
1.0K+ views

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
          }

Stefan
Telerik team
 answered on 08 Apr 2021
7 answers
5.5K+ views
     Is there any property in kendo react grid which will help us in hiding the column.
Stefan
Telerik team
 answered on 08 Apr 2021
Narrow your results
Selected tags
Tags
General Discussions
Grid
Wrappers for React
Charts
Scheduler
Filter 
DropDownList
Form
DatePicker
Styling / Themes
Editor
TreeList
Styling
PDF Processing
ComboBox
Excel Export
Dialog
Input
TreeView
Upload
Drawer
Button
Drag and Drop
MultiSelect
Tooltip
Accessibility
NumericTextBox
Checkbox
Menu
Gantt
DateTimePicker
PDF Viewer
Popup
Window
AutoComplete
DateInput
Sortable
Data Query
Licensing
TabStrip
Drawing
Calendar
Pager 
Labels 
Localization
TimePicker
GridLayout
FontIcon
Animation
PanelBar
TaskBoard
PivotGrid
Card
DropDownButton
Conversational UI 
DateRangePicker
Splitter
Badge 
Security
Slider
Spreadsheet
ContextMenu
MultiViewCalendar
Stepper
MultiColumnComboBox
MultiSelectTree
TextBox
AppBar
File Saver
ListView
MaskedTextBox
RadioButton
Switch
TextArea
Toolbar
DropDownTree
TileLayout
Map
Avatar
Date Math
Gauge
RadioGroup
RangeSlider
Rating
Loader
ExpansionPanel
SvgIcon
Typography
ProgressBar
ScrollView
Popover
StockChart
RadialGauge
Server Components
AIPrompt
Page Templates / Building Blocks
AI Coding Assistant
Chat
ColorGradient
ColorPalette
ColorPicker
Notification
Ripple
Skeleton
ButtonGroup
Chip
ChipList
FloatingActionButton
SplitButton
ActionSheet
Barcode
QR Code
FlatColorPicker
Signature
BottomNavigation
BreadCrumb
StackLayout
Timeline
ListBox
ChunkProgressBar
Sparkline
FileManager
ArcGauge
CircularGauge
LinearGauge
ExternalDropZone
OrgChart
Sankey
VS Code Extension
InlineAIPrompt
SpeechToTextButton
Chart Wizard
Agentic UI Generator
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
OTP Input
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?