I am developing a data entry form that involves complex relationships between individual fields and the data service.  I may be in a situation where Form.onChange may be helpful, but I'm not sure.  The online documentation says "Use onChange only if you cannot achieve the desired behavior through the Field component by FormRenderProps." but doesn't actually given an example.  How do I call this method?

Note: This is not about FieldRenderProps.onChange.

function FuncyComponent() {
    const someData = {id: 123, etc};
    const form = <Form initialValues={someData} render={formRenderProps =>
        <FormElement>some fields</FormElement>} />;

    const handleButtonClick = (event: whatever) => {
        form.onChange("id", {value: 9876});
    };

    return <div>
        {form}
        <button onClick={handleButtonClick}>Change The ID</button>
    </div>;
}
 

I have a Form in which I'd like users to be able to select zero or more items from a table.  Rows in this table should contain a checkbox, and clicking the checkbox will include or exclude the corresponding item from the Field's value.  Perhaps the value will be a comma-separated list of the IDs of all the selected items.  An array is fine too.

Let's say we're doing an online purchase form for a fast food restaurant where customers have a small catalog of products to purchase from.  Maybe this is the entire product table:

Id: 1, Name: Hamburger, Price: $5
Id: 2, Name: Fries, Price: $2
Id: 3, Name: Soda, Price $2

The user would see:

[ ] Hamburger
[ ] Fries
[ ] Soda

If the user chooses a hamburger and soda, the SelectedItems value will be "1, 3" (or hopefully [1, 3]).  The end result is that after pushing the submit button, the onSubmit event will fire with a values object like this:

{ OrderId: 1234, SelectedItems: [1, 3], PaymentMethod: "cash" }

How can I use the Forms API to achieve this?  I thought perhaps a FieldArray would help, but I didn't see any examples of that class in use.  The online docs pretty much just say that a FieldArray has a "component" property and that the component does stuff with a FieldArrayRenderProps.  No actual examples.

My two questions:

1. How would you recommend I implement the table as described above?
2. What is an example of a typical use of a FieldArray?

I am using Kendo React version:4.5.0 for Date Picker. For the DatePicker I am using format="MM/dd/yyyy" and formatPlaceholder={{ year : 'YYYY', month : 'MM', day : 'DD' }}.

For this I have two queries:

1. How to have the focus to change automatically from MM to DD to YYYY when the user is typing in the date? Right now we have to use left and right arrow keys to move.

2. Right now the when the user type in the date for example in the YYYY the year is being input from right to left. So, how to have that implemented from left to right ?

Hello,

Im trying to create a custom cell with drag and cell selection and its look it is not possible because I dont have the original `<td/>` in the `GridCellProps`.

Here you have an example:

https://stackblitz.com/edit/react-xwdgxd?file=app/main.jsx

I found a "workaround" but I dont know if this is the correct way to do that:

https://stackblitz.com/edit/react-xwdgxd-tfwi7j?file=app/main.jsx

In Grid the prop cellRender do you have the original td allowing to override some props but without the need to know all internal props. Would be great if you can do that in the `GridColumn`.

I dont want to override the cellRender in the Grid and i dont want to know about data-grid-col-index.

Any suggestions?

Thanks!

Hello!

PDFExport, pageTemplate has 2 props, pageNum & totalPages.

Is it possible to send some custom values over props to "pageTemplate"?

Thank you, Matjaz Reberc

Hello,

I am trying to display a list of images with buttons that delete them when clicked. I'm using the Upload component and utilizing the 'listItemUI' attribute and it works wonderfully. However, I am trying to reverse the order of the elements displayed so that the most recent is at the top and the least recent is at the bottom.

 CustomListItemUI(e) {
        return (
            <ul id="custom-list-item-UL">
                {e.files.map((el, index) => {
                    if (el.Thumbnail_URL) {
                        return (
                            <li
                                className="k-file"
                                key={index}
                            >
                                <div className="k-file-single">
                                    <img src={el.Thumbnail_URL} onClick={() => this.toggleDialog(el)} />
                                </div>
                                <button
                                    type="button"
                                    onClick={async () => {
                                        this.actualUploader.current.onRemove(el.uid);
                                        await this.props.deleteImage(el.ID);
                                    }}
                                    tabIndex="-1"
                                >
                                    <span aria-label="Remove" title="Remove" className="k-icon k-i-delete">
                                    </span>
                                </button>
                            </li>
                        );
                    } else {
                        return (
                            <li key={index}>
                                <Loader errorsPresent={el.validationErrors} />
                                {
                                    el.ID || el.validationErrors?.length >= 0 ? <button
                                        type="button"
                                        onClick={async () => {
                                            this.actualUploader.current.onRemove(el.uid);
                                        }}
                                        tabIndex="-1"
                                    >
                                        <span aria-label="Remove" title="Remove" className="k-icon k-i-delete">
                                        </span>
                                    </button>
                                        : null
                                }
                            </li>
                        );
                    }
                })
                }
            </ul>
        );
    }

I have tried sorting the data that goes into the <ul> and it doesn't make a difference.

I have tried putting display: flex, and flex-direction: column-reverse, and this works but places the scroller at the bottom with the most early upload (which is also not what I want). Is there some kind of sorting attribute or method I can use to achieve what I want?

In the example here:  https://www.telerik.com/kendo-react-ui/components/buttons/button/

you use the "any" type for the event return.  What is the proper  type to use, and if "any" is really correct, please explain why.  I usually think of "any" as the type to use when I don't understand what the proper type I should be using is. (same with newLogs though I'm not using logs, just seems unusual to see "any" used in library docs)

const ButtonContainer = () => {
  const [logs, setLogs] = React.useState([]);

  const handleDomEvent = (event: any) => {
    let newLogs: any = logs.slice();

    newLogs.unshift(event.type);

    setLogs(logs);
  };
  return (
    <>
      <Button
        onClick={handleDomEvent}
        onMouseDown={handleDomEvent}
        onMouseUp={handleDomEvent}
        onFocus={handleDomEvent}
        onBlur={handleDomEvent}
        onKeyPress={handleDomEvent}
      >
        My Button
      </Button>
      <EventLog title="Event Log" logs={logs} />
    </>
  );
};

I notice that when I set a button background color, clicking on that styled button gives no indication of whether the button is clicked. Is there a proper way to change the color of a button and still have it behave like a button (that is, show indication when clicked).

<Button icon="cut" title="On Peak" style={{ backgroundColor: "red" }} >
    On Peak
</Button>

Hi,

Is it possible to add line marker to the legend, so that if we choose rectangle for marker style we get a little rectangle in the legend?

I can alter the text and color by customizing "labels" prop but it still shows just line, no matter what marker type is selected.

Regards,

Vladimir

Hi,

I was wondering if it is possible (and how ;)) to only show a loader if (for example) an API call exceeds a certain amount of milliseconds. Something like this:

if (datanotyetready) {
   <Loader />
}
else {
  // Render a grid or something
}