React Grouping

Hello, Parag,

I can assume that the issue occurs because the DropDown is made using the cell property and this will be called for every cell event in the group header. 

I can suggest the following approach in the render method of the DropDown cell component:



--------------------------------------------------------------

Also, I noticed that this account is not currently associated with a valid License or a Trial.  Could you please start a Trial account or associate this with a license if you already have a valid license.

Regards,
Stefan
Progress Telerik

Hi Stefan,

It is working but when it invoked the itemchange event of grid on change of drop down value and tried to access state, throws the error stating "state" undefined.

Hi Stefan,

 

It is working, but when it invoked itemchange of grid event on change of dropdown it throws error stating that "state" undefined

 

 

Hello, Parag,

This error could occur if the itemChange function is not bound to "this".

Still, the introduced change should not affect this.

Could you please share an example where the issue is reproduced and I will gladly check it?

Regards,
Stefan
Progress Telerik

Hi Stefan,

It is working.

Can you please share an example with Custom control with grouping inside grid.

Hello, Parag,

The following example with a custom editor can be combined with the grouping one:

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-custom/

https://www.telerik.com/kendo-react-ui/components/grid/grouping/#toc-grouping-basics

This is the combined result:

https://stackblitz.com/edit/react-we8fax?file=app/main.js

-------------------------------------------------------------------------------------------------------------

I still do not see any license or a Trial associated with this account. Could you please elaborate on this matter?

Regards,
Stefan
Progress Telerik

Hi Stefan

 

Apologies for delay response. I started the trial with this account.

 

Thanks for the above information. 

Hi Stefan,

I have integrated the above changes in my code and it is working fine.

 

I am trying to implement Add New functionality. When i clicked on button it successfully adds the row and when I add the data inside the controls it automatically group but Newly added row stay at the top only.

 

Below is the code and attached is the screenshot

enterInsert = () => {
const dataItem = { inEdit: true, FullName: "", FullNameId: -1, FirstName: "", LastName: "", BirthDate: "" };
const newproducts = this.state.data.slice();
newproducts.unshift(dataItem);
this.update(newproducts, dataItem);
this.setState({
data: newproducts
});
}

 

As shown in screenshot when I selects the Full Name it automatically populates the data in other controls and grouped the same as per Middle name

Also when I clicked on expandfield it fails. It throws attached error 

 

Below is the sample code

expandChange = (event) => {
console.log("expandChange-->", event);
event.dataItem[event.target.props.expandField] = event.value;
this.setState({
data: Object.assign({}, this.state.data.slice()),
dataState: this.state.dataState
});
}

<Grid
style={{ height: '520px' }}
resizable={true}
reorderable={true}
filterable={true}
pageable={{ pageSizes: true }}
groupable={false}
editField="inEdit"
data={process(this.state.data, this.state.dataState)}
onDataStateChange={this.dataStateChange}
{...this.state.dataState}
onExpandChange={this.expandChange}
onItemChange={this.itemChange}
expandField="expanded"
>
<GridToolbar>
<button
title="Add new"
className="k-button k-primary float-left"
onClick={this.enterInsert}
>Add new
</button>
</GridToolbar>
<GridColumn field="Id" title="Id" width="50px" editable={false} filterable={false} />
<GridColumn field="FullName" title="Full Name" cell={DropDownCell} />
<GridColumn field="EmployeeId" title="Employee Id" editor="numeric" format="{0:#####}" filter="numeric" />
<GridColumn field="BirthDate" title="BirthDate" editor="date" format="{0:d}" filter="date" editable={true} />
<GridColumn field="FirstName" title="First Name" cell={firstNameCell} />
<GridColumn field="MiddleName" title="Middle Name" />
<GridColumn field="LastName" title="Last Name" cell={lastNameCell} />
<GridColumn cell={this.CommandCell} filterable={false} />
</Grid>

 

this.state = {
data: sampleList.map((item) => Object.assign({ inEdit: true }, item)),
dataState: { take: 10, group: [{ field: 'MiddleName' }] }
};

Hi Stefan,

 

Add New issue is resolved. 

Can you please help me with ExpandField, as mentioned above.

 

Thanks,

Parag

Hi,

I am not sure if the attached screenshot is related to us or uploaded by mistake.

Note that the process method always returns new data. So 
event.dataItem[event.target.props.expandField] = event.value; 
will not have effect in the shown code.

I would suggest you to store handle the onExpandChange event and store the value of the group into the state of your app. And after processing the data to map the result find the group and set it's state. 

I could give you sample if you describe the behaviour you want to achieve, since there are 3 versions and each have pros and cons and will need different implementation:
1. If group is expanded/collapsed, it will remain in the same state after  sort/filter/page operations
2. if group is expanded or collapsed it will be in initial state after sort/filter/page operations
3. if group on given index (first group or second group) is expanded, the same index will be expanded after paging operations.
On a side note you need to clear up what is the expected behaviour when user collapses some groups and then group by something else or apply more groups or clear them. Should the group items be reset to the original expanded state or should they remain collapsed.

Since every combination is possible using different implementation I would encourage you to explain the target behaviour and then to discuss the code, to avoid sending back and forth code that could be irrelevant. 

Regards,
Vasil
Progress Telerik

Hi Vasil,

 

the implementation which I am trying to follow is related to the first version i.e.

If group is expanded/collapsed, it will remain in the same state after  sort/filter/page operations

 

The behavior which I wanted to achieve the onclick of expand field arrow the records should collapsed. Currently when I clicked on expand arrow it fails

 

Hello, Parag,

Thank you for the clarification.

In this case, a collection has to be used in the state to keep information which field is expanded and which is not and to apply it before rendering.

I made an example demonstrating this. Please have in mind that correct the example work only on the first level of grouping and recursion has to be used if there will be more levels:

https://stackblitz.com/edit/react-we8fax-pmvw9o?file=app/main.js

Any other logic that can keep track which field is expanded can be used as well. The important information to match an groups items is the field, the value, and the expanded state:




Regards,
Stefan
Progress Telerik