Disable some fields based on conditions while doing inline edit in kendo grid.

2 Answers 1054 Views
Editor General Discussions Grid
Vaibhav
Top achievements
Rank 1
Veteran
Vaibhav asked on 27 May 2021, 04:59 AM

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
Top achievements
Rank 1
Veteran
commented on 03 Jun 2021, 05:47 AM | edited

.

2 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 27 May 2021, 08:41 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Vaibhav
Top achievements
Rank 1
Veteran
commented on 03 Jun 2021, 08:58 AM

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. -
0
Dimiter Topalov
Telerik team
answered on 07 Jun 2021, 07:54 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Daiki
Top achievements
Rank 1
commented on 15 Jun 2022, 07:47 AM

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
Telerik team
commented on 20 Jun 2022, 07:03 AM

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
Top achievements
Rank 1
commented on 21 Jun 2022, 05:59 AM

Thanks Martin. it indeed helps
Tags
Editor General Discussions Grid
Asked by
Vaibhav
Top achievements
Rank 1
Veteran
Answers by
Dimiter Topalov
Telerik team
Share this question
or