Given the following example from the official documentation:
https://stackblitz.com/run/?file=app%2Fmain.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import products from './products.json';
class App extends React.Component {
render() {
return (
<Grid
style={{ height: '400px' }}
data={products}
reorderable
>
<GridColumn field="ProductID" title="ID" width="45px" />
<GridColumn field="ProductName" title="Name" width="250px" />
<GridColumn field="Category.CategoryName" title="CategoryName" />
<GridColumn field="UnitPrice" title="Price" width="80px" />
<GridColumn field="UnitsInStock" title="In stock" width="80px" />
</Grid>
);
}
}
ReactDOM.render(<App />, document.querySelector('my-app'));
I need to know what column was exactly reordered from the ui perspectives. Following by https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-oncolumnreorder API I can subscribe to only event that gives me the new columns (including the reordered one). How is possible to know what column was reordered by dragging and dropping feature?
7 Answers, 1 is accepted
Currently, this information is indeed not available inside the event.
Could you please share with us more details about the use case, and we can check what approach we can offer to get the desired information.
There is an approach, but once we have all of the details we may be able to find a more optimal one:
https://stackblitz.com/edit/react-sok6hz?file=app/main.js
Regards,
Stefan
Progress Telerik
Rank 1
Sure.
The thing is that we use conditional column rendering based on column's "show" property (true/false).Such as in one of your example https://stackblitz.com/run/?file=app%2Fmain.js. But current information about new column (that we get from onColumnReorder) is not enough to make their reordering in columns config because of hidden columns presence.
To perform proper re-ordering within columns config we need to know exactly know what column was moved to make array splice on that config. Your example with finding column by comparing text would work but relying on text looks unsafely because text is not unique column identifier.
It would be great if we could get more reliable way of getting reordered column (prevIndex, nextIndex, field or something like that).
Thank you for describing the use case.
I will forward this to the Grid lead developer to check if we can offer a better approach for selecting the items or to provide the desired information.
Please have in mind that prev next indexes can still not be an option when the visible column order is not the same as in the column config due to the show property.
Regards,
Stefan
Progress Telerik
Rank 1
Hello Stefan,
Thank you for the reply.
Prev/next indexes are enough for us as we're managing our own column config that's being used when rendering columns. So we can find changed column and place into new place in our config.
BTW, we've found that it would be great if column visibility would be supported out of the box. I mean that when we perform columns rendering based on columns config, instead of filtering visible columns (show attribute set to true) we could provide it to column definition like the following:
<Grid>
{this.state.columns.map((column, idx) =>
(<Column
key={idx}
field={column.field}
title={column.title}
filter={column.filter}
show={column.show} />)
)}
</Grid>
In this case we can manage columns config more clear.
Prev and Next indexes are not something that we can expose, since the columns are not flat collection. They are a Tree because of the possible multi column headers configuration:
https://www.telerik.com/kendo-react-ui/components/grid/columns/headers/
And a tree could be indexed in a lot of ways.
A possible parameter into the event could be the Column that the user have actually dragged, as per your original request. If you think this is suitable we will add it.
A visible property is something that we are considering, but in long term column virtualization is more desirable, and the visibility will not play well with it. So if we add it now, it is most likely that it will change behaviour or need to be deprecated or incompatible with other features, so unless there is absolutely now way of achieving something without the show/hide property, we will avoid it.
Regards,
Vasil
Progress Telerik
Rank 1
Yes, adding any parameter into the event (or a Column object itself), that allows us to lookup column in our config would be best solution for us and for the Grid component from technical perspectives.
Regards,
Artem
I have logged the request in our public issue tracker. https://github.com/telerik/kendo-react/issues/103 so the status can be checked, and another way to know when it is added is checking the changelog.
Regards,
Vasil
Progress Telerik