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

Required attribute fails on first column

8 Answers 223 Views

Grid

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

Henrik asked on 29 Nov 2016, 02:54 PM

aftersave1.png

aftersave2.png

grid.zip

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

8 Answers, 1 is accepted

answered on 02 Dec 2016, 08:19 AM

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

answered on 15 Dec 2016, 07:43 AM

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 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.

answered on 15 Dec 2016, 08:58 AM

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

answered on 16 Dec 2016, 07:36 AM

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

Accepted

answered on 16 Dec 2016, 10:05 AM

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.