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

Grid Validation - Dependent on another column

4 Answers 250 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 09 Jul 2018, 08:11 PM

I have a Kendo grid that has 15 editable columns and I am currently using inline editing.  I also have a comments column that is only required if one of the other columns has changed its value.  How do I manage that with custom validation?  

In the example below, I am able to click into the row to begin editing.  However I only require the Comments field to be required if ColA,ColB,ColC are edited.I can see that the row has been changed by tying into the hasChanges of the dataSource on the grid, but how do I force the required attribute to be applied to the Comments field?

ColA    ColB    ColC    Comment
0           0         0 

 

                    var grid = $('#grid').data('kendoGrid');
                    var selectedRow = grid.dataItem('tr.k-grid-edit-row');
                    if (grid.dataSource.hasChanges()) {
                        debugger;
                        alert("there are changes");
                    }

4 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 09 Jul 2018, 08:46 PM

I think I have it.

In the code above, you can access the value of the Comments from the selectedRow then validate there by checking the dirty flag in the row.

 

var selectedRow = grid.dataItem('tr.k-grid-edit-row');

0
Eyup
Telerik team
answered on 12 Jul 2018, 05:36 AM
Hello Michael,

I'm glad you've managed to find a solution to your specific scenario.
From user perspective, you can also opt for the comments column input to be disabled by default and when the user changes one of the other field values, you can access and enable it.

Regards,
Eyup
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Michael
Top achievements
Rank 1
answered on 16 Jul 2018, 12:08 PM
Do you have a sample of similar functionality?  I kind of like your idea of making the field disabled by default then making it required when the user changes one of the other fields.
0
Eyup
Telerik team
answered on 19 Jul 2018, 11:44 AM
Hello Michael,

You can find a similar sample here:
https://dojo.telerik.com/IduYIdUM/5

It uses the following steps:

1. Define a column editor/s to configure the structure of the editing:
https://demos.telerik.com/aspnet-core/grid/editing-custom

2. Use the change event handler of the combo to capture the selection moment:
https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/events/change

3. Access the picker accordingly and hide it depending on the chosen option. You can also choose to disable or make it readonly instead of hiding:
https://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker/methods/enable

Regards,
Eyup
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or