Telerik Forums
KendoReact Forum
1 answer
731 views

I will sometimes see the wrong tooltip label in cells on my grid. I want the tooltip to appear on the hover anywhere in a particular td that has messages to display. These messages are based on props of the dataItem being available. There are a few problems.

  1. Sometimes the tooltip will show the wrong content
  2. The tooltip jumps between the td and the svg/path from fontawesome-react. The svg/path does not have a title so I don't understand why it anchors there instead of the td.
  3. My grid is inside a splitter. Sometimes the tooltip will jump to the top/left of the splitter pane and be visible while I am in edit mode.

1 & 2 are visible/reproducible in my stackblitz. I have been unable to replicate 3 in stackblitz so I was wondering if it was related to my splitter (not implemented in stackblitz to save time..)

Ideally I would only have one <Tooltip component for my grid but it becomes unnatural to me to have to iterate state from the Grid component instead of at the cell level. I do want the tooltip to be interacted with via the icon when in edit mode as well but I have not implemented that here. Is there a better approach that preferably avoids the use of globals?

Stefan
Telerik team
 answered on 18 Sep 2018
1 answer
92 views

It's been nearly 1 year since I submitted a post about Kendo UI React Scheduler.  The is still a wrapper.  Are there any plans to make the scheduler a component and if so when.  Thank you - Mark

Vladimir Iliev
Telerik team
 answered on 17 Sep 2018
1 answer
139 views

I'm using a modified example of the in row editing. When a cell is clicked I switch the row to edit mode. I've inspected both the cellRender and rowRender methods and I don't see any properties to indicate the editable={false} from my GridColumn props. The cell rendering routine must know this in order to control the display. Is there a property I am overlooking?

I want to preventing switching my row to edit mode if the cell clicked is not editable. Help appreciated. See my example on stackblitz. When clicking a cell it shows the editField in the header which is what I want to prevent on the click of a non-editable cell (all are marked as editable false here).

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

Stefan
Telerik team
 answered on 07 Sep 2018
2 answers
58 views

This is a new behavior when I upgraded from 1.1.0 -> 1.3.0. Click toggle a few times and you will see how the widths are lost. Am I doing something wrong or is this a bug?

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

Stefan
Telerik team
 answered on 07 Sep 2018
1 answer
788 views
Warning: Failed prop type: Invalid prop `children` supplied to `Button`.
    in Button (created by App)
    in App

How can I resolve this warning? It seems to dislike anything other than a text node.

class SimpleThing extends React.PureComponent {
  render() {
    return <span>Thing</span>;
  }
}
 
class App extends React.Component {
    render(){
        return(
            <div class="example-wrapper">
                <div className="example-col">
                  <p>Button</p>
                  <Button><SimpleThing /></Button>
                </div>
            </div>
        )
    }
}

https://stackblitz.com/edit/react-m5avfp?file=app%2Fmain.js

Stefan
Telerik team
 answered on 07 Sep 2018
1 answer
715 views

Two questions about the aggregate feature: https://www.telerik.com/kendo-react-ui/components/grid/grouping/grouping/:

1.      Do we have some kind of groupHeaderTemplate function to customize the template of group header? Like what JQuery has:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.groupheadertemplate

or

2. For the example in

https://www.telerik.com/kendo-react-ui/components/grid/grouping/grouping/

Can we aggregate the summary information on the header, instead of footer?

Stefan
Telerik team
 answered on 07 Sep 2018
3 answers
86 views
kendo ui stops toggling the item if expanded mode = single how to fix this in react?

try here with >expandMode=single Visit https://www.telerik.com/kendo-react-ui/components/layout/panelbar/expand-modes/
Stefan
Telerik team
 answered on 05 Sep 2018
7 answers
2.1K+ views

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.

 

Parag
Top achievements
Rank 1
 answered on 05 Sep 2018
2 answers
357 views

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!

Joe
Top achievements
Rank 1
 answered on 04 Sep 2018
1 answer
91 views

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

 

 

 

 

 

 

Stefan
Telerik team
 answered on 28 Aug 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Henri
Top achievements
Rank 2
Iron
Iron
Iron
SUNIL
Top achievements
Rank 2
Iron
Iron
Iron
David
Top achievements
Rank 1
Jackson
Top achievements
Rank 1
Iron
Iron
Tim
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Henri
Top achievements
Rank 2
Iron
Iron
Iron
SUNIL
Top achievements
Rank 2
Iron
Iron
Iron
David
Top achievements
Rank 1
Jackson
Top achievements
Rank 1
Iron
Iron
Tim
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?