Telerik Forums
KendoReact Forum
1 answer
138 views

I have a simple react view with a form that has two Kendo MultiSelect dropdowns ^v5.9.0. One with category and the othe subcategory. 

CategoryDS: [{categoryId: 1, name: "Category-A"}, {categoryId: 2, name: "Category-B"}, {categoryId: 3, name: "Category-C"}], SubCategoryDS: [{SubCatId: 101, name: "CatA-SubCat1"}, {SubCatId: 102, name: "CatA-SubCat2"}, {SubCatId: 103, name: "CatB-SubCat1"}, {SubCatId: 104, name: "CatB-SubCat2"}, {SubCatId: 105, name: "CatC-SubCat1"}]
<MultiSelect
        data={subCategoryDS}
        value={subCategories}
        onChange={handleChange}
        style={{
          width: "300px",
        }}
        placeholder="Please select ..."
      />

In a scenario when selected category: Category-A, Category-B and in sub category MultiSelect: CatA-SubCat1, CatB-SubCat1, CatB-SubCat2. When we decide to remove Category-A from category MultiSelect we would like subcategory MultiSelect selection to also remove CatA-SubCat1 from selection to relect our action. How do we handle this to show our intention? For context sake we have onchange method of category MultiSelect to handle the assigning of our subcategory multiselct data like so: 

let subcategoryDropdownList = document.getElementById(`subcategory-multi-dropdown`).parentElement.parentElement as unknown as MultiSelect;
  subcategoryDropdownList.data = subCategories; //trying this according to docs
  subcategoryDropdownList.value = subCategories; //trying this hailmary and pray

However we're getting the object alright but assigning anything to it like so doesn't work. Neither does letting React work with data and state to follow convention like : 

const [subCategories, setSubCategories] = React.useState([]);
setSubCategories((pv) => ({
  ...pv,
  { options }
  }));

It would seems as if once the MultiSelect is touched and selection set it wouldn't respond to changes and it doesn't have MultiSelect.Refresh() void method like its jQuery equivalent. if anyone could please help would make my day as I'm loosing hair and going grey trying to solve this tough one. Many Thanks in advance

Konstantin Dikov
Telerik team
 answered on 03 Feb 2023
2 answers
641 views

Hi,

How to expand all nodes by default in treeview in react?

Can anyone give example how to achieve this?

 

 

A
Top achievements
Rank 1
Iron
Iron
 updated answer on 03 Feb 2023
1 answer
152 views


Hi,

I have questions as I'm trying to format the value of the charts and its labels.

I used this but not working on my end. Can you check what am I missing on this.

1.) Convert to Dollar amount and round to millions also to lessen space and show properly.

<ChartSeries> {series.map((item, idx) => <ChartSeriesItem key={idx} type="column" tooltip={{visible: true}} data={item.data} name={item.name} format="c0"> <ChartSeriesLabels format="c0"/> </ChartSeriesItem> )} </ChartSeries>

 

2. I'm trying to round it to the Millions and used FormatLongNumber function where should I call/put this?


    function FormatLongNumber(value) {
            if (value == 0) {
                return 0;
            }
            else {
                // for testing
                //value = Math.floor(Math.random()*1001);

                // hundreds
                if (value <= 999) {
                    return value;
                }
                // thousands
                else if (value >= 1000 && value <= 999999) {
                    return (value / 1000) + 'K';
                }
                // millions
                else if (value >= 1000000 && value <= 999999999) {
                    return (value / 1000000) + 'M';
                }
                // billions
                else if (value >= 1000000000 && value <= 999999999999) {
                    return (value / 1000000000) + 'B';
                }
                else
                    return value;
            }
    }

3.) How to convert this to MMM/YYYY format?

here is the data I'm passing

[
    "1/24/2022",
    "2/8/2022",
    "2/21/2022",
    "4/13/2022",
    "5/5/2022",
    "5/17/2022",
    "6/8/2022",
    "6/14/2022",
    "6/22/2022",
    "6/24/2022",
    "6/27/2022",
    "7/27/2022",
    "8/1/2022",
    "8/12/2022",
    "9/28/2022",
    "9/30/2022",
    "10/12/2022",
    "12/13/2022",
    "12/16/2022",
    "12/19/2022",
    "12/30/2022",
    "1/24/2023",
    "1/26/2023",
    "1/27/2023"
]

I'm attaching my html file for full reference. Thank you in advance!

 

 


Filip
Telerik team
 answered on 01 Feb 2023
1 answer
218 views

Hi!

We are trying to customize the scheduler form editor, but the field is not showing up. Any ideas why? Screenshots of the SchedulerForm's editor and what we see in the UI below:

 

What we see: (text area input doesn't show up):
*note that we have tried other field types (e.g. dropdown and datepicker) with similar results

 

Thank you!

Konstantin Dikov
Telerik team
 answered on 31 Jan 2023
1 answer
119 views

https://stackblitz.com/edit/react-ucebku-vmycow?file=app%2Fmain.jsx from the comments in this thread: https://www.telerik.com/forums/column-menu-doesn-t-work-in-custom-headers

The actual column menu for the "test" column (utilizing a custom headerCell) doesn't work.

Additionally, and this may be because I'm behind by a few versions, React doesn't like the `props={....props}` on `line 23`. However, despite it not working on my end locally, the demo is working with this but still not working overall.

Konstantin Dikov
Telerik team
 answered on 27 Jan 2023
1 answer
130 views

Similar to the Grid's `expanded` prop, do the TreeList GridColumnMenu components have the expanded feature? It saves my users one extra click, so it's a favorite! I was unable to make it work by doing this:

`<ColumnMenuTextColumn expanded={true}/>`

Filip
Telerik team
 answered on 27 Jan 2023
1 answer
123 views

Similar to the Grid's GridColumnMenuFilter.active() method, is there either a method or an example for the TreeList to accomplish styling the ColumnMenu icon / header cell? I think I could build my own simple check for this, but wanted to see if there's a utility function already created.

Thank you!

Filip
Telerik team
 answered on 27 Jan 2023
1 answer
253 views

Hi,

I am using the React Data Grid component and have a grid column with a custom cell renderer. I want to be able to filter on this column using the GridColumnMenuCheckboxFilter. However, the filter only shows an option of 'undefined' and not the values rendered by the custom cell component (see image below). The rendered values are not coming from a direct property of the grid data object, so I was wondering if there is a possibility to define a valueGetter that outputs the actual rendered value, which can then be picked up by the filter component?

 

Thank you

Filip
Telerik team
 answered on 26 Jan 2023
1 answer
184 views
<ChartSubtitle
text='some text'
color='black'
padding={0}
margin={10}
align='right'

/>

 

here margin gives for all direction. how can i give margin or padding on right side only ?

 

Hetali
Telerik team
 answered on 25 Jan 2023
1 answer
552 views
Hi
Grid kendo react - How to change column menu icon (The three points) ?
 

Filip
Telerik team
 answered on 25 Jan 2023
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?