Hello,

We are fetching records from server and creating a dropdown list and would like to set the first item in that list as the default selected item in the dropdown. The example in the documentation only shows a hardcoded list with a "Select sport..." default item.We tried to set the default item to the first element in the async list, but the first element will show up twice in the dropdown! Please help:

import React from 'react';
import ReactDOM from 'react-dom';
import { DropDownList } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    sports = [ 'Basketball', 'Football', 'Tennis', 'Volleyball' ];

    render() {
              return (
                    <DropDownList
                          data={this.sports}
                           defaultItem={this.sports[0]}
                    />
);
}
}

ReactDOM.render(
<AppComponent />,
document.querySelector('my-app')
);

Hi, I am using the Autocomplete Dropdown component and I should not show the dropdown if there is a special character typed and instead display a message. I achieved that but I am unable to fix the dropdown display. Can someone help me out please?

Basic behavior to achieve is dropdown shouldn't be shown initially, and should show ONLY when user starts typing in something and do not show dropdown in case user enters special characters and show a message.

P.S: I might have multiple autocomplete on a page. Any way to simplify my code?

Stackblitz: https://stackblitz.com/edit/react-dvpfg5?file=app/main.js

Hi Stuff,

I have two questions, 1.Is there a way I can make the upload file to be a hyperlink? Now I set the autoUpload to be false. So once the file uploaded. The file name will be clickable.    2. Can I put a placeholder in the drag and drop box. such as the attachemnt picture.

<Upload
batch={false}
multiple={false}
onAdd={this.handleAddFile}
files={this.state.files}
autoUpload={false}
withCredentials={false}
onStatusChange={this.onStatusChange}
onRemove={this.onRemove}
restrictions={{
allowedExtensions: ['.pdf']
}}
saveUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/save'}
removeUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'}
/>      

Thank you.

Hi,

I want to add focus event on NumericTextBox.Can you please suggest how to add focus event to NumericTextBox as i have to trigger some event based on focus.

please find the below implementation  i need to achieve:-

<NumericTextBox type="text" name={name} className={cssClass} onChange={(ev) => this.onChange(ev) onFocus = {this.onFocusNumericGroupInput} />

onFocusNumericGroupInput = () => {
console.log("focus event fired")
}

Hi,

Is there an option to prevent minus symbol in numeric text box?

Regards,

Balaji

Hi,

 I am using Kendo react autocomplete search box in our project. (import { AutoComplete } from "@progress/kendo-react-dropdowns";)

 Whenever user starts typing in search textbox its shows best match from results highlight with box border. I want to remove this heighlight from best match which in middle of search result and  when user starts navigating using keyboard it should start from 1st item in search results. Is there any way to achieve this ?

Also for filter I am using operator: "contains", Is there any way to order result of filter as best match on top and then rest of matches.

I have a need to refresh a currently displayed KendoReact Grid with the latest data coming from the server (i.e. real time changes made by others). Is this possible currently with KendoReact's Grid component? If so, is there a demo that I can review the code to gather how to do this?

Thanks.

Jim Minnihan

SKF, Inc.

Anyone know how to do a name validation when I upload the files. Not the extension. 

<Upload
batch={false}
multiple={true}
defaultFiles={[]}
withCredentials={false}
restrictions={{
allowedExtensions: ['.xlsx', '.xls']
}}
saveUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/save'}
removeUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'}
/>

Thank you Very much

I have a zoomable Kendo React Chart where I have set a maximum on the . If the user zooms in and zooms out that max is lost.

In my particular use case, I have 2 series each with their own . The second series should really always be shown on a scale from 0-3. To do this I have set a max on the second Y axis to 3 but this is lost as soon as the user zooms.

I do want the user to be able to zoom but when they zoom back out I expect the user to be able to return the chart to its initial state of having a max of 3 on the . 

This  show this behavior: https://stackblitz.com/edit/react-l5udtx

Is there a recommended way to achieve this?

Hello,

We have a need to recreate the grid entirely when user selects an option from a dropdown. Both columns and data will be different.

Currently, I have tried updating the datasource being passed to the grid, but the old columns still remain.

Is it possible to get a demo on how to do this with the React grid version? This is a common use case.

Your help is appreciated,

Mihai