I've just upgraded my kendo-react-pdf from 8.0 to 8.1.1

but now the CSS isn't applied anymore. I'm using the CSS library 'Emotion' and this worked fine previously. For example I had a styled component in my PDF template with styling:

However, now the CSS only works if I add it inline:

I can change all the styling, but I'd prefer to keep my styled components as that's what we're using for the rest of the app as well.

Thanks!

I understand that KendoReact is 508 compliant by certain standards, but my agency tests to a different standard.

I'm getting reports that the grid is not associated cells with headers. I've researched different ways to get around this and the solution I've come up with is to add ID to the TH tags and then using the HEADERS attribute to the data cells with the ID in the associated header. Example below:

<table>
  <tr>
    <th id="colOneHeader">Col One</th>
    <th id="colTwoHeader">Col Two</th>
  </tr>
  <tr>
    <td headers="colOneHeader">Col One Data</td>
    <td headers="colTwoHeader">Col Two Data</td>
  </tr>
</table>

My issue is adding the ID attribute to the TH tags in the grid. I've attempted the following:

const HeaderCustomCell = (props: any) => {

  return (
    <HeaderThElement scope="col" columnId={ props.thProps?.columnId || "" } id={ props.thProps.title + "_Header" } { ...props.thProps }>
      { props.children }
    </HeaderThElement>
  );
};

<Grid  cells={{ headerCell: HeaderCustomCell }} ...

The SCOPE and ID attributes are ignored and do not show up in the TH tags in the source code. I also tried just returning a basic <th> node from the HeaderCustomCell method and it did not work.

Is there a different method to add custom attributes to the HeaderThElement?

Thanks in advance

Hi!

I tried to upgrade to version 8.1.1. The main reason was to solve the problem with pdfjs vulnerability. But after the upgrade it gives me an error:

[ERROR] Could not resolve "@progress/kendo-pdfviewer-common"

 node_modules/@progress/kendo-react-pdf-viewer/PDFViewer.mjs:22:287:
 22 │ ...Nt, download as Tt, print as Mt, DEFAULT_ZOOM_LEVEL as Pt } from "@progress/kendo-pdfviewer-common";
 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

If I installed/Returned kendo-pdfviewer-common, in package-lock.json I see the requirementon pdfjs-dist in version 3.11.174 and the builder warns of a vulnerability problem with pdfjs.

I don't know what I am doing wrong or what is the correct way to avoid the vulnerability with pdf.js. I tried clean install, reset npm cache, nothing helped.

And sorry. The second question I noticed while testing. Build scss (@progress/kendo-theme-bootstrap/scss/all.scss) which took a few seconds on version 5.12 now takes about 180 seconds. I use Esbuild as a builder. I know the themes have been changed, but what could have caused it to take so long?

Well thank you.

I have a Tabstrip with 3 tabs, and those tabs have content that has a dynamic size. Currently when the user selects the different tabs, the tab control will change in size because it is set its width and height to 100% (the size is not known at design time)

I would like to set the size of the tabstrip to the largest size of the dynamic content so that the tab control will remain the same size when the user selects the different tabs. 

How would I achieve that?

I have the following component. The Events are not being displayed. If I try Event by itself, it does get displayed but when I try it with line chart, it doesn't display anything and the Events don't show up in the ledger as well.

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?

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

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?