Questions on KendoReact Forum

11 answers

410 views

bug with react-kendo-grid-wrapper(GridColumn)

GridColumn didn't work correctly. I can't use them when I insert it inside Grid.

I see that GridColumn is function

var GridColumn = function (props) { return null; };

GridColumn.displayName = 'GridColumn';

In Grid component you try to compare child component with this 'component'

var columns = React.Children

.toArray(children)

.filter(function (child) { return child && child.type === GridColumn_1.default; })

.map(function (child) { return Object.assign({}, child.props); });

So, after filter there zero items, because we try to compare 2 functions.

Could you fix it, please?

Wrappers for React

answered on 20 Oct 2020

3 answers

166 views

registerForIntl with functional component

Hi there,

I want to use registerForIntl() with a functional compoent - React.SFC . How can I do that? registerForIntl expecs React.Component? How can I use intl functions in a React.SFC?

General Discussions

answered on 19 Oct 2020

5 answers

1.7K+ views

[Solved] How to make KendoGrid horizontal scroll bar stay at bottom of screen if table is too long?

Dear Sir/Madam,

We use a KendoGrid at the moment. It is good. And currently we try to keep horizontal scroll bar be visualable if table is too long. We do not want to horizontal scroll bar at the bottom all the time, otherwise user have to move to the bottom first then could scroll. Is it possible to do this? I checked document and did not find a good way. Can you give me some suggestions?

Thanks.

Regards,
Max

General Discussions

answered on 16 Oct 2020

5 answers

610 views

Title attributes on Grid generated filter textbox and filter dropdowns

Hi,

I'm using Kendo React Grids with filter in my application which generates column filter textbox and filter options dropdown. The requirement for me (part of ADA compliance) is any filed that user may execute an action should have a associated text with it when hovered on it. A HTML title attribute on column filter textbox and filter options dropdown would resolve this issue.

The Grid did not generate title attribute on filter textbox and filter options dropdown but the clear filter textbox button has title attribute.

How do I resolve this issue. Any help is much appreciated.

General Discussions

answered on 16 Oct 2020

26 answers

1.4K+ views

[Solved] 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

547 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

403 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

584 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