Hi,

I want to change the hover Red color inside kendo dropdown as shown in below screenshot. Can anyone please tell me in which file and what is the css class name for same.

Hi all

I'm using the React Panelbar together with the React router, something like

<PanelBar expandMode={'multiple'} onSelect={this.onSelect}>
    <PanelBarItem title='Overall views' route="/monitoring/overview" expanded={true}>
        <PanelBarItem id='overviewLink' title='All Resources' route="/monitoring/overview"/>
        <PanelBarItem id='appmonitorLink' title={'AppMonitor'} route="/monitoring/appmonitor"/>
    </PanelBarItem>

This all works nicely, when clicking the respective items in the PanelBar, the application is routed accordingly.

But when I navigate directly to a specific URL (e.g. via a button/selectable item in the application, or via the browser Back button), the selected item in the PanelBar is not correctly updated. The selection either stays with the last clicked PanelBarItem, or simply no item is selected. The routing in the application itsself works as expected.

Is there somewhere an example what I need to do to keep the selected PanelBarItem in sync with the application state?

BTW: When using https://www.telerik.com/kendo-react-ui/components/layout/panelbar/routing/ clicking different PanelBarItems and then browser Back, it shows the same behaviour. Application state is updated correctly, but the wrong PanelBarItem remains selected

Thanks for any hints!

I built a default ASP .NET Core Web Application with React support enabled.

This built and ran.

I then used the example from the Kendo React Grid - https://www.telerik.com/kendo-react-ui/components/grid/

to add a Grid to the example code, replacing a table.

If I run the sample in IE 11 I get an exception in the following function :

export function registerForLocalization(component) {
    var ctx = {
        kendoLocalizationService: PropTypes.object
    };
    if (component.contextTypes) {
        Object.assign(component.contextTypes, ctx);   <<<<<<<<<<<<<<<<<<<< unsupported in IE
    }
    else {
        component.contextTypes = ctx;
    }

This seems to be because the Object.assign function is not supported in IE.

If I run in Edge or Chrome, the page loads, then it quickly fills the page with Error messages such as :

ERROR in [at-loader] ..\..\..\node_modules\@types\prop-types\index.d.ts:10:38 TS1005: '=' expected.
ERROR in [at-loader] ..\..\..\node_modules\@types\prop-types\index.d.ts:12:46 TS1005: ';' expected.
ERROR in [at-loader] ..\..\..\node_modules\@types\prop-types\index.d.ts:12:75 TS1005: ';' expected.
ERROR in [at-loader] ..\..\..\node_modules\@types\prop-types\index.d.ts:12:99 TS1005: ';' expected.
ERROR in [at-loader] ..\..\..\node_modules\@types\prop-types\index.d.ts:14:54 TS1005: ';' expected.
ERROR in [at-loader] ..\..\..\node_modules\@types\prop-types\index.d.ts:14:78 TS1005: ';' expected.
ERROR in [at-loader] ..\..\..\node_modules\@types\prop-types\index.d.ts:14:81 TS1109: Expression expected.
ERROR in [at-loader] ..\..\..\node_modules\@types\prop-types\index.d.ts:14:97 TS1109: Expression expected.
ERROR in [at-loader] ..\..\..\node_modules\@types\prop-types\index.d.ts:14:122

Any ideas how to resolve either of these issues ?

Is there a working example of using the controls with ASP .NET Code Web in React ?

Thanks,

Dave

I don't see how to trigger the display of a validation message. The stackblitz examples from https://www.telerik.com/kendo-react-ui/components/inputs/input/forms/ don't offer much insight. I don't have my inputs in a form, and I want to control when the validation popup is displayed. Can it be set to display for a time interval? Or is it on/off?

Help appreciated

Hi,

I'm trying to implement a grid table using data which is an array of objects. Currently, my code looks something like this:

let data = [
      {
          test: "test",
          dog: "dog",

          cat: "asld"
      },
      {
          test: "afljsdojf",
          dog: "cat",

          cat: "sadfasdf"
      }
    ];

<Grid data={data} >
       <GridColumn field="test" title="Test" />
       <GridColumn field="dog" title="Dog!"/>
</Grid>

When it renders, by my interpretation it should show a table with two columns, with headers "Test" and "Dog!". Instead it shows a table with headers "test", "dog", and "cat", so essentially it's ignoring the <GridColumn> tags. 

Any advice would be appreciated!

Hi,

I have a question about react multiselect component. How I can prevent collapse after I select item from multiselect. I saw in your api, it has onClose prop, which I should definitely use, but cant find anything, where I can .preventDefault() function.

https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/

Thanks.

I have a question about TreeList wrapper component. I need exactly this component.

https://www.telerik.com/kendo-react-ui/wrappers/treelist/editing/ 

But is it possible to do drag&drop there? I need to move objects only in their own array, I dont need them to move to their parent / child.

Another thing is that I want to active inline edit just by click on some cell, as you can see here: https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/.

If those two requests arent possible in this TreeList component, is it somehow possible to manage that via react grid component since it supports inline edit and drag&drop, but problem for me is, that each detail grid creates his own table which I dont need.

Hi,

I trying to incorporate Kendo React Components with an existing React SPA.

Trying I can successfully add a grid to a page, here is a snippet of my Component:

The problem is, I doesn't detect the GridToolbar or the GridColumns, so my GridToolbar is not visible and my columns aren't formatted as required.

Troubleshooting the problem I took a peek into my node_modules folder under @progress\kendo-react-grid\dist\es\Grid.js to see how the Grid component detects GridToolbars and GridColumns.  I found the following:

As I am using Webpack to bundle my script files, including vendor imports, I has a look at the file Webpack generated script file to see how it was imported:

As you can see Webpack has replaced the type references with it's own types, hence the conditional statements can never resolve to true.

What is the best wayto configure webpack so it can import Kendo React components with causing the above issues?

Thanks.