Questions on KendoReact Forum

1 answer

343 views

Using KendoReact Rich Text Editor without license

Hi, I don't know if this is the right place to ask this question but since I haven't clarified with the information I've read I'm writing it here.

I am working on a project to which I need to integrate only the "KendoReact Rich Text Editor".

And I'm confused by the fact that I can run it perfectly well without having applied for the 30 days free trial, let alone obviously a paid license.

To my understanding it is assumed that if I can use it without entering the license is because it is indeed allowed right?

According to what you put in your Kendo UI FAQ section: Why are you open sourcing part of the Kendo UI framework?

Apparently it can be used without a license.

The only thing I see is this information in the console when installing the necessary plugins:

> @progress/kendo-licensing@1.3.0 postinstall D:\Project\node_modules\@progress\kendo-licensing
> node ./bin/kendo-ui-license.js activate --ignore-no-license

(INFO) Kendo UI: KENDO_UI_LICENSE environment variable not set
(WARN) Kendo UI: License file not found at "D:\Projects\kendo-ui-license.txt"

The point is that I don't quite understand some aspects of the license and I want to know if I won't get into trouble using the Kendo rich text editor commercially if I keep using it.

Thanks a lot!

Licensing

answered on 17 Feb 2023

1 answer

96 views

Kendo React PanelBar - expanded prop should collapse and expand items automatically when navigating to a different route through the content link

Greetings,

I'm currently using the PanelBar with expandMode="single" and I'm trying to set the expanded prop to be dynamic (able to collapse and expand on its own when navigating to a different route through the content link).

When I try to navigate to a different route through the content link, only the selected prop is re-rendered but the expanded prop still stays on the previous route.

Is there a solution for this? Thank you!

Best Regards,

Jason Li

PanelBar

answered on 16 Feb 2023

1 answer

152 views

Kendo-react sass theme compatibility

For Kendo-UI there is documentation page which provides information about sass-themes style compatibility

https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/compatibility

Is there something similar for kendo-react?

Styling / Themes

answered on 15 Feb 2023

1 answer

183 views

Kendo React Localization for charts

In below chart I am trying to make all text to show in localized format. Values on category axis and values on tooltip also needs in localized.
Is there any way to convert numbers into localized format or I need to pass localized numbers and text as chart values

Charts

Localization

answered on 14 Feb 2023

2 answers

153 views

Whats the recommended way and file to update some css sectors ?

i need to change color of drop-down kendorreact drop-down component.

1. What are the css selectors for version 5.11.0 dropdown

2.Where to update and whats the recommended way to update values of css selectors If i am using it in a component for example test.js.

Should i create seperate test.css file and import in test.js .pls suggest best approach

I tried updating css selectors in index.html file but looks like its getting overwritten by selector from kendo theme default all.css configuration.

answered on 14 Feb 2023

1 answer

187 views

How to populate a DropDownList inside a form?

Good afternoon,

I am trying to populate a DropDownList inside a form with a data array.

<Field component={DropDownList} 

I am populating "data" with the dataset, textField with the label data, and dataItemKey with the Ids. Am I missing something?

Thanks

DropDownList

Form

answered on 13 Feb 2023

1 answer

273 views

TreeView (kendo ui for react)-expand all nodes by default

Hi,

can anyone help with this problem?

https://www.telerik.com/kendo-react-ui/components/treeview/expansion/expanding-all/

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

255 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

112 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

313 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