It doesn't possible to set different "no events" text for the Agenda component, can we add the ability to set it by prop like in the example below?

<Agend noEventMessage="No meetings" />

<Agend noEventMessage="No vacations" />

Hello, 

I am using Filter component from kendo-react-data-tools and I need to parse oData filter string in URL to initialize the filter component. Is there a way to convert oData string to filter data that Filter component can use ? I am using toODataString to convert filter to oDataString and I am looking for the opposite way。

Thanks,

Rita

Due to some recent need (remove the filter buttons) in a Grid I think that having the ability to provide a className for the filter of a column would be very usefull.

Hi,

I require the ability to use generate a PDF of React content using the PDFExport component, but instead of calling the `save()` function to download a file to the client's disk, return the blob/URI back to the JS which can be processed further.

I tried using the `drawDOM` method, however it doesn't support many of the features I require for `PDFExport`, such as 'Author', 'Title' and most importantly 'pageTemplate'. 

Is there a way I can use the drawDOM method to achieve the same functionality as the core PDF export? If not, could another method be exposed of `saveURI` which returns a promise similar to drawDOM?

In addition, is there any temporary workaround you can think of that would facilitate what I'm trying to achieve? I couldn't spot any event I could intercept to solve this problem.

Kind regards,

Thomas

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'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.

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

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

We are currently on implementing a component for data grids using the Kendo React Grid and virtual scrolling.
The problem is that the "page down" and "page up" is not working correctly, because of the virtualization (We already contacted the support for it).
Here is a stackblitz where the problem can be reproduced: https://stackblitz.com/edit/react-rapzu9?file=app/main.tsx
Reproduction steps:
1. Click inside the grid
2. Press "Page down" - Page changes, but focus goes to the header cell
3. Press "Page down" again - Nothing happens

Another problem which maybe has the same source is navigating with the arrow keys.
Reproduction steps:
1. Scroll somewhere deeper down
2. Use arrow up to scroll up again
3. At some point it scrolls not up anymore but the focus also changes into the header cell - Not okay

In my opinion its a bug, at least for the arrow keys. If you disagree please open a feature request for it, this functionality will be needed by out customers.

Best regards

Yui

Feature request

I am using the `AutoComplete` component to implement a search input and I want to be notified when the user selects an item (via mouse click or keyboard navigation) from the popup list.

I found an undocumented prop `handleItemSelect` on the `AutoCompleteHandle` ref object, and used it to implement my feature successfully.

Please can you expose `handleItemSelect` as an event on the `AutoCompleteProps` API.

Currently, you cannot specify a custom icon for `MenuItem`, e.g. a Material Design icon, as the `icon` prop only accepts the name of an icon from the Kendo font icons.

So please can you add a `iconClass` prop just like Button so we are able to use an alternative icon set.

Thanks.

According to https://www.telerik.com/kendo-react-ui/components/installation/source-code/#toc-source-repository the repo should be updated nightly. However it does not seem to be.

~/Projects/kendo-react-private (master)   git remote -v
origin https://kendo.git.progress.com/kendo-react-private.git (fetch)
origin https://kendo.git.progress.com/kendo-react-private.git (push)

~/Projects/kendo-react-private (master)   git fetch --tags

~/Projects/kendo-react-private (master)   git pull origin master
From https://kendo.git.progress.com/kendo-react-private
 * branch                master     -> FETCH_HEAD
Already up to date.

~/Projects/kendo-react-private (master)   git tag | grep v5
v5.0.0
v5.0.0-dev.202201182040
 
~/Projects/kendo-react-private (master)   git log
commit 4bf2535e414ba2f342ddbef8daac9ec052f04cc2 (HEAD -> master, tag: v5.0.0, origin/master, origin/HEAD)
Author: kendo-bot <kendouiteam@progress.com>
Date:   Tue Jan 18 22:41:34 2022 +0200

    chore(release): publish 5.0.0-dev.202201182040

v5.0.0 seems to be the latest tag. Could someone verify that the github repo is actually being updated?

Thanks for any help!

Hi,

The Telerik example for Inline Editing with Custom Editors uses a dropdown list with reference data hardcoded into the custom dropdown cell. This isn't a realistic scenario for for production code with dynamic reference data. If you pass the reference data for the dropdown to the custom cell then the dropdown loses focus every time you change the selected value. This can be seen by shifting the localizedData in the Telerik example referenced earlier from myDropDownCell.tsx to main and passing it as a parameter: https://stackblitz.com/edit/react-9ycz1i?file=app/main.tsx

Is there a workaround for this issue?

Kind regards,

David

After updating the kendo version in my project to "^5.1.0" I've noticed that both grid pager dropdown and normal dropdowns won't close when clicked outside if the dropdown is opened using the arrow icon.

I've attached a video with the issue.

Is there any workaround for this?

The `Surface` component, in the drawing module, has a few exposed event handlers. It exposes click, mouse enter and mouse leave. It does not expose a handler for mouse scroll wheel movement.

You can see the exposed handlers in the `SurfaceOptions` type ...

SurfaceOptions - React Drawing Component | KendoReact API (telerik.com)

Can you please expose the mouse scroll event handler?

A horizontal scroller or scroll list?  A list of items or chips can be scrolled through horizontally, either by using arrow buttons or drag.

This is a common way of accessing a long list of items on a phone - by swiping left or right on the list with your finger.

There are a couple of horizontal scroller controls available for react - but they are not complete, buggy and not supported.

We currently keep an image library for our customers where we allow them to upload images for use in the editor. Our existing implementation uses something called tinymce and MoxieManager. I see that the jQuery implementation has something similar, but it is not included in the react toolset. 

Can we get the ImageBrowser / FileBrowser part of the jQuery Kendo ported over to the react version?

I have attached an image for example.

As it happens, none of the existing ways of setting icons in the Button component work with either of the icon libraries we are using, which are:

1. Google Material Symbols, which uses ligatures to select icons rather than class names.
2. Material Design Icons via @mdi/react and @mdi/js, which renders programmatically generated inline SVGs.  These icons technically can be downloaded as finished SVGs for use with the imageUrl property, but only a single icon at a time, which is significantly less convenient than having access to the entire library at once when using the @mdi packages.

Rather than try to separately add specific support for these (and a thousand other) icon strategies, however, you could add support for both (and a thousand others) at once by just having something like an iconJsx property.  It would accept JSX.Element, and whatever it is given gets rendered inside the span.k-button-icon.k-icon.

So you could do something like this...

<h1>How will you attack?</h1>
{/* Google Material Symbols */}
<Button iconJsx={<span className="material-symbols-outlined">local_fire_department</span>}>Fire Breath</Button>
{/* @mdi/react + @mdi/js */}
<Button iconJsx={<Icon path={mdiKabaddi} />}>Target Weak Spot</Button>
{/* A poop emoji */}
<Button iconJsx={<span role="img" aria-label="poop">💩</span>}>Bio Weapon</Button>

To get something like this...

<h1>How will you attack?</h1>
<button class="k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-rounded-md">
  <span role="presentation" class="k-button-icon k-icon">
    <span class="material-symbols-outlined">local_fire_department</span>
  </span>
  <span class="k-button-text">Fire Breath</span>
</button>
<button class="k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-rounded-md">
  <span role="presentation" class="k-button-icon k-icon">
    <svg viewBox="0 0 24 24">
      <path d="M11.2 10.6C12.2 11.6 13.4 12.1 14.8 12.1L14.9 14.2C13 14.2 11.3 13.5 9.8 12.1L9.1 11.4L6.8 13.8L9 15.9V21.9H7V16.7L5.7 15.5V17.7L1.5 22L.1 20.6L3.7 17L2.5 13.5C2.3 12.9 2.6 12.4 3.1 12L6.4 8.7C6.8 8.2 7.3 8 7.8 8C8.3 8 8.6 8.1 8.9 8.3L11.2 10.6M24 11.9H22V8.5L20.2 7.8L21.1 12.2L22.1 17.4L23 21.8H20.9L19.1 13.8L17 15.8V21.8H15V14.3L17.1 12.3L16.5 9.3C15.9 9.9 15.2 10.5 14.4 10.9C13.5 10.8 12.6 10.4 11.9 9.7C13.5 9.4 14.6 8.6 15.3 7.4L16.3 5.8C16.9 4.8 17.8 4.5 18.9 5L24 7.2V11.9M11.4 4.4C12.5 4.4 13.4 5.3 13.4 6.4C13.4 7.5 12.5 8.4 11.4 8.4C10.3 8.4 9.4 7.5 9.4 6.4C9.4 5.3 10.3 4.4 11.4 4.4M16.5 .3C17.6 .3 18.5 1.2 18.5 2.3C18.5 3.4 17.6 4.3 16.5 4.3C15.4 4.3 14.5 3.4 14.5 2.3C14.5 1.2 15.4 .3 16.5 .3Z" style="fill: currentcolor;"></path>
    </svg>
  </span>
  <span class="k-button-text">Target Weak Spot</span>
</button>
<button class="k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-rounded-md">
  <span role="presentation" class="k-button-icon k-icon">
    <span role="img" aria-label="poop">💩</span>
  </span>
  <span class="k-button-text">Bio Weapon</span>
</button>