Questions on KendoReact Forum

2 answers

412 views

2 Way Data Binding for KendoReactForm Fields

I have a functional component which includes a FirmaListesi component to set seciliFirma state and a Form component which edits the selected seciliFirma object. FirmaListesi component includes only a KendoReact Combobox. When I select a Firma object from that component, I want Form component's Field to update its value. However it doesn't happen which occurs with an ordinary Input component.

Am I doing something wrong?

Kind regards.

const FirmaEkle = () => {

const [firma, setFirma] = useState({ adi: "dswsd" } as Firma);

const firmalar = useTypedSelector((state) => state.firma.firmalar);

const seciliFirma = useTypedSelector((state) => state.firma.seciliFirma);

const dispatch = useDispatch();

const firmaEkle = () => {

dispatch(updateFirma([...firmalar, { adi: "ewrer", id: 2 }]));

};

const handleSubmit = async () => {

await FirmaKaydet(firma);

};

return (

<>

<FirmaListesi></FirmaListesi>

<Form

onSubmit={handleSubmit}

initialValues={seciliFirma}

render={(formRenderProps) => (

<FormElement style={{ width: 400 }}>

<fieldset className="k-form-fieldset">

<legend className={"k-form-legend"}>Firma Bilgileri</legend>

<Field id={"adi"} name={"adi"} label="Firma Adı" component={FormInput}></Field>

<Button type="submit" disabled={!formRenderProps.allowSubmit}>

{seciliFirma ? "Güncelle" : "Kaydet"}

</Button>

</fieldset>

</FormElement>

)}

/>

<Button onClick={() => alert(seciliFirma.adi)}>Deneme1</Button>

</>

);

};

General Discussions

answered on 13 Oct 2020

1 answer

591 views

useState hooks, odata grid state

Hi All

Very new to react, trying hooks to simplify code and readability.

I am trying to implement the odata service example from: https://www.telerik.com/kendo-react-ui/components/grid/data-operations/odata-server-operations/

The odata service is fine, I am just trying to get the function setGridState1 to set the grid state to gridState and then call the function toODataString passing in the grid state (and therefore parsing it to an odata string) and then passing it to my rest api.

I can get the debugger points to trigger, but after I update a filter in the grid and it calls fetchData, gridState is still null?

Missing something crucial here, not sure what it is though, any help would be great.

import * as React from "react";

import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";

import { toODataString } from '@progress/kendo-data-query';

import { dataService } from "../Services/dataService";

export const AddExistingGrid: React.FC = () => {

const [selectedID, setSelectedID] = React.useState(null)

const [editId, setEditId] = React.useState(undefined);

const [data, setData] = React.useState<any[]>([]);

const [gridState, setGridState] = React.useState<any>([]);

const fetchData = React.useCallback(async () => {

debugger;

const newData = await dataService.getLoanInvOdata(toODataString(gridState));

}, [setData]);

const setGridState1 = (e) => {

setGridState(e);

fetchData();

debugger;

}

React.useEffect(() => { fetchData() }, [fetchData]);

return (

<>

<div>

<Grid

filterable={true}

sortable={true}

pageable={true}

data={data.map(item => ({

...item,

inEdit: item.ProductID === editId,

selected: item.ProductID === selectedID

}))}

onDataStateChange={setGridState1}

>

<Column field="id" title="Id" />

<Column field="ProductName" title="Name" />

<Column

field="UnitPrice"

filter="numeric"

format="{0:c}"

title="Price"

/>

<Column field="UnitsInStock" filter="numeric" title="In stock" />

</Grid>

</div>

</>

);

};

General Discussions

answered on 12 Oct 2020

5 answers

1.6K+ views

Kendo Grid column unmounts/mounts child component on re-render

Hi,

One of my grid columns uses a child component to display its own data for each row in the grid. I have a demo here:

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

The issue is that any state change in the parent causes that child in the grid column to unmount re-mount. Try opening the console at the bottom right. Then type any text in the input. You can see that for each state change, the child unmounts and re-mounts.

In my real app, the child is fetching data with axios. So for each keystroke (or ANY state change), that child unmounts, remounts, and fetches the data again. This also happens with any action on the grid, such as sorting. Sort the grid, and the child unmounts and remounts.

How can I prevent this behavior? I can't have the child re-fetching the data like that.

Thanks for any help.

General Discussions

answered on 12 Oct 2020

2 answers

1.4K+ views

[Solved] Expand One Grid Row Only at a Time with React

Hello

How to expand One Grid Row Only at a Time with React, the behavior needed is that all the rows will be collapsed when i expand a row.

I found a solution with jquery but not in React.

Thank you in advance.

General Discussions

answered on 09 Oct 2020

1 answer

136 views

Custom form layout

Hi!,

we are testing KendoReact. and we want to know if it's possible to have any kind of grid solution in Default theme, such as Bootstrap "col-md-4" or similar.

Thank you

General Discussions

answered on 08 Oct 2020

1 answer

83 views

Keyboard support

Hi

How can I apply keyboard support for kendo react grid and tree list?

Kind regards Mathias

General Discussions

answered on 07 Oct 2020

1 answer

88 views

Detail template

Hi

Is there a way to make a detail template in kendo react grid just like kendo jquery grid have?

https://demos.telerik.com/kendo-ui/grid/detailtemplate

Kind regards Mathias

General Discussions

answered on 07 Oct 2020

6 answers

1.1K+ views

Stepper component not working?

I am trying to use the Stepper component and I'm getting errors on the console `Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.`

This only appears when I am using the Stepper. I have tried removing it and replacing it with another Kendo component, such as a Button, and that works fine and no error. I have tried updating the packages to the latest and making sure that I have installed the progressbars dependency, and that that is also updated to the latest. I have also tried moving it out of a child component into the parent so that it's not being exported and it still has that message displayed. I have also tried inserting the stepper demo code, and that also gives the error. Any ideas on what is going on? I see that this component works fine in StackBlitz, so it seems like a me problem. But I could use some guidance!

Thanks,

Kara

General Discussions

answered on 06 Oct 2020

1 answer

334 views

Grouping within DropDownList or ComboBox

So I'm wondering if there is a way to group items with a heading within a combobox or dropdownlist. See attached. A regular html select uses an optgroup element to accomplish something like that.

Thanks!

General Discussions

answered on 01 Oct 2020

5 answers

139 views

Conversational UI multiple attachment alignment

Hi,

It looks like attachments are always aligned to the left even if they are from the current user https://stackblitz.com/edit/react-ypqn8l?file=app/main.jsx . How to align only user attachments to the right?

General Discussions

answered on 29 Sep 2020