Questions on KendoReact Forum

I need to expand all items by default in treeview, but it does not work for nested hierarchy. I tried this example, but it does not work for nested json.

For example if i have sometnig like this, it does not show element 'a'?

const tree = [{
  text: 'Item1',
  items: [{
    text: 'Item1.1'
  }, {
    text: 'Item1.2',
    items:[{text:'Item a'}]
  }]
}, {
  text: 'Item2',
  items: [{
    text: 'Item2.1'
  }, {
    text: 'Item2.2'
  }]
}];

TreeView

answered on 08 Feb 2023

1 answer

237 views

Kendo React Master Detail Grid - Column Misalignment

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.

Grid

answered on 08 Feb 2023

1 answer

100 views

Making Grid expandable creates an empty header

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",

Grid

answered on 08 Feb 2023

1 answer

290 views

TreeView-how to color text

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
  }]
}];

TreeView

answered on 07 Feb 2023

1 answer

200 views

Kendo React: Menu with contentRender and binding item data

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

FontIcon

Menu

answered on 06 Feb 2023

1 answer

192 views

After Upgrading @progress/kendo-react-listbox version from "5.9.0" to "5.10.1" UI has broken

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?

Toolbar

answered on 06 Feb 2023

1 answer

362 views

Kendo React grid without data field

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 ?

Grid

answered on 04 Feb 2023

1 answer

94 views

Refresh React MultiSelect based on another Categories/SubCategories

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

MultiSelect

answered on 03 Feb 2023