Hi,
I would like to be able to specify a Grid Column template for the data without having to replicate the entire cell and its properties. Please see below for justification:
Consider the following example of KendoReact Grid Cell customisation: https://www.telerik.com/kendo-react-ui/components/grid/styling/#toc-adding-custom-cells
Following this approach results in the loss of a lot of properties from the grid cell compared with 'default' cells e.g.
<td colspan="1" class="" role="gridcell" aria-colindex="1" aria-selected="false" data-grid-col-index="0">Chai</td>
<td style="background-color: rgba(55, 180, 0, 0.32);">18 <span class="k-icon k-i-sort-asc-sm"></span></td>
These properties are important for many reasons including accessibility. There is another example of KendoReact Grid Cell customisation that preserves these properties here: https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-customization
e.g.
<td colspan="1" class="" role="gridcell" aria-colindex="4" aria-selected="false" data-grid-col-index="3">39</td>
<td colspan="1" role="gridcell" aria-colindex="5" aria-selected="false" data-grid-col-index="4" style="color: red;">false</td>
However, there is a considerable amount of code required to achieve this:
const CustomCell = (props) => {
const field = props.field || "";
const value = props.dataItem[field];
const navigationAttributes = useTableKeyboardNavigation(props.id);
return (
<td
style={{
color: value ? props.myProp[0].color : props.myProp[1].color,
}}
colSpan={props.colSpan}
role={"gridcell"}
aria-colindex={props.ariaColumnIndex}
aria-selected={props.isSelected}
{...{
[GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex,
}}
{...navigationAttributes}
>
{value === null ? "" : props.dataItem[field].toString()}
</td>
);
};
I would like to be able to define a template for a cell without having to specify these properties every time.
Kind regards,
David
Hi, when using the Kendo React Typography component like following:
<Typograpy.h1></Typograpy.h1>
compiler gives the following warning:
Imported JSX component h6 must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case
I've noticed in your other products, the dropdownlists have a property that allows for grouping sets of data.
What would it take to get that included in Kendo UI React?
We have a use case that this would be very helpful.
Thanks.
Current Behaviour
When a table is created in the text editor and multiple columns are selected an error is thrown.
Errors:
TypeError: Cannot read properties of undefined (reading 'localsInner')
TypeError: Cannot read properties of undefined (reading 'eq')
Expected Behaviour
When a table is created in the text editor and multiple columns are selected an error must not appear and the user must be able to merge or split the cells.
MInimal Reproduction
I'm providing a reproduction from Kendo React code examples.
https://stackblitz.com/edit/react-su15wr?file=app%2Fmain.tsx
Package
"@progress/kendo-react-editor": "^5.11.0"
Hi,
I know pageSizes options takes a Boolean or Array of Numbers, but Is there a way add an option to pagination dropdown which lists all rows of the grid like, 'All' option?
Can we set the options of the dropdown to like '10, 50, All', where option 'All' lists all rows of the grid?
Hi,
If you use kendo-theme-bootstrap for most Kendo React inputs, it results in bootstrap styling being applied to the input e.g. https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/ or https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/. With the Bootstrap theme selected the DatePicker and Combobox have blue shadows on focus.
This is not true for the DropDrownList: https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/. The border on focus does not match Bootstrap styling.
Kind regards,
David
Hi,
Can We have an admin Dashboard for KendoReact? which has some ready components Like NavBar on top and Left, Dark and Light mode, RTL, and LTR Layouts and Forms with all input Components
I Have More projects in this React MUI Admin Dashboard and now it's very hard for me to use the KendoReact Components here.
if we Have KendoReact Admin Dashboard like that it will be easy to use KendoReact components there.
Thanks
The React ComboBox and Autocomplete do not support the valueRender prop, so a selected value cannot have a custom display. The DropDownList does however - they should all be consistent in this.
DropDownList reference:
React Dropdowns Library & DropDownList Component - Custom Rendering - KendoReact Docs & Demos (telerik.com)
After the latest accessibility improvements available with R1 2023 of the KendoReact library, the aria-required attribute is missing in most of the DropDowns.
The aria-required attribute should be rendered in the DOM once the MultiSelect definition contains a required attribute like this:
<MultiSelect required data={sports} onChange={onChange} value={value} />
Hi, I am Lavanya!
in my dropdown list, there are horizontal layouts I need to change to the vertical dropdown list
and also I have attached bar data in that I need to make a dropdown filter of the month how can I use that
];
this is my data I want to use a column chart using this data x-axis as month and y-axis sales how can i use this data
Hi, I am Lavanya
I am using kendo UI past few days the react-coffee warehouse is very useful to learn . But the finance application is in typescript so unable to learn the whole application. so kindly give any sample application in js or jsx .if possible.
thanks
is that possible to change the background line (grid )
how can I change the color of the grid or invisible in the kendo UI chart
in the kendo UI react chart I need the average line, max line, and min line targeting some value
Please suggest which features to use with respect to the above requirements, if available.
Is It Possible to Add Persian Datetime format In Datetime Picker
Thanks
Hello,
Please allow the Form component to submit even if it's not marked as modified internally. I am trying to use the Form within a Stepper workflow, and the Form can have default values based on what they submitted in the previous Step. If they return to the Step with the Form on it, though, and those initial values are not changed while displaying the Form, then the Form internally is not marked as modified, therefor the submit event never fires.
It'd be nice if we could have a boolean to tell the Form if we care to block submission based on modified or not.
Thank you
Hi,
I am using Kendo react richtext editor and insert image plugin as it is shown in this page
https://www.telerik.com/kendo-react-ui/components/editor/images/
I am able to insert/upload image, but not able to resize image after adding it, similar to MS word.
After inserting image it should be resizable, so that user can easily resize the image as required.
Please let me know how can I achieve image resizing through mouse in above example.
Thanks
Vikram E