or
1 answer
249 views
I've stubbed out a master/detail grid that's very simple - 4 columns in the main grid and 3 in the detail grid. When I render the master grid without an associated detail grid via the detail property, it renders fine. However when I set the detail property on the grid, in addition to the first plus/minus hierachy column, the next column header is blank all the column headers are pushed one column over. Not sure if this is a configuration that I'm missing, but I am getting some next-js rehydration errors around the grid with styles, which I'm not sure how to resolve exactly. Anyway I've attached a screenshot and associated code, if by any chance anyone has seen this before and can assist it would be greatly appreciated.
Ivaylo
Telerik team
answered
on
08 Feb 2023
1 answer
111 views
Working on a grid which has a Detail view using an expand field. This results in a weird extra TH tag in the header like the following:
The code for rendering is the following:
return (
<Grid
data={data?.map((item) => ({
...item,
expanded: item?.id === expandedId,
}))}
dataItemKey="id"
expandField="expanded"
onExpandChange={onExpandChange}
detail={FeaturesGrid}
editField="inEdit"
>
<GridToolbar className="!items-end">
<ToolbarSpacer />
<FloatingLabel
label="Context name"
editorId="context-id"
editorValue={name}
className="text-gray-500"
>
<TextBox
id="context-name"
value={name}
onChange={(event) => setName(event.value as string)}
/>
</FloatingLabel>
<ToolbarItem>
<Button
icon="add"
title="Add"
onClick={addRecord}
themeColor="success"
disabled={
!name || data?.find((item) => item?.name === name) !== undefined
}
>
Add
</Button>
</ToolbarItem>
</GridToolbar>
<GridColumn width="55" title="Default" field="default" editor="boolean" />
<GridColumn field="name" title="Name" />
<GridColumn
field="featuresAggregate.count"
title="# Features"
width={100}
editable={false}
/>
<GridColumn
cell={ActionCell}
width={55}
title="Action"
editable={false}
/>
</Grid>
);Is there something I am doing wrong?
I removed the Toolbar and all other noise, but to no avail.
Used versions are:
"@progress/kendo-data-query": "^1.6.0",
"@progress/kendo-drawing": "^1.17.2",
"@progress/kendo-licensing": "^1.3.0",
"@progress/kendo-react-animation": "^5.9.0",
"@progress/kendo-react-buttons": "^5.9.0",
"@progress/kendo-react-charts": "^5.9.0",
"@progress/kendo-react-conversational-ui": "^5.9.0",
"@progress/kendo-react-data-tools": "^5.9.0",
"@progress/kendo-react-dateinputs": "^5.9.0",
"@progress/kendo-react-dialogs": "^5.9.0",
"@progress/kendo-react-dropdowns": "^5.9.0",
"@progress/kendo-react-editor": "^5.9.0",
"@progress/kendo-react-excel-export": "^5.9.0",
"@progress/kendo-react-form": "^5.9.0",
"@progress/kendo-react-gantt": "^5.9.0",
"@progress/kendo-react-gauges": "^5.9.0",
"@progress/kendo-react-grid": "^5.9.0",
"@progress/kendo-react-indicators": "^5.9.0",
"@progress/kendo-react-inputs": "^5.9.0",
"@progress/kendo-react-intl": "^5.9.0",
"@progress/kendo-react-labels": "^5.9.0",
"@progress/kendo-react-layout": "^5.9.0",
"@progress/kendo-react-listbox": "^5.9.0",
"@progress/kendo-react-listview": "^5.9.0",
"@progress/kendo-react-notification": "^5.9.0",
"@progress/kendo-react-pdf": "^5.9.0",
"@progress/kendo-react-pivotgrid": "^5.9.0",
"@progress/kendo-react-popup": "^5.9.0",
"@progress/kendo-react-progressbars": "^5.9.0",
"@progress/kendo-react-ripple": "^5.9.0",
"@progress/kendo-react-scheduler": "^5.9.0",
"@progress/kendo-react-sortable": "^5.9.0",
"@progress/kendo-react-tooltip": "^5.9.0",
"@progress/kendo-react-treelist": "^5.9.0",
"@progress/kendo-react-treeview": "^5.9.0",
"@progress/kendo-react-upload": "^5.9.0",
"@progress/kendo-theme-bootstrap": "^5.12.0",
"@progress/kendo-theme-default": "^5.12.0",
"@progress/kendo-theme-material": "^5.12.0",
Ivaylo
Telerik team
answered
on
08 Feb 2023
1 answer
305 views
Hi,
can anyone provide example how to color text in treeview in react according to database response.
For example,if trans is equal to 10 all elements that have trans equal to 10 will be colored to red..
In this example 'Furniture' will be colored in color red, or if trans is equal to 30 'aaa' will be colored in blue for example
const tree = [{
text: 'Furniture',
trans:10,
items: [{
text: 'Tables & Chairs',
trans:20,
}, {
text: 'Sofas',
trans:50,
}, {
text: 'Occasional Furniture',
trans:50,
}]
}, {
text: 'Decor',
trans:50,
items: [{
text: 'Bed Linen',
trans:50,
items:[{text:'aaa', trans:30}]
}, {
text: 'Curtains & Blinds',
trans:50
}, {
text: 'Carpets',
trans:50
}]
}];
Wissam
Telerik team
answered
on
07 Feb 2023
1 answer
211 views
Greetings,
I'm trying to use the Kendo menu with contentRender so I could render a custom icon component like FontAwesomeIcon.
I'm currently having issue with binding the data to each item when using the contentRender property.
Is there any way to fix this? Thanks!
Regards,
Jason Li
1 answer
211 views
Hi Team,
Recently I have upgraded @progress/kendo-react-listbox version rom "5.9.0" to "5.10.1" (e.g. upgraded whole kendo ui libraries). and after this UI has broken.
Adding screenshots for your reference.
Fyi, I was inspecting in browser and saw that css class names are different on both version.
In version 5.9.0 toolbar class name is "k-listbox-toolbar" and in version 5.10.1 class name is "k-listbox-actions".
Could you please help me how to fix it on latest version?
Wissam
Telerik team
answered
on
06 Feb 2023
1 answer
377 views
i need to display a grid with single row only...data i get for that row is a single object and not an array
each key of the object will be column .
But kendogrid expects a "data field" which is an array. How to achieve this ?
Konstantin Dikov
Telerik team
answered
on
04 Feb 2023
1 answer
97 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 prayHowever 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
499 views
Hi,
How to expand all nodes by default in treeview in react?
Can anyone give example how to achieve this?
1 answer
114 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
171 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!
