Telerik Forums
KendoReact Forum
7 answers
468 views

Hi, 

Is there an example somewhere using KendoReact notifications in a more dynamic way instead of (for the lack of a better term) one-by-one?

What Im looking for is a way to manage multiple notifications/toasts like:
 - https://jossmac.github.io/react-toast-notifications/
 - https://www.npmjs.com/package/react-toastify

Currently the examples I've found are just managing Notifications in the app state. The current functionality is limited.

Please advise.

Thanks,
Grant

Grant
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 19 Jan 2021
1 answer
220 views

Hi,

On your example : https://www.telerik.com/kendo-react-ui/components/popup/aligning-positioning/#toc-positioning

If I choose Anchor align point vertical middle, the top right popup corner is in the anchor, why ?

 

Regards,
Joccd

Stefan
Telerik team
 answered on 18 Jan 2021
3 answers
350 views

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

When you click in the TextArea in the above StackBlitz, React throws a warning in the console:

Warning: Received `true` for a non-boolean attribute `visited`.
 
If you want to write it to the DOM, pass a string instead: visited="true" or visited={value.toString()}.
at textarea
at span
at KendoTextArea (https://react-s8ugrr-dvxqcf.stackblitz.io/turbo_modules/@progress/kendo-react-inputs@4.1.0/dist/npm/textarea/TextArea.js:40:33)
at div
at KendoReactFieldWrapper (https://react-s8ugrr-dvxqcf.stackblitz.io/turbo_modules/@progress/kendo-react-form@4.1.0/dist/npm/FieldWrapper.js:13:24)
at FormTextArea (https://react-s8ugrr-dvxqcf.stackblitz.io/~/app/main.jsx:42:13)
at KendoReactField (https://react-s8ugrr-dvxqcf.stackblitz.io/turbo_modules/@progress/kendo-react-form@4.1.0/dist/npm/Field.js:30:22)
at div
at fieldset
at form
at KendoReactFormElement (https://react-s8ugrr-dvxqcf.stackblitz.io/turbo_modules/@progress/kendo-react-form@4.1.0/dist/npm/FormElement.js:33:22)
at KendoReactForm (https://react-s8ugrr-dvxqcf.stackblitz.io/turbo_modules/@progress/kendo-react-form@4.1.0/dist/npm/Form.js:87:28)
at App
Kyle
Top achievements
Rank 2
Veteran
Iron
 answered on 15 Jan 2021
3 answers
376 views

It appears that when we disable the TextArea, it does not match the styling of the other input components. My initial thought is that this is because of two things:

1. The <span class="k-textarea"> needs a k-state-disabled applied.
2. The themes need something like the following in the .scss:

.k-textarea {
    &:disabled,
    &[disabled],
    &.k-state-disabled {
        @include disabled( $disabled-styling );
        // Disabled selection
        &::selection {
            @include fill ( $color: $input-color, $bg: transparent );
        }
    }
}

 

I could be way off base here, of course.  Here's a StackBlitz showing the issue with a current, ugly, workaround: https://stackblitz.com/edit/react-s8ugrr-57r5pk?file=app/main.jsx

Kyle
Top achievements
Rank 2
Veteran
Iron
 answered on 15 Jan 2021
2 answers
422 views

hi,

I am using KendoReact grid and paging and have a grid something like below. we have some filters outside the grid that are applied on grid. And we are using react-redux to preserve the filters state so that grid can be recreated again as per the filters selected on redirection.

can we also add the pagesize to redux so that its value can also be preserved and the same number of records remain selected or shown on redirection.

I am not sure if there is any event that we can use for this purpose. any help will be appreciated.

<Grid
          sortable
          filterable
          resizable
          reorderable
          pageable={{
            buttonCount: 4,
            pageSizes: [10, 20, 50, 100, formsList.length],
          }}
          data={process(formsList, dataState)}
          {...dataState}
          onDataStateChange={(e) => {
            setDataState(e.data);
          }}
          cellRender={customCellRender}
          headerCellRender={customHeaderRender}
        >
          {user && isAuthenticated && user.isAdmin && (
            <GridToolbar>{getFormFilters()}</GridToolbar>
          )}
          <GridColumn field="formNumber" title="Number" />
          <GridColumn width="300px" field="formTitle" title="Form Title" />
          <GridColumn
            width="200px"
            field="formattedRevisionDate"
            title="Revision Date"
            headerClassName="text-wrap"
            filter={"date"}
            format="{0:M/d/yyyy}"
          />
          <GridColumn field="formStatus" title="Status" />
          <GridColumn field="notes" title="Notes" />
          <GridColumn field="responsibleOffice" title="Office" width="175px" />
          <GridColumn
            field="procedureNumber"
            title="Procedure"
            cell={procedureCell}
          />
          <GridColumn
            title="Available Formats"
            field="attachmentTypes"
            cell={attachmentsCell}
            headerClassName="text-wrap"
          />
          <GridColumn
            filterable={false}
            sortable={false}
            title="Actions"
            cell={actionsCell}
          />
        </Grid>

 

Gaurav
Top achievements
Rank 1
 answered on 14 Jan 2021
6 answers
892 views
Hello, I am using react js , please take a look at my screenshots. The height value is not rendering in the webpage at all, I am not sure what value to use. Pls help in this case what value to use
Stefan
Telerik team
 answered on 14 Jan 2021
1 answer
170 views

Hello,

 

I'm trying to wrap GridColumn using high order component. I'd like to make reusable columns within our solution that are enhanced towards our needs.

However, I'm not able to get KendoReact Grid to display data when I try this approach.

I've put example of what I'm trying to do here:

 

https://stackblitz.com/edit/kendoreact-grid-hooks-pvhvv7?file=app/main.jsx

 

Thanks in advance for help!

Best regards,

Arek

Stefan
Telerik team
 answered on 13 Jan 2021
9 answers
362 views

I have the following script error while rendering Kendo react component with SyestemJS. I have attached the script error image below.

 

system.config.js

// map tells the System loader where to look for things
    map: {
      'react': 'https://unpkg.com/react@16/umd/react.production.min.js',
      'react-dom': 'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
      'prop-types': 'https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js',
      '@progress/kendo-date-math': 'https://unpkg.com/@progress/kendo-date-math@dev/dist/cdn/js/kendo-date-math.js',
      '@progress/kendo-drawing': 'https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js',
      '@progress/kendo-react-intl': 'https://unpkg.com/@progress/kendo-react-intl@latest/dist/cdn/js/kendo-react-intl.js',
      '@progress/kendo-react-buttons': 'https://unpkg.com/@progress/kendo-react-buttons@3.14.0/dist/cdn/js/kendo-react-buttons.js'
    }

I have also attached a sample for your reference. Please help me react component using CDN links and SystemJS. Without kendo components, this project works fine. 

 

 

Aryan
Top achievements
Rank 1
 answered on 13 Jan 2021
11 answers
345 views

HI, 

I am working with the spreadsheet wrapper component. I found an issue where I was not able to insert a new row into s sheet.

I created a sheet with some data in it using a spreadsheet component, downloaded it and uploaded it into another spreadsheet component. Now after uploading it into the second component I am not able to insert a new row to that sheet.

I don't have data in the last row, but still it is throwing me an error saying "Cannot insert cells due to data loss possibility. Select another insert location or delete the data from the end of your worksheet."

Also to make it work, I have to delete rows from bottom of my sheet and then I can insert the same amount of rows anywhere in the sheet.

Please let me know if this is the expected behaviour or it's an actual issue.

If it's the expected behaviour is there a possible way so I don't have to remove all the rows from the bottom of the sheet and I can insert rows?

 

Thank you.

Stefan
Telerik team
 answered on 12 Jan 2021
7 answers
295 views

Hi,

 

Does the GridColumnMenuCheckboxFilter have virtual scrolling? Or is there a way to enable or add it?  Thanks.

 

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

Thanks.

Stefan
Telerik team
 answered on 12 Jan 2021
Narrow your results
Selected tags
Tags
General Discussions
Grid
Wrappers for React
Charts
Scheduler
Filter 
DropDownList
Form
DatePicker
Styling / Themes
Editor
TreeList
Styling
PDF Processing
ComboBox
Excel Export
Dialog
Input
TreeView
Upload
Drawer
Button
Drag and Drop
MultiSelect
Tooltip
Accessibility
NumericTextBox
Checkbox
Menu
Gantt
DateTimePicker
PDF Viewer
Popup
Window
AutoComplete
DateInput
Sortable
Data Query
Licensing
TabStrip
Drawing
Calendar
Pager 
Labels 
Localization
TimePicker
GridLayout
FontIcon
Animation
PanelBar
TaskBoard
PivotGrid
Card
DropDownButton
Conversational UI 
DateRangePicker
Splitter
Badge 
Security
Slider
Spreadsheet
ContextMenu
MultiViewCalendar
Stepper
MultiColumnComboBox
MultiSelectTree
TextBox
AppBar
File Saver
ListView
MaskedTextBox
RadioButton
Switch
TextArea
Toolbar
DropDownTree
TileLayout
Map
Avatar
Date Math
Gauge
RadioGroup
RangeSlider
Rating
Loader
ExpansionPanel
SvgIcon
Typography
ProgressBar
ScrollView
Popover
StockChart
RadialGauge
Server Components
AIPrompt
Page Templates / Building Blocks
AI Coding Assistant
Chat
ColorGradient
ColorPalette
ColorPicker
Notification
Ripple
Skeleton
ButtonGroup
Chip
ChipList
FloatingActionButton
SplitButton
ActionSheet
Barcode
QR Code
FlatColorPicker
Signature
BottomNavigation
BreadCrumb
StackLayout
Timeline
ListBox
ChunkProgressBar
Sparkline
FileManager
ArcGauge
CircularGauge
LinearGauge
ExternalDropZone
OrgChart
Sankey
VS Code Extension
InlineAIPrompt
SpeechToTextButton
Chart Wizard
Agentic UI Generator
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
OTP Input
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?