Hi,
On your example : https://www.telerik.com/kendo-react-ui/components/popup/aligning-positioning/#toc-positioning
If I choose Anchor align point vertical middle, the top right popup corner is in the anchor, why ?
Regards,
Joccd
https://stackblitz.com/edit/react-s8ugrr-dvxqcf?file=app/main.jsx
When you click in the TextArea in the above StackBlitz, React throws a warning in the console:
Warning: Received `true` for a non-boolean attribute `visited`.
If you want to write it to the DOM, pass a string instead: visited="true" or visited={value.toString()}.
at textarea
at span
at KendoTextArea (https://react-s8ugrr-dvxqcf.stackblitz.io/turbo_modules/@progress/kendo-react-inputs@4.1.0/dist/npm/textarea/TextArea.js:40:33)
at div
at KendoReactFieldWrapper (https://react-s8ugrr-dvxqcf.stackblitz.io/turbo_modules/@progress/kendo-react-form@4.1.0/dist/npm/FieldWrapper.js:13:24)
at FormTextArea (https://react-s8ugrr-dvxqcf.stackblitz.io/~/app/main.jsx:42:13)
at KendoReactField (https://react-s8ugrr-dvxqcf.stackblitz.io/turbo_modules/@progress/kendo-react-form@4.1.0/dist/npm/Field.js:30:22)
at div
at fieldset
at form
at KendoReactFormElement (https://react-s8ugrr-dvxqcf.stackblitz.io/turbo_modules/@progress/kendo-react-form@4.1.0/dist/npm/FormElement.js:33:22)
at KendoReactForm (https://react-s8ugrr-dvxqcf.stackblitz.io/turbo_modules/@progress/kendo-react-form@4.1.0/dist/npm/Form.js:87:28)
at App
It appears that when we disable the TextArea, it does not match the styling of the other input components. My initial thought is that this is because of two things:
1. The <span class="k-textarea"> needs a k-state-disabled applied.
2. The themes need something like the following in the .scss:
.k-textarea {
&:disabled,
&[disabled],
&.k-state-disabled {
@include disabled( $disabled-styling );
// Disabled selection
&::selection {
@include fill ( $color: $input-color, $bg: transparent );
}
}
}
I could be way off base here, of course. Here's a StackBlitz showing the issue with a current, ugly, workaround: https://stackblitz.com/edit/react-s8ugrr-57r5pk?file=app/main.jsx
hi,
I am using KendoReact grid and paging and have a grid something like below. we have some filters outside the grid that are applied on grid. And we are using react-redux to preserve the filters state so that grid can be recreated again as per the filters selected on redirection.
can we also add the pagesize to redux so that its value can also be preserved and the same number of records remain selected or shown on redirection.
I am not sure if there is any event that we can use for this purpose. any help will be appreciated.
<Grid
sortable
filterable
resizable
reorderable
pageable={{
buttonCount: 4,
pageSizes: [10, 20, 50, 100, formsList.length],
}}
data={process(formsList, dataState)}
{...dataState}
onDataStateChange={(e) => {
setDataState(e.data);
}}
cellRender={customCellRender}
headerCellRender={customHeaderRender}
>
{user && isAuthenticated && user.isAdmin && (
<GridToolbar>{getFormFilters()}</GridToolbar>
)}
<GridColumn field="formNumber" title="Number" />
<GridColumn width="300px" field="formTitle" title="Form Title" />
<GridColumn
width="200px"
field="formattedRevisionDate"
title="Revision Date"
headerClassName="text-wrap"
filter={"date"}
format="{0:M/d/yyyy}"
/>
<GridColumn field="formStatus" title="Status" />
<GridColumn field="notes" title="Notes" />
<GridColumn field="responsibleOffice" title="Office" width="175px" />
<GridColumn
field="procedureNumber"
title="Procedure"
cell={procedureCell}
/>
<GridColumn
title="Available Formats"
field="attachmentTypes"
cell={attachmentsCell}
headerClassName="text-wrap"
/>
<GridColumn
filterable={false}
sortable={false}
title="Actions"
cell={actionsCell}
/>
</Grid>
Hello,
I'm trying to wrap GridColumn using high order component. I'd like to make reusable columns within our solution that are enhanced towards our needs.
However, I'm not able to get KendoReact Grid to display data when I try this approach.
I've put example of what I'm trying to do here:
https://stackblitz.com/edit/kendoreact-grid-hooks-pvhvv7?file=app/main.jsx
Thanks in advance for help!
Best regards,
Arek
I have the following script error while rendering Kendo react component with SyestemJS. I have attached the script error image below.
system.config.js
// map tells the System loader where to look for things
map: {
'react': 'https://unpkg.com/react@16/umd/react.production.min.js',
'react-dom': 'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
'prop-types': 'https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js',
'@progress/kendo-date-math': 'https://unpkg.com/@progress/kendo-date-math@dev/dist/cdn/js/kendo-date-math.js',
'@progress/kendo-drawing': 'https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js',
'@progress/kendo-react-intl': 'https://unpkg.com/@progress/kendo-react-intl@latest/dist/cdn/js/kendo-react-intl.js',
'@progress/kendo-react-buttons': 'https://unpkg.com/@progress/kendo-react-buttons@3.14.0/dist/cdn/js/kendo-react-buttons.js'
}
I have also attached a sample for your reference. Please help me react component using CDN links and SystemJS. Without kendo components, this project works fine.
HI,
I am working with the spreadsheet wrapper component. I found an issue where I was not able to insert a new row into s sheet.
I created a sheet with some data in it using a spreadsheet component, downloaded it and uploaded it into another spreadsheet component. Now after uploading it into the second component I am not able to insert a new row to that sheet.
I don't have data in the last row, but still it is throwing me an error saying "Cannot insert cells due to data loss possibility. Select another insert location or delete the data from the end of your worksheet."
Also to make it work, I have to delete rows from bottom of my sheet and then I can insert the same amount of rows anywhere in the sheet.
Please let me know if this is the expected behaviour or it's an actual issue.
If it's the expected behaviour is there a possible way so I don't have to remove all the rows from the bottom of the sheet and I can insert rows?
Thank you.
Hi,
Does the GridColumnMenuCheckboxFilter have virtual scrolling? Or is there a way to enable or add it? Thanks.
https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnMenuCheckboxFilterProps/
Thanks.
Hi Stefan,
Onclick event (when the user clicks on a date picker Icon) is not firing in DatePicker and DateTimePicker. i.e <DatePicker onClick={onClick} onChange={onChange} />