Questions on KendoReact Forum

5 answers

1.6K+ views

Multiselect with checkbox and with 'All' node and all items selected by default.

Hi,

In the example below:

https://stackblitz.com/edit/kendo-react-multiselect-checkboxes?file=app/main.jsx

I have two requirements:

1) Can we add an 'All' item to select all items.

2) I want to keep all the entries/options selected by default when it loads.

Regards,

Vinod

General Discussions

answered on 25 Jul 2019

1 answer

419 views

Fixing floating labels

The Kendo React components seem to have adopted a floating label as their standard. While I think that's a good idea, I do have a question about compatibility between these components and Material-UI.

One of the capabilities that Material-UI text fields provides is the ability to have the label continue to float even if the content of the text field is null. It accomplishes this by passing setting the shrink property to true in the InputLabelProps. For example.

Is there any way to achieve this behavior in the Kendo React components? Or, if not, are they any plans to add this functionality to a future version?

Thanks

General Discussions

answered on 25 Jul 2019

1 answer

86 views

Datepicker control

Hi,

with angular datepicker I can write 5112019 a I will get 5/11/2019 but with react datepicker I have to write it as 5 (space or right arrow) 11 (space or right arrow) 2019. Is it possible to control react datepicker only with numeric part of a keyboard? Or any advice how to achieve similar behavior as in angular datepicker?

General Discussions

answered on 25 Jul 2019

1 answer

149 views

Chart constructor called without theme css

I am working on a small project to build a Grafana plugin that essentially acts as a wrapper around the Kendo React UI.

While Grafana gives me a way to specify what css files to load for my plugin, it does not give me any kind of guarantee that those css files will have completed loaded before the component is mounted. When this happens, the "Chart" function ends up being called with a "themeOptions" parameter that is set to useless defaults (one consequence of this is that all of my charts are drawn with their fill set to (0,0,0,0)).

To me there seems to be bugs on both sides leading to this problem. Grafana should do a better job at loading required files before it mounts my components, and Kendo React should more gracefully handle this type of situation. Once this has happened, future renders are stuck with those theme-less defaults until I actually destroy the component.

On the Kendo React side of things, I would be interested in knowing if there is a good workaround, or better way to structure my project that I am not aware of. I can see that in other Kendo UIs there are APIs that would allow me to change the theme manually, which could work.

If I want this plugin to be a standalone thing, then I do not have the option of including a stylesheet link in <head>. I have to work entirely within the div assigned to my plugin by Grafana.

General Discussions

answered on 24 Jul 2019

3 answers

87 views

Bug where Grids filter without input

There is an annoying bug in the Kendo React Grid filters. If you open the filter menu and select a filter type without supplying a value, it still sends the request for data to the backend using that filter. But the ASP.NET MVC kendo ToDataSourceResult can't handle this as the `value` is `null`, because the filter input is empty. Worse, it throws an exception on the backend request and the grid empties itself as the response had no rows in it.

Is there an accepted way to work around this, preventing it from making requests when no filter value has yet been entered? I'm trying to avoid having to write a handler on our controller methods that will strip filters that have Value of `null`, expecially since the interface of the Filter collection on the dataSourceRequest doesn't explicitly state there will be a value property.

General Discussions

answered on 24 Jul 2019

1 answer

187 views

Is forceupdate mandatory when we perform selection change on Grid

Is forceupdate mandatory selectionChange when we perform selection change on Grid.

Can i display selected/ deselected status as checked/unchecked without calling forceupdate .

General Discussions

answered on 23 Jul 2019

3 answers

146 views

Dynamically add columns of image type to GridColumnProps column collection

I have column collection of type GridColumnProps, i want to dynamically add columns to these collection. I there any way to do that.

General Discussions

answered on 23 Jul 2019

3 answers

222 views

Kendo ComboBox TypeError when hitting enter on an invalid Value

We have a Kendo ComboBox configured as the following:

<ComboBox

loading={isLoading}

placeholder="Enter item number.."

data={sourceItems}

allowCustom={false}

filterable={true}

onFilterChange={value => {

const userInput: string = value.filter.value;

setComboBoxValue(userInput);

userInput.length >= 1 && filterData(userInput);

}}

onChange={value => {

handleComboBoxChange(value.target);

}}

itemRender={(li, itemProps) => {

const item: IItem = itemProps.dataItem;

let itemChildren = null;

if (item.action === 'default') {

itemChildren = (

<span>

{item.itemNumber} - {item.description}

</span>

);

}

return React.cloneElement(li, li.props, itemChildren);

}}

value={comboBoxValue}

/>

But there's a bug: When you start typing a value that doesn't match any of the autocomplete items it will throw this error in the browser console:

onloadwff.js:71 Uncaught TypeError: Cannot read property 'type' of undefined

at e.setFieldValue (onloadwff.js:71)

at HTMLFormElement.formKeydownListener (onloadwff.js:71)

I'm now unsure what will happen if/when this gets fixed and if other parts of my application will need to handle these invalid values or not.

General Discussions

answered on 23 Jul 2019

1 answer

134 views

Need to have onClick Event on PanelBarItem of the <PanelBar> component

Hi,

I am trying to use PanelBar within a drawer component. I want to be able to navigate on the click of PanelBarItem item. From what I gather from your website (https://www.telerik.com/kendo-react-ui/components/layout/api/PanelBarProps/) is that the onSelect() event is available on the PanelBar and not on PanelBarItem.

Could you please provide an example where in I could use the click of PanelBarItem for navigation purpose.

I tried below code, but instead of <List> and <ListItem> I want to use PanelBar and PanelBarItem. Code below for your reference. Thank you.

<Drawer
variant="permanent"
className={classNames(classes.drawer, {
[classes.drawerOpen]: props.drawerOpen,
[classes.drawerClose]: !props.drawerOpen
})}
classes={{
paper: classNames({
[classes.drawerOpen]: props.drawerOpen,
[classes.drawerClose]: !props.drawerOpen
})
}}
open={props.drawerOpen}
>
<List>
{/* todo: offset for appbar */}
<div className={classes.toolbar} />
{props.data.map((item, index) => (
<ListItem
button
key={index}
component={Link}
to={item.name}
onClick={() => handleMenuItemClick(item)}
>
<img
alt={item.title}
src={`Images/Icons/24x24/${item.iconUrl}`}
/>
<ListItemText
className={classes.menuItemText}
primary={item.displayName}
/>
</ListItem>
))}
</List>
</Drawer>

General Discussions

answered on 19 Jul 2019

3 answers

1.3K+ views

How to freeze header row of kendo react grid.

Is there any way to freeze header row of kendo react grid when i we do scrolling from window scroll bar not the scroll bar in the grid.

Also i want to remove the scrolling area from the grid id there any way to achieve that as well. Please find the screen shot for this the area is highlighted.

General Discussions

answered on 19 Jul 2019