Questions on KendoReact Forum

1 answer

8 views

StockChart hover and navigator marker colors do not match custom visual marker styles

Hello Kendo UI Team,

I'm using the Kendo React StockChart component and I have two related questions regarding hover behavior and color consistency between the main chart and the navigator (mini chart):

Hover color mismatch:
When I hover over a data point, the marker uses a custom stroke color. However, the hover effect (like the highlight) does not match this stroke color.
Is there a way to make the hover color consistent with the marker’s stroke color?
Navigator highlight inconsistency:
When I click on a data point in the main chart, the corresponding point in the navigator becomes highlighted, but its color doesn't match the marker’s color either (it uses the default series color).
Can we customize the highlight color in the navigator to match the main chart marker color as well?

For reference, I use a visual function to customize the markers with stroke colors dynamically based on the data item. The chart works fine visually, but the hover/highlight styles are inconsistent.

Let me know if this behavior is expected or if there's a recommended way to fully align the hover and highlight colors with custom marker styles.

Thanks!

Frsqz1ns (duplicated) - StackBlitz

Charts

General Discussions

answered on 30 May 2025

1 answer

11 views

Is the Nuget server down?

I cannot compile the application because of these errors in the output:

The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.datasource/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.datasource/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.datasource/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.datasource/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.datasource/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.datasource/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.datasource/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.datasource/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.ui.for.aspnet.core/index.json' has timed out after 100000ms.
Retrying 'FindPackagesByIdAsync' for source 'https://nuget.telerik.com/v3/package/telerik.datasource/index.json'.
The HTTP request to 'GET https://nuget.telerik.com/v3/package/telerik.datasource/index.json' has timed out after 100000ms.

General Discussions

answered on 21 May 2025

1 answer

12 views

ECCN of Kendo React

Hi Telerik support,

We are planning to use Kendo React v5.9.0 in our System and this system will be exported.
Could you please tell me the ECCN for Kendo React?

Thank you!

General Discussions

answered on 19 May 2025

1 answer

14 views

Exported image does not scale chart content to fit the specified dimensions

Hi Kendo Team,

I'm using the exportVisual and exportImage APIs to export a chart to a PNG file in my React application. I expected that setting a larger width and height in the exportImage options would result in a proportionally scaled-up chart. However, while the output image has the correct dimensions (e.g., 1920x1080), the chart content itself does not scale up — it stays small in the top-left corner and does not fill the canvas.

It seems that the exportImage function does not automatically scale the chart visual to match the specified output size.

Please let me know if this is the intended behavior or if there's a simpler way to scale the visual.

Thanks!
Dbcojf8y (forked) - StackBlitz

Charts

General Discussions

answered on 13 May 2025

0 answers

30 views

Is there a way to download the examples as an app?

Is there a way to download the examples as an app? This way I can change the code on my machine and use an AI assistant against the code. Also be able to use the IDE's capability for code navigation and refactoring.

General Discussions

updated question on 22 Apr 2025

2 answers

350 views

Include Kendo React with Script Tag

Copied from https://stackoverflow.com/q/55593449/1399272

I am trying to develop with Kendo React in a .NET Web Forms application. It looks like Kendo distributes their packages as a variety of JavaScript modules -- the dist folder in their node packages contains the following four subfolders:

cdn/js
es
npm
systemjs

I'm sure this is relatively painless to work with in some of the newer JavaScript systems, but I do not have access to utilities such as node.js to manage modules. I am trying to simply include a JavaScript file with a script tag, but so far have not had much luck. I get the following errors when trying to include @progress/kendo-react-common:

cdn/js: Uncaught TypeError: Cannot read property 'string' of undefined
es: Uncaught SyntaxError: Unexpected token { (not like I expect a raw browser to understand import anyway)
npm: Uncaught ReferenceError: exports is not defined
systemjs: Uncaught ReferenceError: System is not defined

It looks like @TylerDahle has done something similar here: https://stackoverflow.com/q/49740869/1399272. But I don't know where he gets his source from.

Is there any way to include a Kendo React script with a script tag?

General Discussions

answered on 04 Feb 2025

1 answer

52 views

X-Axis Category Labels Not Displaying at Custom Min Value

Hi All:
When using the Kendo UI Chart, data points with a value of 0 are getting obscured by the X-axis (category axis). Although I tried setting the min property on ChartCategoryAxisItem to adjust the axis' minimum value (e.g., starting from a negative number), the axis labels do not appear correctly at the specified min value. Instead, they still start from the actual minimum value of the data. As a result, data points with a value of 0 are obscured, which affects the readability and presentation of the chart.

I am facing an issue where data points with a value of 0 are being obscured by the X-axis category labels in Kendo React Charts. I tried setting custom min and max values for the ChartCategoryAxisItem, but this causes the data to be displayed in a flattened manner. Is there a recommended solution to prevent this overlap or display the data points clearly without affecting the overall chart appearance? Thanks in advance!!

Oqvxwbhd (forked) - StackBlitz

Charts

General Discussions

StockChart

answered on 24 Jan 2025

1 answer

65 views

Problems with nested columns and excess colSpan

Hi, I'm having problems trying to render grouped columns:

I have this grid:

/**
     * Renderiza una columna del grid.
     */
    const renderColumn = useCallback(
        (col: ColumnDef<T>, index: number) => (
            <GridColumn
                key={index}
                field={col.field as string}
                title={col.title}
                width={col.width}
                sortable={col.sortable}
                filterable={col.filterable}
                filter={enableFiltering ? col.filter : undefined}
                cell={CustomCell}
                resizable
            />
        ),
        [enableFiltering]
    );
    /**
     * Memoizar las columnas para evitar renderizados innecesarios.
     */
    const renderedColumns = useMemo(() => {
        if (columnsRowGrouped && !columns) {
            return columnsRowGrouped.map((group, groupIndex) => (
                <GridColumn key={groupIndex} title={group.title}>
                    {group.columns.map((col, colIndex) =>
                        renderColumn(col, colIndex)
                    )}
                </GridColumn>
            ));
        }
        if (columns && !columnsRowGrouped) {
            return columns.map((col, index) => renderColumn(col, index));
        }
        return null;
    }, [columns, columnsRowGrouped, renderColumn]);
 return (
        <div
            className={`${styles.telerik_generic_grid}`}
            style={gridProps.style}
        >
            <LocalizationProvider language="es-ES">
                <IntlProvider locale="es">
                    <ExcelExport
                        ref={_export}
                        data={Array.isArray(data) ? data : (data as DataResult).data || []}
                        fileName={exportFileName}
                    >
                        <Grid
                            id={id}
                            ref={grid}
                            className={`${gridProps.className || 'w-full'}`}
                            data={serverPaging ? data : localData.data}
                            total={serverPaging ? totalCount : localData.total}
                            pageable={enablePaging ? pageable : false}
                            sortable={enableSorting ? gridProps.sortable : false}
                            onSortChange={gridProps.onSortChange}
                            onPageChange={gridProps.onPageChange}
                            filterable={enableFiltering ? gridProps.filterable : false}
                            skip={dataState.skip}
                            take={dataState.take}
                            sort={dataState.sort}
                            resizable={gridProps.resizable}
                            style={{ width: '100%' }}
                            scrollable="scrollable"
                            onDataStateChange={handleDataStateChange}
                            onSelectionChange={gridProps.onSelectionChange}
                            {...gridProps}
                        >
                            {renderedColumns}
                        </Grid>
                    </ExcelExport>
                </IntlProvider>
            </LocalizationProvider>
        </div>
    );
}
 
 

with this data for example :

const sampleColumnsRowGrouped = [
  {
      title: "Grupo 1",
      columns: [
          { field: "field1" as "field1", title: "Campo 1", width: "auto" },
          { field: "field2" as "field2", title: "Campo 2", width: "auto" },
      ],
  },
  {
      title: "Grupo 2",
      columns: [
          { field: "field3" as "field3", title: "Campo 3", width: "auto" },
          { field: "field4" as "field4", title: "Campo 4", width: "auto" },
      ],
  },
];
const sampleData = [
  {
      field1: "Dato 1",
      field2: "Dato 2",
      field3: "Dato 3",
      field4: "Dato 4",
  },
];

da esta respuesta

y este html

<div class="telerik-generic-grid_telerik_generic_grid__tK_ST">
  <div id="joins__grid_" style="width:100%" class="k-grid k-grid-md w-full" data-keyboardnavscope="true">
    <div class="k-grid-aria-root" role="grid" aria-colcount="4" aria-rowcount="1" id="joins__grid_-role-element-id" aria-label="Table">
      <div class="k-grid-header" role="presentation">
        <div class="k-grid-header-wrap" style="border-width:0" role="presentation">
          <table class="k-table k-grid-header-table k-table-md" role="presentation">
            <colgroup>
              <col width="NaNpx">
              <col width="NaNpx">
              <col width="NaNpx">
              <col width="NaNpx">
            </colgroup>
            <thead class="k-table-thead" role="rowgroup" data-keyboardnavheader="true">
              <tr class="k-table-row" style="touch-action:none" role="row" aria-rowindex="1">
                <th aria-sort="none" aria-colindex="1" aria-selected="false" colspan="32" rowspan="1" role="columnheader" class="k-table-th k-header" style="left: 0px; right: 0px;">
                  <span class="k-cell-inner">
                    <span class="k-link !k-cursor-default">
                      <span class="k-column-title">Grupo 1</span>
                    </span>
                  </span>
                  <span class="k-column-resizer" style="touch-action:none" draggable="false"></span>
                </th>
                <th aria-sort="none" aria-colindex="33" aria-selected="false" colspan="32" rowspan="1" role="columnheader" class="k-table-th k-header" style="left: 0px; right: 0px;">
                  <span class="k-cell-inner">
                    <span class="k-link !k-cursor-default">
                      <span class="k-column-title">Grupo 2</span>
                    </span>
                  </span>
                  <span class="k-column-resizer" style="touch-action:none" draggable="false"></span>
                </th>
              </tr>
              <tr class="k-table-row" style="touch-action:none" role="row" aria-rowindex="2">
                <th aria-sort="none" aria-colindex="1" aria-selected="false" colspan="1" rowspan="1" role="columnheader" class="k-table-th k-header" style="left: 0px; right: 0px;">
                  <span class="k-cell-inner">
                    <span class="k-link !k-cursor-default">
                      <span class="k-column-title">Campo 1</span>
                    </span>
                  </span>
                  <span class="k-column-resizer" style="touch-action:none" draggable="false"></span>
                </th>
                <th aria-sort="none" aria-colindex="2" aria-selected="false" colspan="1" rowspan="1" role="columnheader" class="k-table-th k-header" style="left: 0px; right: 0px;">
                  <span class="k-cell-inner">
                    <span class="k-link !k-cursor-default">
                      <span class="k-column-title">Campo 2</span>
                    </span>
                  </span>
                  <span class="k-column-resizer" style="touch-action:none" draggable="false"></span>
                </th>
                <th aria-sort="none" aria-colindex="3" aria-selected="false" colspan="1" rowspan="1" role="columnheader" class="k-table-th k-header" style="left: 0px; right: 0px;">
                  <span class="k-cell-inner">
                    <span class="k-link !k-cursor-default">
                      <span class="k-column-title">Campo 3</span>
                    </span>
                  </span>
                  <span class="k-column-resizer" style="touch-action:none" draggable="false"></span>
                </th>
                <th aria-sort="none" aria-colindex="4" aria-selected="false" colspan="1" rowspan="1" role="columnheader" class="k-table-th k-header" style="left: 0px; right: 0px;">
                  <span class="k-cell-inner">
                    <span class="k-link !k-cursor-default">
                      <span class="k-column-title">Campo 4</span>
                    </span>
                  </span>
                  <span class="k-column-resizer" style="touch-action:none" draggable="false"></span>
                </th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
      <div class="k-grid-container" role="presentation">
        <div class="k-grid-content k-virtual-content" role="presentation">
          <div class="k-grid-table-wrap" role="presentation">
            <table class="k-table k-grid-table k-table-md" role="presentation">
              <colgroup>
                <col width="NaNpx">
                <col width="NaNpx">
                <col width="NaNpx">
                <col width="NaNpx">
              </colgroup>
              <tbody class="k-table-tbody" role="rowgroup" data-keyboardnavbody="true">
                <tr class="k-table-row k-master-row" role="row" aria-rowindex="3" absolute-row-index="0" data-grid-row-index="0">
                  <td>Dato 1</td>
                  <td>Dato 2</td>
                  <td>Dato 3</td>
                  <td>Dato 4</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="k-pager k-pager-md k-grid-pager" role="application" aria-roledescription="pager" aria-label="Page 1 of 1" tabindex="0">
      <div class="k-pager-numbers-wrap">
        <button title="Go to the first page" role="button" aria-disabled="true" tabindex="-1" class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-pager-nav k-pager-first k-disabled">
          <span class="k-icon k-svg-icon k-svg-i-caret-alt-to-left k-button-icon" aria-hidden="true">
            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path d="M352 384 160 256l192-128zM128 128v256h32V128z"></path>
            </svg>
          </span>
        </button>
        <button title="Go to the previous page" role="button" aria-disabled="true" tabindex="-1" class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-pager-nav k-disabled">
          <span class="k-icon k-svg-icon k-svg-i-caret-alt-left k-button-icon" aria-hidden="true">
            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path d="m160 256 192-128v256z"></path>
            </svg>
          </span>
        </button>
        <select style="width:5em;margin:0px 1em;display:none" class="k-picker k-dropdown-list k-dropdown k-rounded-md k-picker-md">
          <option selected="">1</option>
        </select>
        <div class="k-pager-numbers">
          <button role="button" aria-label="Page 1" aria-current="true" tabindex="-1" class="k-button k-button-md k-button-flat k-button-flat-primary k-selected">
            <span class="k-button-text">1</span>
          </button>
        </div>
        <button title="Go to the next page" role="button" aria-disabled="true" tabindex="-1" class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-pager-nav k-disabled">
          <span class="k-icon k-svg-icon k-svg-i-caret-alt-right k-button-icon" aria-hidden="true">
            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path d="M352 256 160 384V128z"></path>
            </svg>
          </span>
        </button>
        <button title="Go to the last page" role="button" aria-disabled="true" tabindex="-1" class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-pager-nav k-pager-last k-disabled">
          <span class="k-icon k-svg-icon k-svg-i-caret-alt-to-right k-button-icon" aria-hidden="true">
            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path d="m128 128 192 128-192 128zm224 256V128h-32v256z"></path>
            </svg>
          </span>
        </button>
      </div>
      <span class="k-pager-sizes">
        <span class="k-dropdownlist k-picker k-picker-md k-picker-solid k-rounded-md" tabindex="-1" role="combobox" aria-required="false" aria-haspopup="listbox" aria-expanded="false" aria-owns=":R1lqukq:-listbox-id" aria-label="Page size" aria-describedby=":R1lqukq:-accessibility-id" aria-controls=":R1lqukq:-listbox-id" id=":R1lqukq:">
          <span id=":R1lqukq:-accessibility-id" class="k-input-inner">
            <span class="k-input-value-text">10</span>
          </span>
          <button tabindex="-1" type="button" aria-label="select" class="k-button k-button-md k-button-solid k-button-solid-base k-icon-button k-input-button">
            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down k-button-icon" aria-hidden="true">
              <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path d="M256 352 128 160h256z"></path>
              </svg>
            </span>
          </button>
          <select tabindex="-1" aria-hidden="true" style="opacity:0;width:1px;border:0;z-index:-1;position:absolute;left:50%">
            <option value="10"></option>
          </select>
        </span>
        <span>items per page</span>
      </span>
      <span class="k-pager-info">1 - 1 of 1 items</span>
    </div>
  </div>
</div>

If you see the colspan that it generates for the parent columns it is 32 and it should be 2 each.

If someone could help me, I've been trying for a while and nothing, thank you very much in advance

General Discussions

Grid

answered on 23 Dec 2024

1 answer

61 views

Inquiry About React Component for Advanced Chat Bot Functionality

I am currently working on a project that requires a React component with advanced chat bot functionality, and I would appreciate your guidance on how to implement it. The component should have the following capabilities:

Initially display as a small icon.
When the small icon is clicked, it should open a small chat window at the bottom corner of the screen.
The small chat window should have the capability to be moved anywhere on the screen.
The window should be able to expand to full screen by clicking a small icon on the chat box.
The window should be able to open in a new tab or new browser window.
Each message in the chat box should be able to be copied to the clipboard, and the alignment format of the messages should be changeable.

Could you please provide some insights or examples on how to achieve this functionality using React-typescript? Any advice or resources you could share would be greatly appreciated.

Thank you for your time and assistance.

AIPrompt

General Discussions

answered on 09 Dec 2024

1 answer

52 views

Linting Kendo components

Hi,

Does your team have an suggestions on how to go about linting Kendo elements?

My situation is that, Im using Kendo buttons inside a KendoForm to do things other than submit (which is the default button type in many browsers). Best practice says that when using buttons, we hould always delcar the type (as button|submit|reset), but type is not a required attribute.

I would like to lint my code to make sure taht any button declared has a type. Ths can be acheived on HTML buttons using @jsx-eslint/react/button-has-type rule, however it does not work on KendoButtons, but case those componetns are not HTML buttons.

The only other option i can think of is to extend the KendoButton into a custom component that requires the type attribute, and then only use my custom button interface (TypeScript).

Any thoughts?

Thanks,
Grant

General Discussions

answered on 11 Oct 2024