This is a migrated thread and some comments may be shown as answers.

Enable disable the fields/controls in React Kendo Grid

12 Answers 399 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Parag
Top achievements
Rank 1
Parag asked on 19 Oct 2018, 07:30 PM
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

12 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 22 Oct 2018, 08:24 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Parag
Top achievements
Rank 1
answered on 23 Oct 2018, 07:08 PM

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
        });
     }

0
Stefan
Telerik team
answered on 24 Oct 2018, 08:13 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Parag
Top achievements
Rank 1
answered on 24 Oct 2018, 04:11 PM
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.
0
Stefan
Telerik team
answered on 25 Oct 2018, 11:35 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Parag
Top achievements
Rank 1
answered on 25 Oct 2018, 02:34 PM

Hi Stefan,

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

Regards,

Parag

 

 

0
Parag
Top achievements
Rank 1
answered on 25 Oct 2018, 09:10 PM

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
});
}

0
Stefan
Telerik team
answered on 26 Oct 2018, 06:43 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Parag
Top achievements
Rank 1
answered on 30 Oct 2018, 01:41 AM

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?   

0
Stefan
Telerik team
answered on 30 Oct 2018, 09:31 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jatin
Top achievements
Rank 1
answered on 06 Jul 2020, 01:45 PM

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

0
Stefan
Telerik team
answered on 07 Jul 2020, 04:45 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
General Discussions
Asked by
Parag
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Parag
Top achievements
Rank 1
Jatin
Top achievements
Rank 1
Share this question
or