Questions on KendoReact Forum

2 answers

337 views

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

31 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

44 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

36 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

37 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

0 answers

56 views

performance issue with large data on grid(in cell edit and checkbox operation) with virtual scroll

Hi Folks,

I have been using Kendo grid with infinite scroll also features incell edit and checkbox operation, It has input box(custom cells), select, checkbox fields.

but this gets really slow when we have more than 50-70 data in the grid.

please suggest how i can work on performance in this scenario.

please find the link below for the code i have folowing.

incell: https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/

checkbox actions: Customizing the Selection : https://www.telerik.com/kendo-react-ui/components/grid/interactivity/selection/

asked on 23 Sep 2024

1 answer

32 views

Keyboard Navigation in Kendo React showing 404 page

Keyboard Navigation in Kendo React showing 404 page.

General Discussions

answered on 19 Sep 2024

1 answer

46 views

Globalization Status

Dear Reciever,

Just curious. Is this link(Globalization Support) up-to-date?
Because some components that are in kendo libraries are not listed in here.

Moreover, is this github repo show the available locale info?

Thanks.
Best Regards.

General Discussions

answered on 03 Sep 2024

2 answers

116 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

3 answers

65 views

TelerikReportViewer in React Redirect When export

Hi,

I'm currently using the Telerik Report viewer in React. It works fine when displaying the report, but I encounter an issue when trying to export the report. Upon attempting to export, it redirects me to the following route:

http://localhost:5000/api/reports/clients/32a9a544f84/instances/bf7cdf0ed6c/documents

This route isn't configured in the routing setup, leading to a subsequent redirection to a 404 error page.

"@progress/telerik-react-report-viewer": "^19.23.718",

General Discussions

updated answer on 17 Jul 2024