Enable disable the fields/controls in React Kendo Grid

[Parag]

I want to disable the fields/controls in React kendo grid based on input.
For example : Based on selection of value in Full Name, I want to disable the Birth Date column

[Stefan]

Hello, Parag,

This could be achieved using different approaches based on the used editing logic.

In general, the editable property of the column can be set to function, and this function will determine if the column will be editable or not:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-editable

I made an example using one of the approaches:

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

If more details are needed, please share how the editing is handled and we will assist further.

Regards,
Stefan
Progress Telerik

[Parag]

My use includes based on selection of combo box value it should populate the values in other controls. I am using the same editing logic which is specified in Kendo website (https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline/).

Please find attached screenshot for my use case

On selection of Full name (dropdown) value I am able to populate the value in Last Name control however same is not getting updated in dataItem because onchange of dropdown I am firing  this.props.onChange which itself invokes ItemChange event and it updates one value at a time in dataItem (Currently it updates FullNameId in dataItem, As I specified same in code), similarly I want to update the other fields as well. Below is the function which get fires when I changed the values in dropdown. Is there any option to pass multiple field on change like LastName, FirstName etc.

handleChange = (e) => {
        this.props.onChange({
            dataItem: this.props.dataItem,
            field: "FullNameId",
            syntheticEvent: e.syntheticEvent,
            value: e.target.value
        });
     }

[Stefan]

Hello, Parag,

Yes, it is possible to pass the entire dataItem, but then this has to be handled on the itemChange event by setting only the value on the entire dataItem. Also, the itemChange event also modifying multiple properties on a single change.

I made an example demonstrating this:

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

Regards,
Stefan
Progress Telerik

[Parag]

Thanks for the quick reply. It works. 

also can you please let me know is there any mechanism to focus individual cell of grid. for example : I have button outside of grid and onclick of button I want to focus inside the grid cell. The cell which is empty or having error.

[Stefan]

Hello, Parag,

This can be done by selecting the desired element based on a query selector and calling its focus method:

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


Regards,
Stefan
Progress Telerik

[Parag]

Hi Stefan,

Thanks for the quick reply. Do we have any other way apart from using javascript class name?

Regards,

Parag

 

 

[Parag]

Hi Stefan,

Below approach works for me but I am facing one issue when I click on Add New button. For example When I clicked on button it adds a new row to the grid and whenever I select the dropdown values it updates rest of the cells. Till this point everything works fine but when I again clicked on add new button, then dropdown in newly added row , takes values of previously added dropdown control row.

 

Below is the code

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

[Stefan]

Hello, Parag,

Regarding the questions:

1)  " Do we have any other way apart from using javascript class name?" - Any approach for selecting the desired element can be used, the Grid is a standard DOM element and its elements can be accessed in the most convenient way depending on the case.

2) "When I again clicked on add new button, then DropDown in a newly added row, takes values of previously added DropDown control row." - Please check if the "newproducts" value just before it is passed to the state. If it is with the old value inspect the update function to ensure that at any point the values are not being overwritten.

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

Also, I noticed that this account is not currently associated with a valid License or a Trial. Before continuing with the technical support, could you please start a Trial account or associate this with a license if you already have a valid license.

Regards,
Stefan
Progress Telerik

[Parag]

Hi Stefan,

 

 have integrated filter in grid and when I clicked on focus button focus went to filterable textbox. is there any way to bypass this?   

[Stefan]

Hello, Parag,

This could occur if the DOM selector is targeting the textbox element. 

Could you please provide the code that is used to focus the button?

Also, a short video or a screenshot of the case could prove helpful.

Regards,
Stefan
Progress Telerik

[Jatin]

Hi Stefan,

 

I have a use case where I want to disable or enable in-cell editing based on the data I am passing to GRID.

 

Regards,

Jatin

[Stefan]

Hello, Jatin,

There are some examples in the thread showing how this can be done.

Is it possible to share more detail on the requirement in order to provide more to the point suggestions?

Regards,
Stefan
Progress Telerik