In another thread named: "", it was discussed how to set the focus to a grid cell in a KendoReact Grid control. Here's the example provided from that thread:

>>

"This can be done by selecting the desired element based on a query selector and calling its focus method:
      https://stackblitz.com/edit/react-lthy76?file=app/main.js"

<<

That's a pretty good example, however in real UX it doesn't work that way....

Under a normal use case for UX, you would not want the user to have to press a button such as "Focus Input" or "Focus Textbox" prior to then selecting an inline Edit button. What users would more likely want to see is when they press the inline grid Edit button that the focus immediately appears on the particular column that starts the editing.

Thus, in my use case, I have a single editable textfield inside a Grid, and using the code from the example in stackblitz above,

i.e. >>

    let firstInput = document.getElementsByClassName('k-textbox')[0];

    if (firstInput) {

      firstInput.focus();
   }

<<

inside an enterEdit(dataItem) function called from an Edit command cell (from code grabbed from the KendoReact Grid documentation)

the result is that firstInput is always "undefined" and focus is never given to that cell.

BTW, Here's the full enterEdit() routine:

enterEdit = (dataItem) => {
   this.setState({
     originalItem: dataItem
   });
   this.updateGridData(this.state.data, dataItem).inEdit = true;
   this.setState({
     data: this.state.data.slice()
  });
  let field = document.getElementsByClassName('k-textbox')[0];
  if (field) {
    field.focus();
  }
};

Is there a reason why the field is always "undefined"? Could this be a timing issue? Does the focus need to be preset prior to a call for editing?

Can anyone shed some light on this issue?

Thanks,

Jim Minnihan

SKF, Inc.

I find that I must explicitly set a width in order for a Kendo React Chart to fill the parent's width if it is inside a Kendo React TabStrip.

This is true for any version of kendo-react-layout newer than 1.2.0-dev.201806281338.

This  demonstrates the issue: https://stackblitz.com/edit/react-armuz6

Notice the chart outside of the TabStrip takes up the available width but the chart inside the TabStrip does not.

Also worth noting that other components that I nest inside of the TabStrip do not exhibit this. They take up the full width as expected. 

When you add a KendoReact Editor component as a child of a Form component, the toolbar buttons submit the form. This is actually a defect in my opinion, so I filed a bug on it. The buttons are rendered as html button elements without a type attribute, which means they default to submit buttons.  I would still like to use this Editor, so until that is fixed is there currently a way of overriding how toolbar buttons are rendered?

Here's the bug I filed: https://github.com/telerik/kendo-react/issues/219

I have products.json file with all categories as object. It works fine if the data format is in the below link but it fails if categories in that json is an array. I am trying to create a react grid with one column from array of category items.

Example: https://stackblitz.com/edit/react-txwobq?file=app/products.json
It works fine with categories block as

<Column field="Category.CategoryName" title="CategoryName" />

in grid code with the below json object

"Category" : {"CategoryID" : 1,"CategoryName" : "Beverages","Description" : "Soft drinks, coffees, teas, beers, and ales"}

But I get the external api in array format for categories like

"Category" : [{"CategoryID" : 1,"CategoryName" : "Beverages","Description" : "Soft drinks, coffees, teas, beers, and ales"}]

I tried reading this value in react kendo grid like this but no luck. What was the mistake I am doing?

<Column field="Category[0].CategoryName" title="CategoryName" />     

Hi,

I see no way to modify the group header template. I don't want to have to alter our data (which I've seen as a proposed solution) or use HeaderCell's, but instead display the total of items grouped in the header. Even better is a way to change the group header title to whatever title we like.

For example, if our dataset contained customers and their orders, we would want to group by customer name and have the number of their grouped orders in brackets in the header title, e.g.:

Customer 1 (3)

Order 1

Order 2

Order 3

Customer 2 (2)

Order 4

Order 5

etc. Is this possible?

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