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

Enable disable the fields/controls in React Kendo Grid

12 Answers 1777 Views

General Discussions

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

12 Answers, 1 is accepted

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

answered on 23 Oct 2018, 07:08 PM

grid-1.png

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

answered on 25 Oct 2018, 09:10 PM

grid-dropdown.png

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

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