Edit Records Using External Forms With Editable Grid

[evyatar]

I am trying to make code sample of editable grid with external form.

I followed the the documents at https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/grid-external-form-editing.

I added the property editable:true to the grid and added custom validation for both the grid and the form on the field "ProductName".

The validation rule is that only input which is not "wrongInput" is valid.

I want to change the behavior that in case that the user enter invalid input in the grid then the grid will stay in the same row until a valid input is entered.

Secondly I if the user go to the form and fix the the field there then the corresponding field in the grid will be updated with the correct value.

This is the link to the code https://dojo.telerik.com/anopA

 

Thanks,

Evyatar

[Stefan]

Hello, Evyatar,

Thank you for the provided details.

In the current scenario, I can suggest keeping the validation in the form only as the Grid validation will be triggered on blur of the input. In cases when an external edit for is used, the Grid input is not visible, as the actual input is not rendered when the Grid is in view mode. The will be removed when the Grid cell loses focus which will occur once the form is clicked.

If the external validation is called, this will still prevent the item from saving with the validation message:

https://dojo.telerik.com/anopA/2

Regards,
Stefan
Progress Telerik

[evyatar]

Hi Stefan,

Thank you for your response.

I removed the validation from the grid.
Now when i edit the "ProductName" grid cell with the wrong "wrongInput" value,
a blur event occured and the validation operates on the form on the same "ProductName" field.
I also need that if I enter "wrongInput" value on the "ProductName" name on the grid ,
the user cannot switch to a diffirent row on the grid , until he fix the wrong input value.

For example: If the user inserts on the "ProductName" field on the grid on line 5 the following value : "wrongInput",
I want that the user will stay on the same line and would be able to switch to a different line, and the form will also present only line 5 until the user changes the input. In addition if I will be able to stay on the same line in case of validation error , I want that if I currently editing the field "Unit Price" , and I press on some different row , I will come back to the row with validation error to the same "Unit Price" field . 

link : http://dojo.telerik.com/uFuFO

[Stefan]

Hello, Evyatar,

The validation in the Grid should be removed only if the Grid is not used for editing. In general, the external form is recommended in a scenario where the Grid editing will not be done via the Grid interface, but it will be done only via the form.  This is the main reason the Grid in the how-to example is not set as editable. They could both be editable but in that case, the validation should be handled twice and could create strange user experience as the validation error could be shown on different inputs.

Could you please advise the scenario where the external form has to be used and the Grid should be editable as well?

Regards,
Stefan
Progress Telerik

[evyatar]

In case where only few fields are mandatory and the optional fields are seldom used then it is more convenient to put the mandatory fields in the grid and all of the fields in the form and make them editable.

Thanks,
Evyatar

[Stefan]

Hello, Evyatar,

In this case, I can suggest the following approach.

Leave only the validation in the Grid for the mandatory fields in the Grid and in the external form show only the non-mandatory fields for that row.

This will ensure that the validation is only at one place and will separate the logic for the required and non-required fields.

Regards,
Stefan
Progress Telerik

[evyatar]

Hi Stefan,

thanks for your response.

For my needs,the grid and form should contain the same mandatory and non-mandatory fields.
On the following example, I added a new field: "QuantityPerUnit" which is a combo box field ,
containing the following values : ['boxes','bottles','cases'] .
I added validation rule on that field which invokes once the user enter wrong value (
    wrong value => a value that is not belong to ['boxes','bottles','cases']
).
If a validation error invokes (from any field) , I want that the user would not be able
switch to a different row on the grid , until he fixes the validation error. 


For example: 
A user is on line 3 on the grid and he enters a wrong input value on the "QuantityPerUnit"
field, a validation error invokes on the form , and I want that the user will not be able to switch 
to a different row on the grid , until he fixes the input.
Moreover, the form will display the same row (line 3) , until the user fixes the validation issue,
and the user won't be able to display different lines on form, until the user fixes the 
validation issue.

** attached code : http://dojo.telerik.com/UFUkaB 

[Stefan]

Hello, Evyatar,

Thank you for the provided additional details and the example.

In this scenario, I can suggest to programmatically set the Kendo UI progress loading overlay as this will make the Grid as disabled if the validation does do pass. Once the user selected as valid value the loading overlay will be removed and the user can click on the Grid again:

https://docs.telerik.com/kendo-ui/api/javascript/ui/ui#methods-progress

quantityvalidation: function(input) {

  if (input[0].name == 'QuantityPerUnit'){

    var comboBoxValuesArr = viewModel.get("quantityPerUnitDataSource").options.data;
    var currVal = input.val();
    if (currVal == ''){
      kendo.ui.progress($("#grid"), false);
      return true;
    }
    for (var i=0;i<comboBoxValuesArr.length;i++){
      if (comboBoxValuesArr[i].Id == currVal){
        kendo.ui.progress($("#grid"), false);
        return true;
      }
    }
    kendo.ui.progress($("#grid"), true);
    $('.k-loading-image').hide()
    return false;
  }
  return true;
}

http://dojo.telerik.com/UFUkaB/2

I hope this will help to achieve the desired end result.

Regards,
Stefan
Progress Telerik

[evyatar]

Hi Stefan,

thanks for your response.

The solution that you adviced to me is partly suits to me.
According to my needs, I need that the user can edit the same line on the
grid which invoke the validation error, but the other lines on the grid should be locked.
Is there any way to lock all the lines on the grid , beside the current line with the validation error.
In your example , in case of validation error I can't edit the line on that grid, but for my needs
I want to be able to edit that line on the grid.

I'm currently try to work with your solution and once the all grid is blocked,
I want to inject an html to the specific field with the validation error , and by that I wish 
to be able to change the current cell with the validation error, while all the grid beside that cell will be
locked.

For example:
If the user changes the field "QuantityPerUnit" on the grid in line 4 , I want that all the 
lines on the grid will be blocked , beside the specific field , or all line 4 will be unblocked.  

Thanks,
Evyatar.

[Stefan]

Hello, Evyatar,

Thank you for sharing the additional details.

For now, the Grid does support the option to disable only all rows. Disabling all of the rows except the current one may be possible to achieve, but it will require a large portion of custom logic to programmatically disable all rows except the current one.

I can suggest submitting a feature request for the desired functionality as it could be useful when editing the Grid. Then based on its popularity we may implement it in a future release:

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback


Regards,
Stefan
Progress Telerik

[evyatar]

Hi Stefan,

Thanks for all your support in that issue.
I come to a progress since our latest discussion and I want to share it with you and the  community.
I found that the css class that controls the blocking of the grid is the ‘k-loading-mask’ and with some css
manipulation I was able to block all the lines excepts the first upon entering value that cause validation error on the first line of the grid.

I included my code :

https://dojo.telerik.com/OnACOw

 

[bhavin]

Is there something similar for the Kendo Angular Grid?

[Konstantin Dikov]

Hi Bhavin,

You could take a look at the following demo for external edit form for Kendo UI for Angular:

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

Best Regards,
Konstantin Dikov
Progress Telerik

[bhavin]

Yes, I already looked at that however you are using the old way (HTTP of Angular 4) rather than HttpClientModule for data fetching. Looking if you guys updated it

[Konstantin Dikov]

Hi,

The "Remote binding" section is using HttpClientModule:

• https://www.telerik.com/kendo-angular-ui/components/menus/menu/data-binding/#toc-binding-to-remote-data

Regards,
Konstantin Dikov
Progress Telerik