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

Edit Records Using External Forms With Editable Grid

14 Answers 511 Views

Grid

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

evyatar asked on 26 Nov 2017, 09:43 AM

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

14 Answers, 1 is accepted

answered on 28 Nov 2017, 09:32 AM

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

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.

answered on 04 Dec 2017, 04:39 PM

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

answered on 06 Dec 2017, 09:50 AM

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

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.

answered on 10 Dec 2017, 03:27 PM

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

answered on 12 Dec 2017, 09:46 AM

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

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.

answered on 12 Dec 2017, 03:41 PM

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.

answered on 14 Dec 2017, 07:50 AM

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

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.