Kendo React Scheduler - Resource is Required Validation...

[Saravanan]

Dear Kendo Team,

I have added a custom resource to the scheduler and it automatically recognizes the resource and shows it as a dropdown like I desired which is great. Now, all I want is to do the following:

1. Simply move the dropdown to the top of editor (is this possible without having to create an entirely custom template from scratch) 

2. Make the resource selection required

3. Disable the selection of time zone information 

Here is all the work I have been able to accomplish so far:

I ran into this article (https://www.telerik.com/kendo-react-ui-develop/components/scheduler/customization/form/editor/) and have the code working to the point where I have a custom validator function checking the field value and raising an error. Although the red highlight is shown underneath the custom resource, the error message ' field is required' is not shown.

My code is shown below:    

import { SchedulerForm, useSchedulerFieldsContext, SchedulerFormProps } from '@progress/kendo-react-scheduler';
import { CustomFormEditor } from './custom-form-editor';

export const FormWithCustomEditor = (props: SchedulerFormProps) => {
    const fields = useSchedulerFieldsContext();

    const requiredValidator = React.useCallback(
        (value) => (!value
            ? 'Field is required.'
            : undefined),
        []
    );  

    const customValidator = React.useCallback(
        (_dataItem, formValueGetter) => {
            let result: any = {}

            result[fields.title] = [
                requiredValidator(formValueGetter(fields.title))
            ].filter(Boolean).reduce((current, acc) => current || acc, '')

           //custom resource related field called 'customerId' validation below

            result['customerId'] = [
                requiredValidator(formValueGetter('customerId')),
            ].filter(Boolean).reduce((current, acc) => current || acc, '')

            return result;
        },
        [fields, requiredValidator]
    )

    return (
        <SchedulerForm
            {...props}
            validator={customValidator}
            editor={CustomFormEditor}
        />)
}

What is left:

1. Have the 'Field is required' validation message show up in the current approach

2. Move the resource selection dropdown higher up in the editor that opens (using the current approach or through the full editor customization approach)

3. Disable time zone selection completely (using the current approach or through the full editor customization approach)

For full editor customization, I was reading in the documentation here (https://www.telerik.com/kendo-react-ui/components/installation/source-code/) which states that licensed customers can download the source code of the Kendo React product. I would be interested in confirming that I can this approach with your technical sales team before proceeding further. 

Many thanks! 

 

[Konstantin Dikov]

Hello Saravanan,

Thank you for reaching out to us.

I went through the requirements that you have and I have to say that the only option for achieving them would be by creating a custom template from scratch. For re-suing the default template you (having a license) can indeed use the source code and modify it as per your exact requirements. Which approach you would use will depend on your preference. 

If further assistance is needed with the customization, please do not hesitate to contact us again.

 

Regards,
Konstantin Dikov
Progress Telerik