Hi Team,

I'm facing below issue when manually enter the value in the datepicker.

Control : DatePicker

 <DatePicker defaultValue={value} format="dd/MM/yyyy"  />

Step 1: Manually I'm trying to enter the data as 01/01/2021 and clicked outside the datepicker control ( now the focus is out of the datepicker ).

Step 2: Now try to change the date (day) by entering  "2".  (Our Expectation is system should display the date as 02/01/2021 instead it is appending the date and displaying as 12/01/2021)

Every time system is expecting the user to clear the existing value and then enter the new value. 

Can you take this as feature request. Value should not get append to existing value. It should overwrite.

Reference Ticket URL : https://www.telerik.com/forums/datepicker-when-user-enter-the-date-manually-the-value-getting-appended-with-the-previous-value

If this is taken as feature request when will it get delivered.

Looking for callback for what item was dragged or resized. 
coz we have as well Charts(HighCharts) inside not automatically resizing and we need to determine what item was resized to be able to trigger charts inside to redraw.

https://github.com/telerik/kendo-react/issues/865

Hello,

The Form component does not allow me to submit unless I modify the initial values. We have a Form that is provided with initial values that may not need to be modified by the user first - the data is all valid and acceptable. The user, currently, would need to purposefully modify one of the Field values in order to get the Form to realize that it can be submitted.

I'm aware of the submit click event but that event does not perform any validation.

I believe there needs to be some middle area where the Form can be provided initial values and be allowed to submit without having to modify the form first.

I have created a code sample showing the scenario below ...

https://stackblitz.com/edit/react-wf5veh-reyjj3?file=app/main.jsx

Thank you

Hi Team,

we are looking same property in Kendo Tree View React Version.

https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview/configuration/dataspritecssclassfield

could you pls check the feasibility and add the same?

Hello, 
I am looking to start using the Kendo React grid control, but I need the grid to be responsive to support viewing on a phone. I noticed that your Angular grid has this functionality, but it is missing from your React grid. 
I would like to have rows turn into individual cards when viewed on a phone. The closest thing I see in the react documentation involves hiding columns, which is undesirable.  Is there a way to add this behavior to the React grid?  If not, when will that be implemented?  
Thank you, 
Alex

Hi,

I've got a large form I'm making. When the page the form is on first renders, I maker a server call and get back a large javascript object:

serverData = {id: "1", ClientID: "1423", EstSentDate: "2021-07-08", .... }. The date strings are ODCB standards for date strings.

The form displays the current values of all these fields. For all the other field types, I give the form the prop initialValues={serverData}, and if the field names match the object keys, it populates the field with the data nicely.

The datePicker is encountering an error though. It looks like it expects a Date object and not just a string. Is there something I can do within the DatePicker component, or the field containing it, to resolve this, without having to parse the entire data set I receive for all dates and convert them to Date objects, and feed that into a new object to pass to the form?

Being able to populate the entire form with the simple line initialValues={serverData} would be the best outcome for us.

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,

The Kendo React Form Handle Submit event provides complete data over all fields, even the unchanged ones. While this is good for traditional submits, we are building upon a REST service that has HTTP patch support,  wherein we intend to submit only those fields (properties) that have changed. 

While a deep compare with initialValues and handleSubmit data property is possible, we were wondering if the Kendo Form component itself has some property Or method that allows us to get the changed values only.  This will save us the deep compare efforts, time and issues, especially with forms that have hundreds of fields.   

If Kendo library has some deep compare method available, please do include that as well.

Kindly advise.

Currently the TileLayout will allow you to drag a Tile when you click and drag anywhere within the Tile. This doesn't combine very well with content within a Tile that might have click-and-drag functionality or even just click functionality. A small click within a Tile causes the Tile to visually "lift up" in preparation for dragging.

It'd be nice if there were a setting to enable dragging only on the Tile header portion or somewhere.

Currently I have to add a toggle somewhere on the page that disabled or enables dragging.

Set the default width of the MultiColumnComboBox columns based on the input width.

In order to position the Popup of the MultiColumnComboBox correctly, we need each column to have fixed width.

Currently, we are setting the default width to 200px for each column that has not width set from the options.

We can add a second option to take the width of the input, subtract the width of the columns with fixed width and divide the remaining space between the other columns.

Hello team,

We work on a product that features a large set of input components that are based on the Kendo inputs and dropdowns. We have custom designs that require us to customize the Popups of comboboxes, multi-selects, color pickers, etc with specific layout and styling, open/close animations, blur handling and keyboard interactions (e.g. closing on Esc). This is done fairly easy with the Date Input components (DatePicker, DateTimePicker, DateRangePicker, TimePicker) as they expose such property:

popup?: React.ComponentType<PopupProps>;

However most other controls that use a Popup internally expose just PopupSettings that is not enough for us even with the "appendTo" option.

We would be happy to see a similar ability (as in Date Inputs) to inject the Popup component in:

• Components in the "@progress/kendo-react-dropdowns" package.
  Most of them simply reuse the same ListContainer component that renders the Popup.
• ColorPicker in the "@progress/kendo-react-inputs" package.

I guess that customizing the popup in the DropDownButton, FloatingActionButton and SplitButton would also be nice to have but for those CSS styling does good enough job for us.

Regards

Currently, the TabStrip has a built-in Fade animation.

We provide a property to allow setting different types of animations like Slide, Push etc.

We currently use grouping in the Kendo Grid, however the groups are always sorted alphabetically by the name of the group.

In our case, we want the groups to be sorted another way: an order value that corresponds to the group name.

To do this, it would be good if we could specify a comparison function, and have it take a object we provide (a map between the group name and order value).

We currently work around this by prepending a character to the group name to have it sort correctly (see screenshot). As you can see, it's not very appealing.

We are using @progress/kendo-react-grid@4.6.0

Hi there, 

I would like know how can we customize the TimePicker of the DateTime picker?

We can perform the customization of calendar as guided by the link below.

https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/custom-rendering/#toc-customizing-the-calendar

My question is how can I customize the Time Picker of the Datetime Picker since I can't find the time picker relevant props from the DateTimePickerProps?

Thank you!

Please allow the Switch component to accept a title prop so that the Tooltip component can be used with Switch. Switch doesn't really support long labels, or labels at all in some themes, so it would be nice to be able to use Tooltip component with Switch component.

Dear Support Team,

 I have numbers of kendo charts in my app, but I need to modify the boder-radius for the tooltip of my donut chart.

I've checked, with the browser, the existence of a couple of CSS classes I can work on, but they are generic and they work for all the charts in the app:

.k-sparkline-tooltip-wrapper>.k-popup, .k-chart-tooltip-wrapper>.k-popup (classes for the ChartTooltip component: for this I can ad an ID)

Inside this component the Kendo library creates a new component, which I can't configure any IDs on and owns the css class k-chart-tooltip k-chart-tooltip-inverse needed to override the border-radius property.

Is there a workaround or any other configuration to set the border radius for a tooltip of a single chart, without modify all other charts in my app?

Thank you

Kind regards