Questions on KendoReact Forum

1 answer

112 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

70 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

143 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

115 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

186 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

72 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.2K+ 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

2 answers

93 views

Popup is unable to find it's anchor only for Functional component.

Hi,

I only use Functional Component in my application. I want to use Popup control in my application, Popup control successfully finds its anchor for Class component but in the case of Functional component, the Popup is unable to find it's anchor and it always displays in the Top-left corner.

Please refer to attachment. For clarity, I have highlighted the Position of Popup for Functional as well as Class Component.

Thanks in advance.

Regards,

Vinod

General Discussions

answered on 17 Jul 2019

2 answers

259 views

DropDownList Default value from Async Source

Hi Stefan,

I am struggling with this currently. I simply want to default the dropdownlist based on an async data load. I am running a GraphQL query when the component renders, and wish to default the DropDownList to any item in that resulting data array that matches the route parameter passed in (if any).

I cannot find any examples showcasing this.

General Discussions

answered on 16 Jul 2019

1 answer

1.6K+ views

How to customize primary and secondary color in SASS-based Kendo UI themes builder monorepo shared

Hi,

We are trying to customize component level theming using Kendo SAAS based monorepo shared. We are trying to customize primary and secondary color for our application in "_variable.scss". Problem is, its only taking actual color name (like blue or red...) and not hexadecimal color format(#007AB4) or equivalent RGB color format like rgb(0,122,180). Please refer below screenshot.

However most of the other SAAS variables are accepting hexadecimal color notations. Could you please suggest how to customize?

Also, Currently we are searching for component level SAAS variables for component level behavior by using developer tools and trying to find the same in Component level layout.scss or theme.scss files and updating those. Building the repository to generate all.css and referring the same in our application.

This is laborious work and taking lot of time. Is there any easy way to do component level theme or layout customization?

Please suggest.

General Discussions