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! 

Hello,

Does Kendo React offer a 'slide in' drawer component, that can slide in from either side of the screen and that can hold e.g. a form (like an extended dialog component)? 

I found a question on the forum from 2020 where the same question was asked: https://www.telerik.com/forums/non-navigational-drawer

In one of the answers, an example was given how to 'convert' the drawer component to offer this functionality. Does Kendo not offer a particular component for this?

Hi,

I am using the KendoReact grid with checkbox selection as outlined here: https://www.telerik.com/kendo-react-ui/components/grid/selection/#toc-customizing-the-selection

I was hoping for some help on the best way to selectively hide the checkbox for certain rows based on row data while still using default Grid selection behaviours i.e. Grid selectedField, onSelectionChange and onHeaderSelectionChange.

I know that I can use a custom cell template to selectively hide or show the checkbox, but if I do this is there any way to still use the Grid onSelectionChange handler for the checkboxes that are shown? Or do I have to use the Grid onItemChange event to change the selected field instead?

Kind regards,

David

as you can see the first item (and the last one), does not start from the most right/left, how can I get rid of that space?

Hi.

If I use your example for re-ordering grid rows by drag&drop, there are a lot of console warnings showing up:

https://stackblitz.com/run/?file=app%2Fdraggable-row.tsx

I think the issue results from the file drag-handle-cell.tsx where there is a td tag just adding the ...props as attributes which doesn't seem to result in valid HTML.

I'm not sure if this has an impact on the re-ordering because if I simply delete the ...props from the td, it still seems to work. Can you please check and let me know if it's ok to remove the ...props from the td?

Thanks,

Greetings,

Bernd

Is it possible for the drawer component to use Inertia JS instead of react router?

Is there a way to format/create cells that has a sub grid structure (see attached)?