ejGrid: DropDownList edit type with required validation rule

[Robert Mims]

I've observed that defining a drop down with a datasource that does not contain an empty id field will not validate appropriately.

For example:

  { 
    field:'personId',
    headerText:'Person',
    dataSource: $root.currentUser().personnelDisplay(),
    foreignKeyField: 'id',
    foreignKeyValue: 'label',
    type: 'guid',
    editParams: { watermarkText: 'Select an item...' },
    editType: ej.Grid.EditingType.Dropdown,
    validationRules: { required: true }
},

Will not fire the column validation without the dataSource containing an item with id empty, null or undefined.

Is there an existing way to accommodate this requirement?

If not, it would be ideal if when validationRules-> Required is specified and a watermark provided, if the cell editor included it without developers having to modify their source collections to accommodate this limitation.

Robert

[Thavasianand Sankaranarayanan]

Hi Robert, 

Thanks for contacting Syncfusion support. 

In default, while adding a record in a Grid if that column validation rule set as required true then while saving that record, it will show an validation message to enter any value in that column. 

For editing a record, it will show the cell value in the dropdown list for the edit type as dropdown. 

Refer the help documentation. 

Link: https://help.syncfusion.com/js/grid/editing#column-validation 

Before proceeding to your query we need some clarification. 

1. Share the exact scenario that you want to throw an validation message.
2. Screen shot or video demonstration of an issue.
3. Share the Grid code example.
4. Share the details, if you facing any issues regarding this scenario.
5. Essential studio version.

Regards, 

Thavasianand S. 

[Robert Mims]

Here is what I observed.

With the column using the drop down edit type, a validation rule of required and a data source without an empty value, a row could be committed without making a selection.

This was because the jQuery validate implementation for a select uses .val() on the element. In the case of the ejDropDownList, this returned the first value from the list, though the getSelectedValue method of the instance showed that there was no selection (as did the hidden input element for the column/cell.

To workaround this issue, I created a custom jQuery Validation rule to adapt to the ejDropDownList behavior (I had a release deadline and had not received feedback - needed to push forward.)

Here is the custom rule to remedy this issue (where the app.resources is a collection of localized strings from the host web API):

Robert

[Thavasianand Sankaranarayanan]

Hi Robert, 

In this we suspect that you have editType as dropdown for an field. In that if we add a record the dropdown field will have an empty value and while saving without selecting a value in dropdown it saves with the first value of an dropdown instead of throwing a validation message.  

We checked in our sample and we are unable to reproduce the reported issue at our end. 

We have prepared a video demonstration of not reproduction of an issue. 

Video link: http://www.syncfusion.com/downloads/support/forum/131053/ze/dropdown317288766.zip 

Note: If you set a validation to column then you need to refer the “jquery.validate.min.js” file for validation in Grid.  

You can get this file from the following location 

Location: C:\Program Files (x86)\Syncfusion\Essential Studio\xx.xx.xx.xx\JavaScript\assets\external 

We have prepared a simple JsPlayground sample in the following link. 

JsPlayground link: http://jsplayground.syncfusion.com/fjry5l0p 

Refer the help documentation. 

Link: https://help.syncfusion.com/js/grid/editing#column-validation 

If you still face the same issue then provide the following details for better assistance. 

1. Share screen shot or video demonstration of an issue.
2. Share the Grid code example.
3. Essential Studio version.
4. If possible share the sample or reproduce the issue in the attached sample.

Regards, 

Thavasianand S.