Hello,
I have a request to add a ListView control to a React Pure control package.
Thanks.
Walkthrough component.
The component will allow the developer the create a step by step guide over the page.
This will highlight a collection of elements in a set order on the page with a tooltip showing the newly introduced feature.
Hi, is there a way i can customize the paging options style? The default is we have the page selection on the left, number of Items per page selection in the middle and the total records info on the right. I would like to just reverse it. I tried a display flex on the container and a flex-direction: reverse but it reverses the paging icons also. Please advise.
A custom render method for the paging component or a wrapper around the paging buttons would be ideal so as to do a flex-reverse to play around with the styles.
I am looking for added support for multi drag and drop and the ability to select multiple days as this is available in the jquery version:
https://demos.telerik.com/kendo-ui/scheduler/event-selection
Hi,
Is it possible to define where the dropdown container (i.e. k-list-container) is appended in the DOM?
By default it is appended at the bottom of the body but I'd like to define where it is appended.
The reason why I need to do this is because I'm using the KendoReact components in a WebComponent (custom element) which is hosted in a shadow-dom for isolation.
The styles are also only loaded within the shadow-dom and are therfore not applied to content on the outside.
The issue is that the kendo dropdown container is appended outside of the shadow-dom and the scope of the kendo styles.
The dropdownlist component is styled correctly but the dropdown part that is appended to body is not styled.
I've solved this with other components (i.e. modal window) by defining where I want the the container appended with the createPortal method in React.
: document.body
)
Hi,
I need to implement two functionality for treelist control
1. Freezing of column and rows
2. Drag and Drop column and rows
With the ArcGauge component, when you set the rangeLineCap to something other than 'butt' (ie: round or square), the indicator does not line up with the tick lines. This leads to misleading values. Please look at this StackBlitz:
https://stackblitz.com/edit/react-itztql
This will show the comparison between round and butt rangeLineCaps.
From the screenshot as well, the ArcGauge on the right looks like the value is greater than 0, resulting in the user being mislead on the result.
We need to customize our exported excel to contain some additional information to the top rows of the excel sheet.
On using 'filterable' option as true in ExcelExport React component, it's getting applied on the first row but we want those filters to come on header values present on the 2nd/nth row in case we have some additional information on the top rows.
<ExcelExport
data={data}
fileName="Products.xlsx"
ref={(exporter) => { this._exporter = exporter; }}
filterable={true}
>
Please refer the attached snapshots for actual and expected results needed from customization.
There seems to be bug in the React Grid around date formatting inconsistencies:
Current behavior
When entering a date format of {0:dd/MM/yyyy} for a ColumnData prop, when in edit mode a calendar picker shows the date format as US date of MM/dd/yyyy.Expected behavior
The date should show as dd/MM/yyyy per the requested date format.Minimal reproduction of the problem with instructions
Create a Kendo grid with one column with following ColumnData:
const settlementDate: ColumnData = {
field: 'settlementDate',
title: 'Setlement Date',
format: '{0:dd/MM/yyyy}',
filterable: true,
filter: 'date',
editor: 'date'
};
Note that the date is displayed as MM/dd/yyyy
Change the format to "dd/MM/yyyy"
Note that when in view mode the date is displayed as "dd/MM/yyyy".
What is the motivation or use case for changing the behavior?
Currently I have to create a custom date cell for every instance of using a date field in my grid which is less than ideal.Environment
Package versions:
@progress/kendo-data-query@1.5.2
@progress/kendo-dateinputs-react-wrapper@2019.4.1014
@progress/kendo-base-component-react-wrapper@2019.2.606
@progress/kendo-drawing@1.6.0
@progress/kendo-dropdowns-react-wrapper@2019.4.1014
@progress/kendo-base-component-react-wrapper@2019.2.606 deduped
@progress/kendo-react-data-tools@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-dateinputs@3.9.0
@progress/kendo-date-math@1.2.0
@progress/kendo-react-buttons@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-dropdowns@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-grid@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-inputs@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-intl@3.9.0
@telerik/kendo-intl@1.5.2
@progress/kendo-react-pdf@3.9.0
@progress/kendo-file-saver@1.0.7
@progress/kendo-theme-default@4.7.0
@progress/kendo-theme-material@3.5.0
@progress/kendo-ui@2019.3.1113Browser:Chrome (desktop) version 78.0.3904.108
System:
Platform: Windows
Other information:
It appears that there is an incompatibility as to what a text display field requires as opposed to what a date picker requires. For text display it requires a format of '{0:dd/MM/yyyy}' whereas the datepicker requires a format of "dd/MM/yyyy".
I am trying to lock first column in Grid, when I used the instructions in Kendo React documentation I tried the same but as you see in screenshots it's not working.
I would like to request the data-query package support filtering on OData collections using lamdba functions. Given a Collection with the existing operators, the filter string outputted by `toODataString` should be OData v4 compliant.
Example: Project is a collection. A user filters to see all General projects which outputs { field: 'Project', operator: 'eq', value: 'General' }.
Recommendation: Supply another key that dictates the lamdba operator and property field to use.
{ field: 'Project', operator: 'eq', value: 'General', lambda: 'any', collectionField: 'Name' } -> $filter=Project/any(x:x/Name eq 'General')
The above can work with inner functions like contains.
{ { field: 'Project', operator: 'contains', value: 'gen', ignoreCase: true, lambda: 'any', collectionField: 'Name' } -> $filter=Project/any(x:contains(tolower(x/Name),'gen'))
As in the JQuery version, it would be good to have the option of showing the total of a column's values without having to use grouping aggregates. For example i have 10 products with their prices and i would like to see their total cost in a row below the column, without having to use grouping which adds more elements to the Grid.
Hi,
The new KendoReact Drawer component looks amazing and works like a charm. It would be great if it supported sub-items similar to the PanelBar component. Having sub-items would simplify the development of sidebar navigation with KendoReact.
<PanelBarItem title={'About'} route="/about">
<PanelBarItem title={'Team'} route="/about/team" />
</PanelBarItem>
Regards,
Basel
Whether the Treelist supports multi column headers ,Nest columns in the columns definition?
Like the Grid
https://www.telerik.com/kendo-react-ui/components/grid/columns/headers/
Currently, the onLegendItemHover can be used to detect mouseover event on a legend item.
Suggest adding an event mirroring the mouseout event.
Kendo UI for jQuery implements this
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/legenditemleave
Existing implementation of Scheduler component has a very limited customization support. To cover some real use-cases we need:
Please advise on how to overcome those limitations as a short term solution and consider adding more Scheduler customization abilities to your Roadmap.
Example of highly configurable Scheduler/Timeline component: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/Timelines/React/Light/
Currently, ComboBox generates a UUID and uses it as the input tag's id property (e.g. <input id="2e048165-6468-46c0-ba39-c47b12c7fcf2" />).
As a developer, I want to be able to set my own custom id so that I can set my own label tag as a sibling to the ComboBox component.
For example, I would like this to be possible:
<label for="hello">Hello World</label>
<ComboBox id="hello" />
There is a label prop offered on ComboBox which works fine but it does not let me specify the label tag with custom class names, styling, etc.
This new id prop should be optional and ComboBox can keep using the same technique it does when no id prop is passed to it.