Questions on KendoReact Forum

Hi, i need to replace the minimise and restore icon. I tried using minimizeButton and restoreButton prop. but it seems the functionality doesnt work anymore. Is there a way to just change the icon without disrupting the functionality? Thanks in advance!

Here's the component.

https://www.telerik.com/kendo-react-ui/components/dialogs/window/

Dialog

Window

answered on 18 Sep 2023

1 answer

44 views

Is it possible to animate dialogs in React like in Angular?

Follow the example in Angular:
https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/animations/

I'd like to do something similar to this.

Thanks

Dialog

answered on 07 Aug 2023

1 answer

156 views

Z-Index problem

Hello everyone, I need help. I have implemented a Modal and I would like to use it like as an <aside> where the content will be a form (multiple fields: combobox, multiselect). The Drawer component is not suitable for this case, and neither is the Dialog, as the Dialog is always centered in the middle of the screen. That's why I have made my own implementation using Kendo's CSS classes.
Here's an example.
9gejxw (forked) - StackBlitz

you may notice that the Combobox's popup doesn't work. Its z-index remains 100, while the Modal's z-index is 1002.

I tried overriding the z-index of the k-animation-container class, but I wasn't successful. What can I do to proceed with this idea?

Gabriel.

ComboBox

Dialog

Popup

answered on 11 Jul 2023

1 answer

55 views

Control Popup State of DateTimePicker in a Dialog

So it seems no matter what I do, I can't have a DateTimePicker default to show={true} in a Dialog. I keep getting a Maximum Update error in the popup. All I'm trying to render is this;

return (
     <Dialog
      title="Select Time Range"
      onClose={props.toggleDialog}
      width={900}
      height={700}
    >
      <DateTimePicker
        show={true}
      ></DateTimePicker>    
    </Dialog>
  );

DateTimePicker

Dialog

answered on 24 Apr 2023

2 answers

105 views

Problem with focus in dialog

Hey,
currently when dialog is opened and browser focus is on URL bar and then user will press TAB to focus page, first focused element is first element on the page, not in dialog - you can check this behavior here (example from docs - https://www.telerik.com/kendo-react-ui/components/dialogs/examples/dialog/overview/func/?theme=default-ocean-blue&themeVersion=6.2.0)

Tested using Google Chrome 112.0.5615.49

1. Click on URL bar
2. Press tab until focus is on page
3. Button is getting focus even though the dialog is open

Can you confrim that this is a bug and it is not intended behavior?

Accessibility

Dialog

answered on 13 Apr 2023

1 answer

73 views

Form initial values only refreshing once

I have a KendoReact form, it has its own initialValues, and a controlled input field:

 <Form
                        ref={formRef as MutableRefObject<Form>}
                        onSubmit={handleOkButtonClick}
                        initialValues={initialData}
                        key={JSON.stringify(initialData)}
                        render={({ valid, visited }: FormRenderProps) => {
                            return (
                                <FormElement>
                                    <StackLayout gap={1} orientation={'vertical'}>
                                        <StackLayout gap={1} orientation={'vertical'}>
                                            <FieldWrapper>
                                                <Label>
                                                   'Name'      *
                                                </Label>
                                                <Field
                                                    name={'Name'}
                                                    component={InputFormComponent}
                                                    autoFocus={true}
                                                    validator={ValidationWorker.isRequired}
                                                    maxLength={255}
                                                    value={nameOfProfile}
                                                    onChange={(event) => {
                                                        setNameOfProfile(event.target.value);
                                                    }}
                                                />
                                            </FieldWrapper>

when I press on Copy button, new set of initial values need to be populated and inserted in the Name field, basically concatenating the string `- Copy` :

const handleCopyButtonClick = async () => {
        await uiHelper.blockUI(async () => {
            try {
                 await createOssSoProfile();
                setNameOfProfile(nameOfProfile + ` - Copy`);
                setInitialData({ Name: nameOfProfile + ` - Copy`, ...initialData });
            } catch (e) {
                uiHelper.showError(e);
            }
        });
    };

it only refreshed my form values once, so I can already see (name - Copy)

second time I press Copy I expect it to be (name - Copy - Copy)

but it is not reflecting in the form, only in the state

what am I missing?

Dialog

Form

answered on 18 Mar 2023

1 answer

287 views

Kendo React Dialogs - Setting the height dynamically according to the size of the content

Greetings,

I'm trying to set the height dynamically according to the size of the content using "height: auto" but it's not working.

I need the text to fit inside the content without exceeding below the actions section.

Is there a way to solve this issue? Please help, thanks!

Best Regards,

Jason Li

Dialog

answered on 06 Mar 2023

2 answers

128 views

Dropdown not visible inside dialog after upgrade to v5.11.0

Hi,

Dropdown is not visible in dialog after upgrade to v5.11.0. It used to work with v5.1.0.

With v5.1.0, dropdown's z-index is automatically calculated based on the dialog's z-index. With v5.11.0, the dropdown's z-index is always 100, which is lower than dialog's z-index.

Please advise.

Thanks.

updated answer on 21 Feb 2023

2 answers

1.4K+ views

Compile error while using kendo-react-dialogs

Hello,

I am trying to import the Window component from "kendo-react-dialogs", I am using exactly the same code from the window overview doc, I have the following error.

Compiled with problems:

ERROR in ../../.yarn/__virtual__/@progress-kendo-react-dialogs-virtual-8699855f90/3/AppData/Local/Yarn/Berry/cache/@progress-kendo-react-dialogs-npm-5.9.0-71dc4341df-8.zip/node_modules/@progress/kendo-react-dialogs/dist/es/WindowTitlebar.js 18:0-61

Module not found: Error: Can't resolve '@progress/kendo-react-intl' in 'C:\Users\belmekki\IdeaProjects\wps-9952\.yarn\__virtual__\@progress-kendo-react-dialogs-virtual-8699855f90\3\AppData\Local\Yarn\Berry\cache\@progress-kendo-react-dialogs-npm-5.9.0-71dc4341df-8.zip\node_modules\@progress\kendo-react-dialogs\dist\es'


ERROR in ../../.yarn/__virtual__/@progress-kendo-react-layout-virtual-e885d3475e/3/AppData/Local/Yarn/Berry/cache/@progress-kendo-react-layout-npm-5.9.0-3a7b59be14-8.zip/node_modules/@progress/kendo-react-layout/dist/es/tabstrip/TabStripNavigation.js 44:0-55

Module not found: Error: Can't resolve '@progress/kendo-react-buttons' in 'C:\Users\belmekki\IdeaProjects\wps-9952\.yarn\__virtual__\@progress-kendo-react-layout-virtual-e885d3475e\3\AppData\Local\Yarn\Berry\cache\@progress-kendo-react-layout-npm-5.9.0-3a7b59be14-8.zip\node_modules\@progress\kendo-react-layout\dist\es\tabstrip'

My kendo-react dependency list:

    "@progress/kendo-react-animation": "^5.9.0",
    "@progress/kendo-react-buttons": "^5.9.0",
    "@progress/kendo-react-dialogs": "^5.9.0",
    "@progress/kendo-react-intl": "^5.9.0",
    "@progress/kendo-react-layout": "^5.9.0",
    "@progress/kendo-react-progressbars": "^5.9.0",
    "@progress/kendo-theme-material": "^5.11.0",