Disable some fields based on conditions using inline editable Grid.

[Vaibhav]

We have implemented the inline edit functionalities in the Kendo Grid and we want to add some more functions such as :

we want to disable and enable some fields in inline edit based on specific conditions. How can we do that?

We are not getting any proper solution for that. So, please can you help us to implement this functionality?

Thank You.

[Vaibhav]

.

[Dimiter Topalov]

Hello Vaibhav,

There are several viable approaches for controlling the editable state of a column/cell:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/prevent-editing/

In the particular scenario, the most suitable approach seems to create a FormControl for the desired fields conditionally, based on the value of other field(s) or other custom conditional logic, e.g.:

public createFormGroup(args: any): FormGroup {
        const item = args.isNew ? new Product() : args.dataItem;

        this.formGroup = this.formBuilder.group({
            'ProductID': item.ProductID,
            'ProductName': [item.ProductName, Validators.required],
            'UnitsInStock': [item.UnitsInStock, Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])],
            'Discontinued': item.Discontinued
        });

        if (!item.Discontinued) {
          this.formGroup.addControl('UnitPrice', new FormControl(item.UnitPrice));
        }

        return this.formGroup;
    }

https://stackblitz.com/edit/angular-jdr1s9-a2fuzb?file=app/app.component.ts

In the example above when an item is Discontinued, its UnitPrice field becomes non-editable. Same approach can be applied in the discussed use case - when creating the form group for the respective Grid row, check the current value of the other field(s) of the data item, and depending on the value and/or any other necessary custom logic, conditionally add the form controls for the fields that need to be editable or readonly conditionally, to the Form Group.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Vaibhav]

We are facing issue while performing inline edit whole row.

example:-
kendo grid contains one keys -> isTest , width and height.
if isTest value is false
we need to disable the column height and width in kendo grid while performing inline edit. -

[Dimiter Topalov]

Hi Vaibhav,

The approach for disabling and/or toggling the state of some form control based on the value of another form control in the same form group is similar when inline editing (as opposed to incell editing) is used.

The major difference between the two scenarios is that the FormGroup is created anew each time a cell goes in editing mode when incell editing is used, and only once for the whole row when inline editing is used.

One of the possible adjustments to achieve the desired behavior is to subscribe to the respective boolean form control valueChanges Observable, and enable/disable the other two form controls depending on the value of the boolean form field, e.g.:

https://stackblitz.com/edit/angular-h4bgwq?file=app/app.component.ts

Note that in this example, we are using the getRawValue() method of the form group so that the values for the disabled controls are included too.

If the boolean (isTest) field itself is not editable, the solution will be even more straight-forward - check the value of the data item "isTest" property when creating the form, and do not create controls for the other two fields (width and height) for the items with respective "isTest" value, for example:

https://stackblitz.com/edit/angular-a5etx8?file=app/app.component.ts

In the example above, form controls for UnitPrice and UnitsInStock are created only for data items that are not discontinued (Discontinued: false).

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Daiki]

Hi Dimiter Topalov,

Please help to explain the approach for disabling and/or toggling a column state based on another column's value in template driven design inline row editing 

 

Thanks in advance  

 

[Martin]

Hi Daiki,

The approach when using a Template-Driven form is similar to the one suggested by Dimiter Topalov.

The developer needs to listen for form changes first, which could be accomplished in two ways:

• handling the ngModelChange event.
• get the reference of the whole form (using ViewChild) - for more details please check this StackOverflow thread.

Then disabling fields based on a certain value is the same as in the Reactive Form approach.

@ViewChild('myForm', { static: true }) public myForm: NgForm;

public ngOnInit(): void {
     ...
    this.formChangesSubscription = this.myForm.form.valueChanges.subscribe(
      (dataModel) => {
        const isCheck = dataModel.Discontinued;
        const priceField = this.myForm.form.controls['UnitPrice'];
        const stockField = this.myForm.form.controls['UnitsInStock'];

        if (isCheck) {
          priceField.disable();
          stockField.disable();
        } else {
          priceField.enable();
          stockField.enable();
        }
      }
    );
  }

I hope this helps.

[Daiki]

Thanks Martin. it indeed helps