Questions on KendoReact Forum

26 answers

1.0K+ views

Spreadsheet

how to resize in , i have used innerHeight and innerWidth it worked but i couldn't get toolbar in full size and also grid lines

Wrappers for React

answered on 15 Oct 2020

1 answer

502 views

Pasting across multiple cells in Grid

Hello! Had a product question on the grid component specifically:

My needs are to copy/paste multiple cells at once from Excel to kendo grid. This can be across multiple columns as well as rows. You can see https://handsontable.com/examples and https://nadbm.github.io/react-datasheet/ allow you to copy/paste across cell ranges seamlessly. Does Kendo UI for React support that? I couldn’t find anything in the documentation. My team needs to make a decision by tomorrow 10/13 on what library to use so a quick response would be greatly appreciated. Thank you!

General Discussions

answered on 13 Oct 2020

2 answers

367 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

516 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.4K+ 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.3K+ views

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

97 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

57 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

62 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.0K+ 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