Declined
Last Updated: 27 Apr 2021 10:44 by ADMIN
Created by: Aske Hippe
Comments: 1
Type: Bug Report
0

The navigation sidebar smooth scroll animation doesn't work for the Calendar component.

Here is a codesandbox that showcases the issue: https://codesandbox.io/s/hopeful-river-sk4oc?fontsize=14&hidenavigation=1&theme=dark

Thanks in advance for fixing this :-)

 

Declined
Last Updated: 27 Apr 2021 10:42 by ADMIN
Created by: Aske Hippe
Comments: 1
Type: Bug Report
0

Hi there!

I've written this component for a custom message input box for the Chat in Conversational UI for React:

import { ChatMessageBoxProps } from '@progress/kendo-react-conversational-ui'
import { FC } from 'react'

const CustomChatMessageBox: FC<ChatMessageBoxProps> = (props) => {
  return (
		<>
			<input
				type="text"
				name="message"
				className="h-full w-full text-base md:text-sm focus:outline-none"
			/>
			{props.sendButton}
		</>
  )
}

export default CustomChatMessageBox

I'm supplying this component to the `messageBox` prop of the Chat component. However, sending the message doesn't work; neither by pressing enter or pressing the send button. If I replace the input with props.messageInput, it works.

Any help in fixing this will be greatly appreciated!

Thank in advance :-)

Declined
Last Updated: 27 Apr 2021 10:07 by ADMIN

The width of the Kendo React DatePicker can become small due to the container width.

In such case, consider the following use case

Users select the date part (year) and start incrementing it by the "up" key. The year date part is selected, but is partially visible,

and the users do not see the date part that they are currently modifying, while they can fully see the other date parts that are not currently in focus.

 

The DateInput needs a horizontal scrolling to ensure that a focused date part is fully visible to the users in case if the width of the component is narrow.

 

Please check the case here

https://stackblitz.com/edit/react-8dqy6j-gvgwtk?file=app%2Fmain.jsx 

Declined
Last Updated: 27 Apr 2021 09:38 by ADMIN
Declined
Last Updated: 27 Apr 2021 07:42 by ADMIN
Created by: Andy
Comments: 1
Type: Bug Report
0

DateTimePicker opens above or below the link to open it, however when it's in the middle of a page, it will choose to open below and sometimes require scrolling to see all the buttons.

Would be better, if it were to open offscreen, it should be "pinned" to the bottom edge.  Same for right/left/top borders of the screen.

Certain containers also make it impossible to scroll down to see the buttons, so that creates a real problem. The above proposal would fix this.

 

 

using fairly vanilla implementation of the component:


<DateTimePicker
      defaultValue={new Date(ActivationDate.toString())}
      onChange={handleActivationChange}
      width={'8rem'}
 />

Declined
Last Updated: 24 Feb 2021 12:13 by ADMIN

Defined a date rang. But it allows to enter a date larger than a max date of the range. Both via calendar and manually.


const minDate = new Date(1, 1, 1);
const maxDate = new Date(9999, 12, 31);

          return (
           
              <DatePicker value = {this.state.value}
                 
                  min={minDate}
                  max={maxDate}
                
              /> 
           


      
Declined
Last Updated: 20 Oct 2020 10:36 by ADMIN
Created by: Imported User
Comments: 0
Type: Feature Request
0
Currently, using npm install --save @progress/kendo-theme-material will get the standard Material Design theme for use across the React Components, but why is Material Black not available this way? (npm install --save @progress/kendo-theme-materialBlack)
Declined
Last Updated: 20 Oct 2020 10:32 by ADMIN
<Grid
                    style={{ height: '400px', width: '500px' }}
                    data={products}
                    reorderable
                >
                    <Column field="ProductID" title="ID" width="45px" locked />
                    <Column field="ProductName" title="Name" width="250px" />
                    <Column field="Category.CategoryName" title="CategoryName" />
                    <Column field="UnitPrice" title="Price" width="90px" />
                    <Column field="UnitsInStock" title="In stock" width="90px" />
                    <Column field="UnitsOnOrder" title="On order" width="90px" />
                    <Column field="Discontinued" width="120px" locked={true} />
                    <Column field="QuantityPerUnit" title="Additional details" width="250px" />
                </Grid>
Declined
Last Updated: 20 Oct 2020 10:29 by ADMIN

Hello

There was an error calling “ chart.surface.redraw() ” 

 

  onRender = (args,mapValues,stackedOrderBy) => {              
        const chart = args.target.chartInstance;      

        const valueAxis = chart.findAxisByName("valueAxis");
        const categoryAxis = chart.findAxisByName("categoryAxis");

        if (!chart) return;        

           let x= 1;
            if( stackedOrderBy!="Ascending")
                x=-1;

            let axis = categoryAxis.options;

            axis.categories = axis.categories.sort(function (a, b) {
                if (mapValues[a] < mapValues[b]) {
                return -1*x;
                }
                if (mapValues[a] > mapValues[b]) {
                return 1*x;
                }

                return 0;
            });


            chart.surface.redraw();

                           
Declined
Last Updated: 21 Jul 2020 10:24 by ADMIN
Created by: FIIG Securities
Comments: 3
Type: Bug Report
1

There seems to be bug in the React Grid around date formatting inconsistencies:


Current behavior
When entering a date format of {0:dd/MM/yyyy} for a ColumnData prop, when in edit mode a calendar picker shows the date format as US date of MM/dd/yyyy.Expected behavior
The date should show as dd/MM/yyyy per the requested date format.Minimal reproduction of the problem with instructions
Create a Kendo grid with one column with following ColumnData:
const settlementDate: ColumnData = {
field: 'settlementDate',
title: 'Setlement Date',
format: '{0:dd/MM/yyyy}',
filterable: true,
filter: 'date',
editor: 'date'
};
Note that the date is displayed as MM/dd/yyyy
Change the format to "dd/MM/yyyy"
Note that when in view mode the date is displayed as "dd/MM/yyyy".
What is the motivation or use case for changing the behavior?
Currently I have to create a custom date cell for every instance of using a date field in my grid which is less than ideal.Environment
Package versions:
@progress/kendo-data-query@1.5.2
@progress/kendo-dateinputs-react-wrapper@2019.4.1014
@progress/kendo-base-component-react-wrapper@2019.2.606
@progress/kendo-drawing@1.6.0
@progress/kendo-dropdowns-react-wrapper@2019.4.1014
@progress/kendo-base-component-react-wrapper@2019.2.606 deduped
@progress/kendo-react-data-tools@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-dateinputs@3.9.0
@progress/kendo-date-math@1.2.0
@progress/kendo-react-buttons@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-dropdowns@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-grid@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-inputs@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-intl@3.9.0
@telerik/kendo-intl@1.5.2
@progress/kendo-react-pdf@3.9.0
@progress/kendo-file-saver@1.0.7
@progress/kendo-theme-default@4.7.0
@progress/kendo-theme-material@3.5.0
@progress/kendo-ui@2019.3.1113Browser:Chrome (desktop) version 78.0.3904.108
System:
Platform: Windows

Other information:
It appears that there is an incompatibility as to what a text display field requires as opposed to what a date picker requires. For text display it requires a format of '{0:dd/MM/yyyy}' whereas the datepicker requires a format of "dd/MM/yyyy".

Declined
Last Updated: 03 Jul 2020 06:00 by ADMIN

I am trying to lock first column in Grid, when I used the instructions in Kendo React documentation I tried the same but as you see in screenshots it's not working.

Declined
Last Updated: 25 Feb 2020 09:19 by ADMIN

When using the tab strip, it'd be nice if there were an event that fired before the tab changed so that we could abort a tab chat. For example, if a tab has some input fields that allow a user to change some setting but they change the tab without hitting save or something. It'd be nice if I could pop up a modal and ask them to save before changing tab.

The function could just return true or false to allow the tab change, etc.

Declined
Last Updated: 24 Dec 2019 08:07 by ADMIN

In the case of multiple columns headers, the column width of the KendoReact  TreeList  is invalid

 

 

const columns = [
  
   { field: 'name', title: 'Name', width: 300, expandable: true }
    ,
    { title: 'Employee Details', width: 600, children: [
        { field: 'position', title: 'Position', width: 500 },
        { field: 'fullTime', title: 'Full Time', width: 100 }
    ] }
];
Declined
Last Updated: 24 Dec 2019 08:03 by ADMIN
When can I release the Spreadsheet in Kendo UI for React,not Wrapper
Declined
Last Updated: 21 Nov 2019 06:08 by ADMIN
Created by: Ruslan
Comments: 2
Type: Feature Request
0

 

Q:

From the last conversation through the webinar

jQuery Filter looks cool! What about Kendo React Filter?

A:

Right now we do not have a KendoReact Filter component, but feel free to drop us a line in our feedback portal and we will consider implementing it.


Declined
Last Updated: 07 Aug 2019 06:27 by ADMIN

The tooltip display position of KendoReact Chart  is incorrect

See the code.thank you

https://stackblitz.com/edit/react-vu1ffd?file=app/main.jsx

 

 

 

Declined
Last Updated: 07 Aug 2019 06:26 by ADMIN

In order to display  KendoReact Chart on mobile phones on a horizontal screen, CSS "rotate(90deg) translate(...)"   is applied to KendoReact Chart,

but the coordinates of tooltip are incorrect.

     let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
     let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 

     let x = (h-w)/2;
     let ts = "rotate(90deg) translate("+x+"px,"+x+"px)";
     const maxstyle={
        transform:ts,
        width:h,
        height:w,
        top:0,
        left:0,
        paddingLeft:5,
        paddingRight:5,
        paddingTop:5,
        transformOrigin:"center center",
        background:'#f5f5f9',
        overflow:"hidden",
        position:"fixed",
        zIndex:10000
    };

Declined
Last Updated: 18 Jul 2019 10:02 by ADMIN

When then CSS "rotate(90deg) translate(...)" is applied to KendoReact Chart, the coordinates of tooltip are incorrect.
In order to display  KendoReact Chart on mobile phones on a horizontal screen, CSS "rotate(90deg) translate(...)"   is applied to KendoReact Chart,

but the coordinates of tooltip are incorrect.

 

sourcecode:

     let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
     let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 

     let x = (h-w)/2;
     let ts = "rotate(90deg) translate("+x+"px,"+x+"px)";
     const maxstyle={
        transform:ts,
        width:h,
        height:w,
        top:0,
        left:0,
        paddingLeft:5,
        paddingRight:5,
        paddingTop:5,
        transformOrigin:"center center",
        background:'#f5f5f9',
        overflow:"hidden",
        position:"fixed",
        zIndex:10000
    };

<div  style={maxstyle}>
                    <img src={closeImage} onClick={this.onBack.bind(this)} className="closeImage"/>
                    {this.renderSingleBlock()}
  </div>
Declined
Last Updated: 26 Jun 2019 14:05 by ADMIN
Created by: Nathaniel
Comments: 1
Type: Bug Report
0

I am using the ComboBox component in IE11.  When the control has a value, the clear button covers the select arrow at the right of the control.  This occurs because IE11 does not allow nested calc() calls in the CSS width property, e.g. 

.k-dropdown-wrap .k-clear-value {
    right: calc(calc( 0.75rem + 17px) + 6.5px);
}

Removing the inner calc() works well enough:

.k-dropdown-wrap .k-clear-value {
    right: calc(( 0.75rem + 17px) + 6.5px);
}

Unfortunately, this rule seems to originate from a CSS function call to which I do not have access.  Is it possible to remove the inner calc()?

Declined
Last Updated: 26 Jun 2019 14:04 by ADMIN
Created by: Nathaniel
Comments: 6
Type: Bug Report
0

When rendering an AutoComplete, I get the following warning:

Warning: Failed prop type: Invalid prop `children` supplied to `Popup`.
    in Popup (created by ListContainer)
    in ListContainer (created by AutoComplete)
    in span (created by AutoComplete)
    in AutoComplete

I have tried this in the simple case below:

ReactDOM.render(
    <AutoComplete
        className="form-control"
        required={true}
        validationMessage="Location Required." />,
    document.getElementById('root'));
1 2