Currently, the Scheduler events are always placed between the beginning and the end of a slot, no matter if the event actually starts or ends at the slot times. So if an event for example starts at 10:10, the event is placed at the 10:00 slot line and not a little further down below, or if it ends at 11:50 the event end is placed at the 12:00 slot line. I'm talking here especially about the WeekView and the DayView.

This is not accurate enough for some events. Like for example in MS Outlook, if a event doesn't start at the full hour, the graphical representation shows it according to the start time and not at the full hour (see screenshots). We would like to request to make it possible to place events on the Scheduler so that the graphical representation of the event reflects the actual start and and time.

While I was able to calculate a margin for the event start to move it to a more accurate position, it was not possible to also set the height of the event to a calculated positition because the Scheduler doesn't allow this. According your support (see here), an event always has to end at a full slot time and can't be placed somewhere else. Calculating these things on our own brings a whole lot of other problems though (like placing overlapping events correctly, etc.) so that it would be great if the Scheduler had a setting to allow exact positioning according to times.

Hello Team,

We have got this requirement to open date range picker using a single button input. Is there any way I can achieve this. I can see there is endDateInput and startDateInput available but it still renders 2 different inputs. But we want single button to control whole thing.

Thanks,

Gaurav

I'd like to turn off even/odd row highlighting for the Grid and use cell border instead.

I can do it by learning kendo css classes and override particular properties for certain classes but... I have many different vendors for different components and it's so a pitty to learn all the css classes hell...

It'd be supper cool to have something like turnOffAlternation/alternatingRows and showCellBorder/showBorders  attributes on the Grid.

Hello,

I am using React Multiselect in my project. I need every item in the multiselect component selectable with checkboxes and multiselect itself filterable. It would be very nice if you add this features to Multiselect component as built in. There is a workaround which I share links below for this but we need to do all this stuff manually.

1. Checkboxes:

• https://stackblitz.com/edit/kendo-react-multiselect-checkboxes-moavl9?file=app%2Fmain.jsx

2. Filterable

• https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/filtering/#toc-basic-configuration

Thanks

Issue #1

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={2}
    />
  );
};

When:

Add couple text lines to extend TextArea size and remove these empty lines in any way.

Then:

Content from TextArea field is removed but TextArea height stays the same, doesn't come back to it's initial value. It's different comparing to example from your docs where example contains uncontrolled component.

Issue #2

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={4}
    />
  );
};

and styles like these

.k-textarea textarea {
  border: 1px solid blue;
}

When:

Start typing anything

Then:

Height of textarea component is decreasing

Example on stack blitz

Issue #1

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={2}
    />
  );
};

When:

Add couple text lines to extend TextArea size and remove these empty lines in any way

Then:

Content from TextArea field is removed but TextArea height stays the same, doesn't come back to it's initial value. It's different comparing to example from your docs where example contains uncontrolled component.

Issue #2

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={4}
    />
  );
};

and styles like these

.k-textarea textarea {
  border: 1px solid blue;
}

When:

Start typing anything

Then:

Height of textarea component is decreasing

We'd like the sorting to be correct and not based on the browser settings.

From support ticket:

We've noticed that our grid is not sorting correctly in our local language (Swedish). I've added LocalizationProvider and IntlProvider around it. The translation works fine.

In Swedish it would be sorted: A, B, Å

It's common in software that A and Å is sorted next to eachother but this is wrong.

I've tried using locale "sv" (language) and "se" (country) but neither sorts it correctly.

Reply on support ticket

We are internally using the built-in JavaScript method localeCompare to compare the values:


    if (a.localeCompare) {
        return a.localeCompare(b);
    }
That means that we will compare the data based on the current browser locale. Still, the result can vary based on the machine. In cases, like this one, we can recommend using server filtering the ensure that the results are specific to the Swedish culture regardless of where this is loaded.

Another option can be to log a feature request that will take the culture parameters from the IntlProvider and pass it as a second parameter to the localeCompare function.

Imaging a GridColumn field that is a simple object {name:"My Item", value: 123}. It would be great to be able to define properties of the object as what to display without having to build a custom renderer.

displayField/displayFunction as a callback function with the fieldName of the columns and the dataItem of the row as parameters

const nameDisplay = (field, dataItem) => {

   return "some value"

}

...

<GridColumn field={"name"} displayFunction={nameDisplay}

we have X(cross) for combo box but it is not coming for datetime picker 

Hi,

we are currently using the Kendo jQuery PivotGrid in our application. We have already migrated some controls to React in our application and would like to switch the PivotGrid to React as the next control.

In the jQuery PivotGrid there is the possibility to export the configured PivotGrid to Excel. You can see the feature here: saveasexcel

Is this functionality also available with the React PivotGrid? And can you show us an example how to use this feature to export the pivot grid data to excel?

If this functionality doesn't exist yet, when can we expect it? Are there already plans for this or can you already vote for it somewhere?

Regards,

Oliver

We are migrating our legacy application which uses Telerik for Silverlight to react application with KendoReact controls. I am converting one screen which uses RadTreeView which gives us Drag and Drop with Reordering feature. Now, in KendoReact, TreeList control does not provide both the features. 

Here is what we get when we start dragging item in Silverlight control:

I am expecting the same behavior in KendoReact: TreeList as we have to achieve the same behavior in our react application. This link has some discussion with support team.

Thanks,

here is a quick repro: https://stackblitz.com/edit/react-dfwz3q?file=package.json

in package.json just switch @progress/kendo-react-grid from 4.10.0 back to 4.9.0 and the column menu renders.

bug still present up through 4.11, 4.12, and @latest 4.13

What I would like to see is a full height Panel anchored to the body tag similar to a drawer, but the panel would allow me to set the Title, Close Button, and Content manually.  My intent is to create forms in the panel or to use the panel to display details of a single row of data.  What you have appears to be geared towards navigation or the display of discrete data only.

<Panel

isOpen={boolean}

hasCloseButton={boolean}

isBlocking={boolean}

footerIsSticky={boolean}

titleIsSticky={booelan}

width={number or string}

panelPosition={"start", "end" - similar to flex positions

header={JSX.Component or string}

title={JSX.Component or string}

/>

<Content>{Placeholder for Content}</Content>

<Footer>{Placeholder for Footer Content}</Footer>

</Panel>

The layout would be

------- Top Sticky

Header      Close Icon

</hr>

Title (could be in the sticky or not)

------ End Top Sticky

Content - Scrollable

Footer

Right now you have the ability to mark a field "Optional" in the label component.   This is fine unless you have a large form and almost everything is optional.  It will then look cluttered.

On the other hand, you don't have a "Required" option.  

I would like to add a prop for subtext so that I can change the  subtext from "optional" to anything I would like such as * or (Required).

Hi Team,

we are looking the similar functionality in React Grid? Could you implement this feature in feature releases? 

 columns: [
        {
          field: "id",
          width: 80,
          filterable: {
            operators: {
              number: {
                eq: $translate.instant("Is equal to")
              }
            }
          }
        },