Hello, I am using Kendo React Library.

 

I'm having some issues with the customization of the charts:

  - I have created a donut chart and I need to animate each slice on mouse-over event scaling the slice as shown in the picture attached.

  - I have a bar chart and I need to change the style of the Category Axis Label when the mouse is over a series. I have discovered in the docs that a highlight object exists on the ChartSeriesItem but in the toggle function I do not know how to trigger the change of style for the category label.

 

Thanks

-- Matteo

     We have a grid that has a multiple sort on it. Icon 1 and the arrow is missing, while we can see icon 2 and the arrow. If we click on the first sort it changes to 3 with an arrow. 

Our sort descriptor is as follows:

const [sorter, setSorter] = React.useState<SortDescriptor[]>([
        { field: "orgDisplay", dir: "asc" },
        { field: "userKey", dir: "asc" }
    ]);

and we have: 

sortable={{ mode: "multiple" }}

to allow multiple sort on the grid.

Is there something that would prevent the 1 and the arrow icon from showing?

Thanks

Hi.

I have a Kendo React grid. data is coming from a fetch API. It works fine, but I have a drop down list that gets filled by another API.

Where do I fetch that data? Does anyone have a working example?

 

Thanks!!

Hi Kendo UI Community.

My team and I are currently encountering some difficulty with our implementation of the KendoReact Grid component. Particularly in regards to our implementation of the onColumnResize and onColumReorder functions we pass to the Grid.

A little bit of context: we get our columns from a redux store which we populate with data from a proprietary backend. We wish to maintain the array of columns here so that we can use our existing architecture to send these columns to the backend for serialization.

The problem is that for the onColumnResize function we accept "columns" and "index" as parameters. We use this index as an array index for our columns in redux. Everything works as expected when an end user has not manually reordered the columns. However; once the columns are reordered an orderIndex is applied and it is no longer correct, for the onColumnResize function, to use the "index" parameter as an array index.

We want to avoid using any conditional logic in our onColumnResize function to determine whether we should be accessing the column via the array index or the orderIndex. Ideally the orderIndex would always exist or the columns would come back from Kendo in a sorted array.

Does anyone have any suggestions please? 

Thank you in advance for any suggestions, guidance or advice!

Hi,

 

https://stackblitz.com/edit/react-gmfcy6-5rknaj

In above example I'm using grouping and row selection as well.
Issue is: row selection is not working when grouped. IF you remove grouping `unit in stock` and click on any row it will immediately highlight selected row.

 

Thanks
Vikram E.

I've category column (contains unique guid) in my data[].
While showing category column in grid, somehow I've managed to show respective category_name instead of category_id at clientside.

I'm using GridColumnMenuCheckboxFilter to show checkbox filter with all possible filterable values.
But all checkboxes in category filter popup shows category_id (which is default behavior), this is not readable to user.

Can I change labels of checkboxes in category filter popup from category (i.e category_id) to category_name.

 

 

Hi.

I am trying to implement a detail row in my grid, as shown in this example:

 

https://www.telerik.com/kendo-react-ui/components/grid/rows/detail/

 

It works great, but how can I make this editable as well? I need to be able to edit all columns, details as well.

Is this possible? whatever I tried didn't work for me.

 

Thanks!

 

 

Hi,

 

I'm working on a Kendo React Grid in my application and I'm trying to figure out how to navigate each 'td' (cell) of the grid using tab key. I was able to navigate where i have buttons rendered in a cell (using cell option).

I have followed below example which uses rowRender but it was selecting whole row.

https://stackblitz.com/edit/react-njk8q2-qlvomy?file=app/main.jsx

 

Is there a way to navigate to each cell of the grid when using tab key?

Hi, i have a filter that needs to be sending a query to an aspnet core server, which the client gets from [toDataSourceRequestString](https://www.telerik.com/kendo-react-ui/components/dataquery/api/toDataSourceRequest/).

I am trying to use DateRangePicker to be within a filter query, with that i use SelectionRange to keep start date and end date.
And the operator looks something like this:
```ts
const inRange = (current, { start, end }) => (start === null || current >= start) && (end === null || current <= end);

return (
  <DateRangePicker
    {...props}
    onChange={event => {
      props.onChange({
        value: {start: event.value.start, end: event.value.end },
        operator: inRange,
        syntheticEvent: event.syntheticEvent,
      });
    }}
  />
```
which was grabbed from https://www.telerik.com/kendo-react-ui-develop/components/grid/filtering/#custom-filter-cells, at rangeFilterCell.jsx.

With that on Grid i use onDataStateChange with the event GridDataStateChangeEvent, that is where i set my requestState to GridDataStateChangeEvent.dataState.

An example on how my filters are setup, and the request string is created:
```ts
const [requestState, setRequestState] = useState<DataSourceRequestState>({
  skip: 0,
  take: 15,
  sort: [
    {
      field: 'id',
      dir: 'desc'
    }
  ],
  filter: {
    filters: [
      {
        field: 'status',
        operator: 'eq',
        value: 'Open'
      }
    ],
    logic: 'and' as const
  }
});

handleFetch(`${toDataSourceRequestString(requestState)}`);
```

When there is no date set, the querystring becomes `page=1&pageSize=15&sort=id-desc&filter=status~eq~'Open'`, as expected, and works.

But then when trying to filter the from-to date, the SelectionRange object does not translate it's value to querystring, leaving the querystring to be:
```
filter=(createdAt~(current,%20{%20%20%20%20start,%20%20%20%20end%20%20})%20=%3E%20(start%20===%20null%20||%20current%20%3E=%20start)%20&&%20(end%20===%20null%20||%20current%20%3C=%20end)~[object%20Object]~and~status~eq~%27Open%27)&sort=id-desc&page=1&pageSize=15
```

```
filter=(createdAt~(current, {
    start,
    end
  }) => (start === null || current >= start) && (end === null || current <= end)~[object Object]~and~status~eq~'Open')&sort=id-desc&page=1&pageSize=15
```
Note the [object Object], which is not parsable by the server, cause of obvious reasons.

I have also tried using with instead of the object containing start and end, but also with min max which is showed in the custom filter cells link shown above.

Here is the console.log version of the filter object:
```json
{
  "filter": {
    "logic": "and",
    "filters": [
      {
        "field": "createdAt",
        "value": {
          "start": "2020-09-02T22:00:00.000Z",
          "end": "2020-09-17T22:00:00.000Z"
        }
      },
      {
        "field": "status",
        "operator": "eq",
        "value": "Open"
      }
    ]
  },
  "sort": [
    {
      "field": "id",
      "dir": "desc"
    }
  ],
  "skip": 0,
  "take": 15
}
```

We have tried to see on different options, but it does not seem like there is a way.

'kendo' is not defined no-undef

Hello I encounter this error when using the pivot grid using the sample code below

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import '@progress/kendo-ui';
import { PivotGrid, PivotGridConfigurator } from '@progress/kendo-pivotgrid-react-wrapper';
class PivotGridContainer extends React.Component {
  constructor(props) {
    super(props);
    this.dataSource = new kendo.data.PivotDataSource({
      type: "xmla",
      columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Product].[Category]" }],
      rows: [{ name: "[Geography].[City]" }],
      measures: ["[Measures].[Reseller Freight Cost]"],
      transport: {
        connection: {
          catalog: "Adventure Works DW 2008R2",
          cube: "Adventure Works"
        },
        read: "https://demos.telerik.com/olap/msmdpump.dll"
      },
      schema: {
        type: "xmla"
      },
      error: function (e) {
        alert("error: " + kendo.stringify(e.errors[0]));
      }
    });
  }
  render() {
    return (
      <div>
        <PivotGridConfigurator dataSource={this.dataSource}
          filterable={true}
          sortable={true}
          height={300}>
        </PivotGridConfigurator>
        <PivotGrid dataSource={this.dataSource}
          filterable={true}
          sortable={true}
          height={550}
          columnWidth={200}>
        </PivotGrid>
      </div>
    );
  }
}
ReactDOM.render(<PivotGridContainer />, document.querySelector('my-app'));