Questions on KendoReact Forum

1 answer

71 views

Hi there! We are using GridColumnMenuCheckboxFilter to filter a numeric column for a field called "fruits" in our data grid. The filtering works fine, but we would like to see the checkbox filter menu display a different label name, conditionally.

For example, if we have the checkbox filter menu showing the options(checkbox label) as numeric values -1, 0, 1. Please see attached image.

Is it possible to update the text for the checkbox label? like if the value for "fruits" = -1 then display the label as "Apples", if the value for "fruits" = 0 then display the label as "Oranges", or if the value for "fruits" = 1 display as "Bananas", etc?

Filter

Grid

Menu

answered on 01 Aug 2024

1 answer

65 views

How to remove the active state of the combobox after clicking outside the grid or in the empty space inside the grid

I am using combobox inside the kendo grid. the problem i am facing is when i select the combobox & if i click outside the grid or inside the empty space in the grid, the combo box is still in active state. i want to remove the active state of the combobox after clicking outside the grid or in the empty space of the grid

ComboBox

Grid

answered on 01 Aug 2024

1 answer

61 views

Reset the scrollbar when filter didn't find the items in Grid

If the filter is applied, it has found the elements and the number of elements does not exceed the visible area - the scrollbar disappears, it's ok. But if the filter is applied and it hasn't found the elements - the scrollbar doesn't disappear. The expected behavior in this case is to reset the scrollbar, since there are no found items and the grid list is empty.
Are there any planned changes to this case?

Filter

Grid

answered on 01 Aug 2024

1 answer

91 views

Issue with Saving and Restoring Zoom State in Kendo React Charts

I am encountering an issue with saving and restoring the zoom state in the Kendo React Charts component. The problem arises when I attempt to save the zoom level and reapply it whenever the chart data updates. Although the zoom state values are captured correctly, the chart resets to its default zoom level after each zoom interaction.

This is the parent Component:

function Monitor () {
  const { chartDataByParameter, treshholdRangeData } = useTable()
  const [zoomState, setZoomState] = useState({})

  const handleZoomChange = (newZoomState) => {
    setZoomState(newZoomState)
  }

  return 
          <ChartComponent dataProps={chartDataByParameter} rangeData={treshholdRangeData} zoomState={zoomState} onZoomChange={handleZoomChange} />
}

export default Monitor

And this is the Chart Component. Note that i have two axis because is the only way I found to deal with negative values.

function ChartComponent ({ dataProps, rangeData, zoomState, onZoomChange }) {
  const chartRef = useRef(null)

  useEffect(() => {
    setIsChartLoading(false)
    if (chartRef.current && chartRef.current.kendoChart) {
      chartRef.current.kendoChart.setOptions({
        categoryAxis: {
          min: zoomState.xAxis.min,
          max: zoomState.xAxis.max
        },
        valueAxis: {
          min: zoomState.valueAxis.min,
          max: zoomState.valueAxis.max
        }
      })
    }
  }, [dataProps])

  const handleZoom = (event) => {
    const newZoomState = {
      xAxis: {
        min: event.axisRanges?.xAxis?.min,
        max: event.axisRanges?.xAxis?.max
      },
      valueAxis: {
        min: event.axisRanges?.valueAxis?.min,
        max: event.axisRanges?.valueAxis?.max
      }
    }
    onZoomChange(newZoomState)
  }

  const colors = ['#718ad5', '#424242', '#ffe162', '#4cd180', '#8634b7']
  const categoryAxisMaxDivisions = 10


  return (
<div style={{ height: '55vh, width: '100%' }}>
      {(dataProps && dataProps.length > 0) || (rangeData && rangeData.length > 0)
        ? (
        <Chart
          ref={chartRef}
          style={{ height: '100%', width: '100%' }}
          pannable={true}
          zoomable={true}
          transitions={false}
          className='custom-chart'
          onZoom={handleZoom}
        >
          <ChartLegend position="top" />
          <ChartCategoryAxis>
            <ChartCategoryAxisItem name="xAxis" maxDivisions={categoryAxisMaxDivisions} visible={false} />
            <ChartCategoryAxisItem name="xAxis2" maxDivisions={categoryAxisMaxDivisions} />
          </ChartCategoryAxis>
          <ChartSeries>
            {dataProps.map((item, index) => (
              <ChartSeriesItem
                key={index}
                type="line"
                data={item}
                field="value"
                categoryField="category"
                name={item[0].parameter}
                style="smooth"
                color={item[0].parameter === 'Anomalies' ? '#d75d5d' : colors[index]}
                width={item[0].parameter === 'Anomalies' ? 0 : 2}
                legendItem={item[0].parameter === 'Anomalies' ? customLegendItem : customLegendItem2}
                tooltip={{ visible: true, render: lineTooltipRender }}
              />
            ))}
            {rangeData.length > 0 && (
              <ChartSeriesItem
                type="rangeArea"
                data={rangeData}
                fromField="min"
                toField="max"
                categoryField="Datetime"
                name="Anomaly sensitivity"
                color='#80cf63'
              >
                <ChartTooltip render={rangeTooltipRender} />
              </ChartSeriesItem>
            )}
          </ChartSeries>
          <ChartValueAxis>
            <ChartValueAxisItem
              name="valueAxis"
              axisCrossingValue={[0, Number.NEGATIVE_INFINITY]}
              labels={{ format: (value) => value.toFixed(2) }}
            />
          </ChartValueAxis>
        </Chart>
          )
        : (
        <div style={{ height: chartHeight, width: '100%' }}></div>
          )}
    </div>
  )
}
}

const MemoizedChartComponent = React.memo(ChartComponent)
export default MemoizedChartComponent

Thank you in advance!

Xavier

Charts

answered on 31 Jul 2024

2 answers

121 views

rpsapi Demo (Backend) App from the Virtual Classroom - not serving a site

Hi all,

In the interest of being thorough, I'm watching Chapter 2: Getting Started, Video #3: Running the API and demo application. I've cloned the https://github.com/telerik/rpsapi.git repository to a local folder, run npm install, and then run npm run dev.

When I attempt to run the app on http://localhost:8080, I don't get a site - even though the ts-node-dev server software appears to be running.

Attempts to make Postman GET requests of http://localhost:8080 yield 404 errors.

What am I doing wrong?

General Discussions

answered on 29 Jul 2024

1 answer

51 views

Issue when using ChartPane

I need a chart with x-axis as time and multiple y-axis stacked. One temp which is a range from 0 to 10 and humidity which is from 0 to 1.

When I try to use ChartPane, I keep getting exception in my react code.

Here is the error:

ErrorBoundary.js:16 ErrorBoundary caught an error TypeError: Cannot read properties of undefined (reading 'map')
at Object.collectionConfigurationItem (reducer.mjs:41:1)
at u (reducer.mjs:9:1)
at Object.c [as dispatch] (store.mjs:13:1)
at s.dispatch (ConfigurationComponent.mjs:29:1)
at s.componentDidMount (ConfigurationComponent.mjs:22:1)
at invokeLayoutEffectMountInDEV (react-dom.development.js:25172:1)
at invokeEffectsInDev (react-dom.development.js:27390:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27366:1)
at commitRootImpl (react-dom.development.js:26922:1)
at commitRoot (react-dom.development.js:26721:1) Object

Here is my component

import * as React from 'react';
import {
  Chart,
  ChartSeries,
  ChartSeriesItem,
  ChartValueAxis,
  ChartValueAxisItem,
  ChartCategoryAxis,
  ChartCategoryAxisItem,
  ChartPane
} from '@progress/kendo-react-charts';
// Sample data
const categories = ['04/01/2024', '05/01/2024', '06/01/2024', '07/01/2024'];
const temperatureData = [20, 25, 30, 35];
const humidityData = [0.5, 0.6, 0.7, 0.8];
const MultiPaneChart = () => {
  return (
    <Chart>
      <ChartCategoryAxis>
        <ChartCategoryAxisItem categories={categories} />
      </ChartCategoryAxis>
      <ChartPane name="temperaturePane" />
      <ChartPane name="humidityPane" />
      <ChartValueAxis>
        <ChartValueAxisItem
          name="temperature"
          pane="temperaturePane"
          min={0}
          max={40}
          title={{ text: 'Temperature' }}
        />
        <ChartValueAxisItem
          name="humidity"
          pane="humidityPane"
          min={0}
          max={1}
          title={{ text: 'Humidity' }}
        />
      </ChartValueAxis>
      <ChartSeries>
        <ChartSeriesItem
          type="line"
          data={temperatureData}
          name="Temperature"
          axis="temperature"
          pane="temperaturePane"
          color="red"
        />
        <ChartSeriesItem
          type="line"
          data={humidityData}
          name="Humidity"
          axis="humidity"
          pane="humidityPane"
          color="blue"
        />
      </ChartSeries>
    </Chart>
  );
};
exportdefaultMultiPaneChart;

Charts

answered on 25 Jul 2024

1 answer

58 views

Gantt Chart Multi User with yjs websocket

Hi i'm using kendo react gantt chart in one of my project, and i make a few custom component like the edit form, the week view with custom header cell

in a single tab its working fine, however, as soon as its hooked up with websocket connection and someone open the same page/component, it will start saying its invalid date, any idea why its happening?
is it the websocket that changed the valid date into invalid or the gantt chart is not compatible for multi user?

thanks

Gantt

answered on 25 Jul 2024

1 answer

91 views

How to open external Url in Dialog Control

Hello,

Can I open an external URL in a dialog box using Kendo React controls?

Thanks!

Dialog

answered on 25 Jul 2024

1 answer

269 views

Kendo license activation failed for @progress/kendo-react-intl

For my deployed app, I'm getting this error in the console:

License activation failed for @progress/kendo-react-intl
No license found.
See https://www.telerik.com/kendo-react-ui/components/my-license/ for more information.

I've tried to fix it by doing:

- remove node_modules and package.lock.json

- Make a new npm install and activation

but this hasn't fixed the issue. I don't see the warning locally, only after it has been deployed. I have the following in my azure pipeline:

stages:
- stage: Test
  displayName: Test
  jobs:
  - job: Test
    displayName: Perform tests
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '18.x'
      displayName: 'Install Node.js'

    - script: |
        npm ci
      displayName: 'Install dependencies'
...
    
    - script: |
        npx kendo-ui-license activate
      displayName: "Activate Kendo UI License"

    - script: |
        npm run build
      displayName: 'Build'

and can see the activation working when running the pipeline:

(INFO) Kendo UI: KENDO_UI_LICENSE environment variable not set
(INFO) Kendo UI: Reading license from "/agent/_work/2/s/kendo-ui-license.txt"...
(INFO) Kendo UI: License imported successfully.

Any idea what could be wrong?

Licensing

answered on 24 Jul 2024

1 answer

86 views

Kendo Tabs in SharePoint

I have created an SpFx web part with a kendo tabstrip and dopped it on a SharePoint page. Our 508 testing failed due to the fact that the tabstrip never shows that it's selected. In all the samples you can see a highlight around the control when you tab to it, but on a SharePoint page, it does not show.

I've tried to hack this using CSS to no avail. Some of the attempts are here:

  :global .k-tabstrip > .k-content:focus {
    outline: 1px !important;
    outline-style: dotted !important;
  }

  .k-tabstrip-items:focus {
    outline: 2px solid crimson !important;
    border-radius: 3px !important;
  }

  :global .k-item.k-active:focus-visible {
    outline: 2px solid crimson !important;
    border-radius: 3px !important;
  }

The Tab parent tag is below:

<TabStrip selected={ this.state.selectedTab } onSelect={ (e: any) => { this.setState({ selectedTab: e.selected }) } }>

Only significant scss is the inclusion of: @import '~@fluentui/react/dist/sass/References.scss';

Is this expected behavior?

TabStrip

answered on 24 Jul 2024