I'm looking for a usable pattern for putting a <Form> in a <Dialog>. the Submit button should be in the <DialogActionsBar> but I'm not sure how to get the Form's `valid` state outside the form...

Ideally you could do:

<Dialog>
  <Form render={({valid}) => {
      return (
        <FormElement>
          ... some form inputs here ...

          <DialogActionButtons>
            <Button type="submit" disabled={valid}>Submit</button>
          </DialogActionButtons>
        </FormElement>
      );
    }}
  />
</Dialog>

But of course that dos not work because the <DialogActionButtons> ends up being at the wrong place in the DOMso the styling doesn't work right.

-----

You can get the submit button working correctly by using the standard HTML `form` attribute on the `button` like this:

<Dialog>
  <Form render={({valid}) => {
      return (
        <FormElement id="formId">
          ... some form inputs here ...
        </FormElement>
      );
    }}
  />

  <DialogActionButtons>
    <Button type="submit" form="formId" disabled={???}>Submit</button>
  </DialogActionButtons>
</Dialog>

But now there is no way to get the `valid` form prop out to the Button's disabled prop.

-----

You may think to do:

const [formValid, setFormValid] = React.useState(false);

<Dialog>
  <Form render={({valid}) => {
      setFormValid(valid);

      return (
        <FormElement id="formId">
          ... some form inputs here ...
        </FormElement>
      );
    }}
  />

  <DialogActionButtons>
    <Button type="submit" form="formId" disabled={formValid}>Submit</button>
  </DialogActionButtons>
</Dialog>

but this is technically not valid and will produce a warning/error from React:

"Cannot update a component (`TestComponent`) while rendering a different component (`KendoReactForm`)."

Is there a known pattern for making this work

I want to add a GridColumn with custom field value. I tried creating a html return in a method as a field value but was unsuccessful.

I want to add the Action column and want to have a clickable link as a field.

I want to have a clickable link in the Action column.

Hi Team,

I have a upload scenario, where I need to import a data from file type like .xlsx,.xlsm.. and do a validation and bind a data to kendo react  grid directly, Do we have a inbuilt import  function in kendo react grid ? can you please help on that would be helpful.

Note: No need to save a data in any server, after the validation, data will be saved from grid.

Regards,

Arun

The full week is always from Sunday to Saturday

Hello.

Is there way to use Dropdownlists in filters in the Column Menu in GridColumnMenuFilter? Similar to Jquery? Filter menu customization in jQuery Grid Widget Demo | Kendo UI for jQuery (telerik.com). So that Dropdownlist datasources can be key-text objects.

I read this post: DropDownList as filter not working inside column menu in KendoReact | Telerik Forums. But I need all the functionality, with two dropdowns and logic (and / or.)

Well thank you.

Hi, 

I am using Kendo react grid in my project. It work fine in my local, but produces the following error on scrolling the grid after build and deployment.

Uncaught TypeError: Cannot read properties of null (reading 'element')
    at p (drag-n-drop.js:84:24)
    at useDraggable.js:149:9
    at HTMLDivElement.<anonymous> (useDraggable.js:217:9)

Why am I getting this error after build and how is it working fine in my local? Please suggest a way to resolve this.

Regards

Mansi

Hi,

I have a React app. If I want to build this I get an error

Failed to compile.

./node_modules/@progress/kendo-theme-default/dist/all.css
ParserError: Expected closing parenthesis at line: 1, column 5

however, when i check all.css it looks ok.

how can i fix this?

https://www.telerik.com/kendo-react-ui/components/scheduler/api/SchedulerProps/#toc-style

    <Scheduler data={events} style={{
      borderColor: 'red', height: '100vh'
    }}>
      <AgendaView />
      <TimelineView />
      <DayView />
      <WorkWeekView
        title="Work Week"
        workWeekStart={Day.Monday}
        workWeekEnd={Day.Friday}
      />
      <WeekView title="Full Week" />
      <MonthView />
    </Scheduler>

The height is always 600px

how to add % to the caption on the side, and create a chart legend icon like below