Telerik Forums
KendoReact Forum
1 answer
76 views

I am using Kendo React Grid where reordering and resizing is enabled.

  1. I have 5 columns - A,B,C,D,E with equal default width 100px each.
  2. I resize column A to 200px
  3. Then I drag the column A to 3rd position so that new order is B,C,A,D,E

Issue - Now, We see that width of A changes back to 100px and B, which is now on first position, takes the 200px width.

 

Could you please help me with this issue on priority?

Konstantin Dikov
Telerik team
 answered on 20 Oct 2023
1 answer
119 views

Hi there,

I think I've found a bug, but want to run it past you first in case it's known/there's a workaround. I put checkbox filters in this grid: https://codesandbox.io/s/romantic-goldstine-hg8ttr

Bug repro steps:

  1. Filter the first or second column - pick 1 or 2 items ==> the active CSS shows (as expected!)
  2. Add a third or fourth item to the filter ==> the active CSS disappears (not as expected)

The bug: In general, when 3 or more items are chosen from the checkbox filter, the GridColumnMenuFilter.active() method does not return the correct value.

Is there a workaround for this (other than writing my own little check?) - maybe a utility fn that I could use to check the nested active filter state beyond the .active() method?

Konstantin Dikov
Telerik team
 answered on 19 Oct 2023
2 answers
75 views

The multi-select is placed outside of the chart component. The change of multi-select chart data is refreshing which ideally shouldn't be.


BasicGroupChart.js /* Use this for simple charts with the following type: - bar - column - area - line */ import * as React from 'react'; import { Chart, ChartTitle, ChartSubtitle, ChartSeries, ChartSeriesItem, ChartCategoryAxis, ChartCategoryAxisItem, ChartLegend, ChartLegendTitle, ChartTooltip, ChartAxisDefaults } from '@progress/kendo-react-charts'; import { IntlProvider } from "@progress/kendo-react-intl"; import 'hammerjs'; import { groupBy } from "@progress/kendo-data-query"; import { dateFormat } from '@insight/toolkit-react'; export const BasicGroupedChart = (props) => { //set variables from properties passed const chartType = props.chartType; // area, line, bar, column, etc const title = props.title; // chart title const subTitle = props.subTitle; //chart subtitle const data = props.data; //chart data const groupedByField = props.groupedByField; //field used for legend keys const valueField = props.valueField; // field for values (y axis) const categoryField = props.categoryField; // field for categories (x axis) const valueFormat = props.valueFormat; // format for values in y axis (ex. c0 for currency no decimals and p for percent) const labelFormat = props.labelFormat; // format for labels (ex c2 for currency with decimals, n0 for number, no decimals) const showLabels = props.showLabels; //shows or hides value labels const categoryTitle =props.categoryTitle; // title for the Category axis const legendPosition = props.legendPosition; //position of the legend, top, right, bottom, etc const legendTitle = props.legendTitle; //title of the legend const tooltipFormat = props.tooltipFormat; // format for tooltip (ex "My tooltip {0:c}") const locale = props.locale; // culture local (ex. "en-GB") const showCategoryLabels = props.showCategoryLabels; // show the category axis labels const legendVisible = props.legendVisible ?? true; const stacked = props.stacked ?? false; //const colorField = props.colorField ?? "" //alert("DATA = " + JSON.stringify(data)); const series = groupBy(data, [ { field: groupedByField, }, ]); const mapSeries = (item, idx) => ( <ChartSeriesItem key={idx} data={item.items} name={item.value} field={valueField} categoryField={categoryField} type={chartType} labels={{visible:showLabels, format: labelFormat}} stack={stacked} //colorField={colorField} /> ); return( <IntlProvider locale={locale}><Chart><ChartLegend visible={legendVisible} position={legendPosition}><ChartLegendTitle text={legendTitle}></ChartLegendTitle></ChartLegend><ChartTitle text={title} /><ChartSubtitle text={subTitle} /><ChartCategoryAxis><ChartCategoryAxisItem title={{text: categoryTitle}} labels={{visible: showCategoryLabels}} /></ChartCategoryAxis><ChartAxisDefaults labels={{ format: valueFormat }} /><ChartTooltip format={tooltipFormat} /><ChartSeries> {series.map(mapSeries)} {/*props.series.map(s => <ChartSeriesItem name={s.name} data={s.data} key={s.name} type="area"/>)*/} </ChartSeries></Chart></IntlProvider> ); }; Component Used - <BasicGroupedChart chartType="column" title="Invoice Breakdown by Product Category" subTitle="" data={spendPeriod?.spend ? spendPeriod?.spend : ""} categoryField="group" valueField="value" groupedByField="label" categoryTitle="" legendPosition="bottom" legendTitle="" legendVisible={false} tooltipFormat="{0:c}" showLabels={true} valueFormat="c2" labelFormat="c2" locale={accountInfo?.locale} ></BasicGroupedChart>Multi Select - import { DropDownList, MultiSelect } from "@progress/kendo-react-dropdowns"; <MultiSelect data={productNameData} textField="label" dataItemKey="value" value={productName} name="msCategory" placeholder="All" onChange={handleProductNameChange} /> const handleProductNameChange = (event) => { setProductName(event.value); setProductNameObject([...event.value]); setProductNameLength(event.value.length) };

 

 

Created one dummy Project -

https://stackblitz.com/edit/react-ab4fou-czgxv7?file=index.js

Multi select change, delete should not impact the chart.


 

 

Mahesh
Top achievements
Rank 1
Iron
Iron
 answered on 18 Oct 2023
0 answers
179 views
We have a project react as fronted and Django as back end. We want to create an API that allows to fill pdf forms (edit those forms before creating the api). Thinking of using open source libraries like pdf-lib or PDFBox or any other suitable library.
M
Top achievements
Rank 1
 asked on 18 Oct 2023
1 answer
211 views

Hello.

We use esbuild to build the react application. From a certain moment, the build fails us with an error: X [ERROR] Undefined operation "var(--bs-border-width) * 2".

It is possible to fix it somehow?

 

We use:

"@progress/kendo-theme-bootstrap": "^6.2.0"

"bootstrap": "^5.1.3"

 "react-bootstrap": "^2.6.0"

 

 

 

Thank you.

Vessy
Telerik team
 answered on 18 Oct 2023
1 answer
113 views

Hello,

I'm currently not using the KendoReact - DateTimePicker because I miss the ability to apply a selected Date/Time without

having to press "set". Maybe with an onChange event or similar.

Does anyone have a best practice or workaround to solve this issue?

 

Thanks in advance and Kind regards ~

Wissam
Telerik team
 answered on 18 Oct 2023
1 answer
85 views

Hi,

Is it possible to use Grid pager and virtual scrolling together? Let's say pager's page size is 100, and virtual scrolling's page size is 50. According to the Grid documentation, "take: Alias of pageSize property. If take is set, pageSize will be ignored". How would I set the 'take' variable for pager and virtual scrolling separately?

 

Thanks,

Jie

Filip
Telerik team
 answered on 17 Oct 2023
1 answer
98 views

Hi,

I have a scenario where I do not want to show the placeholder in the date filter of UI Grid until the user clicks it. I achieved that using the example given here Kenod Grid - StackBlitz. With this implementation, I'm getting an issue where the filter placeholder doesn't disappear when a browser tab is changed. It only disappears when the area is focused and then clicked outside. This is continuously visible on chromium-based browsers react-bh72m1-a3qerg.stackblitz.io

 

Konstantin Dikov
Telerik team
 answered on 17 Oct 2023
1 answer
94 views

Hi,

 

Grid seems have problem dealing with virtual scroll and detail row at the same time. From the official documentation https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes/virtual/, in its example, if I added following props to <Grid> and try to scroll, the page will get stuck because it is trying to render too many rows:

https://codesandbox.io/s/5r9frx?file=/app/main.jsx

expandField={"expanded"} detail={() => <div>test</div>}

Note that, if remove expandField property, it will work.

Thanks,

Jie

Konstantin Dikov
Telerik team
 answered on 16 Oct 2023
1 answer
106 views

I want to customize the Pager, but from what I can see I will have to build the whole pager. I only wan to update the Pager info from "1 - 50 of 55 items" to just "55 items".

Is that posslbe?

Vessy
Telerik team
 updated answer on 16 Oct 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?