Edit Records Using External Forms With Editable Grid

15 posts, 0 answers
  1. evyatar
    evyatar avatar
    8 posts
    Member since:
    Nov 2017

    Posted 26 Nov 2017 Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 28 Nov 2017 Link to this post

    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.
  3. evyatar
    evyatar avatar
    8 posts
    Member since:
    Nov 2017

    Posted 04 Dec 2017 Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 06 Dec 2017 Link to this post

    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.
  5. evyatar
    evyatar avatar
    8 posts
    Member since:
    Nov 2017

    Posted 06 Dec 2017 in reply to Stefan Link to this post

    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

  6. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 08 Dec 2017 Link to this post

    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
    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.
  7. evyatar
    evyatar avatar
    8 posts
    Member since:
    Nov 2017

    Posted 10 Dec 2017 Link to this post


    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 
  8. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 12 Dec 2017 Link to this post

    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.
  9. evyatar
    evyatar avatar
    8 posts
    Member since:
    Nov 2017

    Posted 12 Dec 2017 in reply to Stefan Link to this post

    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.

  10. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 14 Dec 2017 Link to this post

    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.
  11. evyatar
    evyatar avatar
    8 posts
    Member since:
    Nov 2017

    Posted 14 Dec 2017 in reply to Stefan Link to this post

    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

     

  12. bhavin
    bhavin avatar
    23 posts
    Member since:
    Aug 2018

    Posted 09 Oct 2018 Link to this post

    Is there something similar for the Kendo Angular Grid?
  13. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 11 Oct 2018 Link to this post

    Hi Bhavin,

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

    Best Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  14. bhavin
    bhavin avatar
    23 posts
    Member since:
    Aug 2018

    Posted 11 Oct 2018 in reply to Konstantin Dikov Link to this post

    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
  15. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 15 Oct 2018 Link to this post

    Hi,

    The "Remote binding" section is using HttpClientModule:

    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top