Telerik Forums
KendoReact Forum
1 answer
179 views

I have added the Globalization and IntlProvider to the Grid and it works but for the Column options there is one entry missing in the documentation and that's the "Columns" entry (see screenshot). Is there a possibility to add a translation for this item?

 

Konstantin Dikov
Telerik team
 answered on 19 May 2022
1 answer
114 views

Hi!
I have been using validation properties (required, max length, validationMessage etc) for the forms.

Is there any way to have the same functionality for Grid component to have validations in the  Columns?

As they are free inputs for the users too, 
would be nice if you can provide some examples to know how to handle them.

Thanks for your time,
Rebeca.

Filip
Telerik team
 answered on 19 May 2022
1 answer
347 views

Hi, I'm trying to combine many functionality on kendo react data grid.

I want to allow multiselect, custom cell, custom menu filter, contextual menu and double click managing.

I tried like in following project:

https://stackblitz.com/edit/react-tcu25m

 

I started from following examples:

https://stackblitz.com/edit/react-7mz85d (double click managing)

https://stackblitz.com/edit/react-fx9xkl (multiselect)

But, combining the 2 way the double click fires only sometimes. Maybe because the click was consumed by selection?

How can I get all my needs?

Konstantin Dikov
Telerik team
 answered on 18 May 2022
1 answer
115 views

Hello,

 

I am trying to localize my entire application but I cannot get this example working; https://www.telerik.com/kendo-react-ui/components/intl/l10n/reacting-to-language-changes/

My code is below.

import { Message } from '../../common/Message';

loadMessages(messages["es"], "es");

const DetailComponent = (props: any) => {

    const locales: LocaleInterface[] = [
        {
          language: "en-US",
          locale: "en",
        },
        {
          language: "es-ES",
          locale: "es",
        },
      ];
    const [currentLocale, setCurrentLocale] = React.useState<LocaleInterface>(
        locales[0]
    );
const defaultMessages = {
  [yesterdaysMessageKey]: "Yesterday was a good day!",
  [todaysMessages]: "Today is a good day as well!",
  [tomorrowsMessageKey]: "Tomorrow will be even better!",

};

 

return (

<LocalizationProvider language={currentLocale.language}>
<IntlProvider locale={currentLocale.locale}>
<p>
 <strong> <Message messageKey={yesterdaysMessageKey} defaultMessage={defaultMessages[yesterdaysMessageKey]}/>:</strong> {dataItem.nickname}

</p>

</IntlProvider>
</LocalizationProvider>
  );

};

 

import * as React from "react";
import { useLocalization } from "@progress/kendo-react-intl";
interface MessageProps {
  messageKey: string;
  defaultMessage: string;
}
export const Message = (props: MessageProps) => {
  const localization = useLocalization();
  return (
    <span style={{ display: "block" }}>
      {localization.toLanguageString(props.messageKey, props.defaultMessage)}
    </span>
  );

};

 

export interface LocaleInterface {
    language: string;
    locale: string;
  }
 
Filip
Telerik team
 answered on 17 May 2022
1 answer
139 views

Hi.

I have a Data Grid which includes two TimeInput fields, onTime and offTime and I want to make sure that when the user hits the update button of the row that offTime is always bigger than onTime. My problem is not the calculation, it's more like: What is the best way to check the values of the 2 fields and how do I set the focus on the offTime field when it is lower than the onTime? It would also be possible to not check it on the update button click but when the field is blurred or so. Not sure how to handle this best.

I have used one of your Grid-Examples and manipulated it a bit so that the 2 fields are already in there but there are of course a couple of things missing like a form for example. Maybe you can direct me at least in the right direction how to handle this best.

https://stackblitz.com/edit/react-nq2pkf?file=index.js

Thanks!

Greetings,

Bernd

Konstantin Dikov
Telerik team
 answered on 17 May 2022
0 answers
111 views

I have had a weird issue with multi-page PDFs. It is pushing content to a second page when there is plenty of room left on the page for the content to be on the first page. Please see below. I have tried adding the keepTogether CSS class, but it is still moving to next page. Has anyone else experienced this issue. Any help would be appreciated.

 

 

 

Stephen
Top achievements
Rank 1
 asked on 16 May 2022
1 answer
164 views

Hi.

In the Month-View of the Scheduler I only would like to render the events that are allDay events. In all other views (day, week, etc) everything should show. Currently I solve this using conditional rendering but I wonder if there would be a more efficient way to achieve this. So what I do right now is that I have a custom EditItem for the MonthView and in the EditItem I do this:

    return (
        <>
            {dataItem.isAllDay && (
                    <SchedulerEditItem ...

I wonder if I somehow do this in a more efficient way by not even using the MonthView for the non all day events or so. Any ideas?

Konstantin Dikov
Telerik team
 answered on 13 May 2022
1 answer
111 views

I want to update tree list package to the latest currently it is on the 4.3.0 version ("@progress/kendo-react-treelist": "^4.3.0",)

When I run the npm update command it gets updated to 4.14.1 but not to 5.2.0. Actually, I want to access the selectable property of the Tree list so that I can enable the selection of cells by dragging onto them this feature does not work for me on the 4.3.0 version.

 

Manay thanks

Konstantin Dikov
Telerik team
 answered on 12 May 2022
1 answer
63 views

I am using kendo react UI Chart component for column chart. i have used 

ChartCategoryAxisItem in which i am using type as date but this is giving me an error "Something went wrong r is undefined".
This error is coming on firefox and edge not on chrome.

CCode:

 

 <ChartCategoryAxis>
        <ChartCategoryAxisItem
          type="date"
          baseUnit="days"
          labels={{
            dateFormats: {
              days:"MM-dd",
            },
            rotation: "auto",
          }}
        />
      </ChartCategoryAxis>




Any help is appreciated.

 

 

 

 

Filip
Telerik team
 answered on 11 May 2022
1 answer
112 views
Is it possible to disable the checkbox if an item or subItem should be disabled? I know we have the item prop to render the label text and I am able to indicate a disabled state on the text but is there anyway to target the checkbox? I can prevent it from being selected but I would like to disable the checkbox. Thank you.
Konstantin Dikov
Telerik team
 answered on 11 May 2022
Narrow your results
Selected tags
Tags
General Discussions
Grid
Wrappers for React
Charts
Scheduler
Filter 
DropDownList
Form
Styling / Themes
DatePicker
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
+? more
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?