Required attribute fails on first column

9 posts, 1 answers
  1. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 29 Nov 2016 Link to this post

    Hi,

    I have a grid with several foreign key columns and an Add-button in the toolbar.

    If I try to add a new record without selecting anything I get the validation error messages for all columns except the first one. This column gets the first selectable value in the list of options for the drop-down. See AfterSave1.png.

    If I change the order of the first and the second column in the grid I get the selected value on the column called "Column2" and the validation error messages on the other columns (AfterSave2.png), so it seems as if the first column of the grid gets this behaviour.

    I would of course like to see the validation error message for all columns. Am I doing something wrong?

    The drop-down lists are loaded from Guid-text value pairs loaded in the ViewBag.

    Best regards,

    Henrik

  2. Stefan
    Admin
    Stefan avatar
    2205 posts

    Posted 01 Dec 2016 Link to this post

    Hello Henrik,

    This is expected behaviour because the column that has a default value is meeting the requirements for the validation and that is why the validation message is not shown.

    From the provided screenshots I noticed that the column positions are changed but still the column on position one does have a default value.

    Please remove the default value of the column and check if the validation message will be displayed.

    Regards,
    Stefan
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  3. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 02 Dec 2016 in reply to Stefan Link to this post

    Hello Stefan,

    Thanks for your response. I still think something fishy is going on, the columns in the grid are specified in exactly the same way, only their position in the grid makes them behave differently. Removing the default value makes no difference.

    If I put a bound column to the left in the grid all columns shows the validation message, as I expect them to do. I don't think that the position in the grid should make any difference in how a foreing key column is behaving.

    I have made a runnable project that demonstrates this, but when I attach the zip-file (95 470 kB) and post the reply I get  time-out error. Is there another way I can send you the project zip?

     

    Best regards,

    Henrik

  4. Stefan
    Admin
    Stefan avatar
    2205 posts

    Posted 06 Dec 2016 Link to this post

    Hello Henrik,

    Please check our article for sending an isolated project:

    http://www.telerik.com/blogs/isolating-a-problem-in-a-sample-project

    Also, I can suggest to either use a file sharing platform to upload the file and share the link with us or to separate the archive and send it in separate replies as the maximum size is limited to 20MB.

    I will be expecting the project to continue the investigation.

    Regards,
    Stefan
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  5. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 13 Dec 2016 in reply to Stefan Link to this post

    Hi Stefan,

    I have tried to upload the sample project which I have pared down to 17 MB, but when uploding I get this message:

    The selected file(s) cannot be attached because it may exceed the maximum attachment size (2 MB) or is from not allowed type (allowed: .jpg, .jpeg, .gif, .png, .zip).

    I have tried to upload the file on dropbox and shared it with clientservice@telerik.com, I hope this will work better.

    Best regards,

    Henrik

  6. Stefan
    Admin
    Stefan avatar
    2205 posts

    Posted 15 Dec 2016 Link to this post

    Hello Henrik,

    Thank you for providing the runnable example.

    After inspecting it, I found what is causing the undesired effect.

    When a new item is added the Grid is focusing by default the first column. Then when the update button is clicked the DropDown is blurred and the first value is automatically set and because the column already has a value the validation is not thrown. This is happening only for the column on position one because by default we always focus the first column.

    In this scenario, I can suggest adding an option label to the DropDowns to prevent selecting the first record automatically on blur:

    Html.Kendo().DropDownListFor(m => m)
     .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
     .ValuePrimitive(true)
     .OptionLabel("Select value...")
    )

    I hope this will help resolving the issue.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 15 Dec 2016 Link to this post

    Hello Stefan,

    Thanks for taking the time to look into this. Unfortunately this does not fully solve the problem since the fact that a value is selected by the frist column drop-down means that there will be a valid value since this is a Guid (even if it is Guid.empty) the required attribute conditions are met and there is still no validation error message. I will have to add more validation to ensure that the selected value is not an empty guid.

    To me it is a drawback that not all columns behave the same way, do you think this could be improved in future versions?

    Thank you for clarifying the problem, you can close this issue.

    Best regards,

    Henrik

  8. Henrik
    Henrik avatar
    38 posts
    Member since:
    Nov 2015

    Posted 16 Dec 2016 Link to this post

    Hello again,

    Just in case anyone finds this useful, sleeping on the problem gave med the solution:

    Make the view model property used tor the data field value nullable (in my case a nullable Guid)

    Add a default value to the list of values for the drop down (Id = null, Text = "")

    Then when the grid focuses the first column and selects the default value the Id will be null and the required property of the PageViewModel will fire. Like this:

    The view model for the page:

        public class PageViewModel
        {
            public Guid Id { get; set; }
            [Required(ErrorMessage = "Select")]
            public Guid? Column1Id { get; set; }
            public string Column1Text { get; set; }
        }
    The view model for the columns:

        public class Column1ViewModel
        {
            public Guid? Id { get; set; }
            public string Text { get; set; }
        }
    In the controller:

                List<Column1ViewModel> col1 = new List<Column1ViewModel>();
                col1.Add(new Column1ViewModel { Text = "" }); // Note that the Id property will be null
                col1.Add(new Column1ViewModel { Id = Guid.NewGuid(), Text = "A" });
    ...
                ViewBag.Column1Content = col1;

    In the grid in the view:

                  columns.ForeignKey(m => m.Column1Id, (IEnumerable)ViewBag.Column1Content, "Id", "Text").Title("Column 1");

    Regards,

    Henrik

  9. Answer
    Stefan
    Admin
    Stefan avatar
    2205 posts

    Posted 16 Dec 2016 Link to this post

    Hello Henrik,

    Thank you for sharing this with the Kendo UI community. We greatly appreciate it.
     
    As for changing the behaviour in the future, currently, we do not plan it, as there are many users who may relay on focusing the first cell and changing it may lead to a breaking change.

    Still, based on the user feedback and suggestions, we may implement a property to disable or enable the automatic focus:

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

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top