jQuery Validate Required Column

[Malcolm van Staden]

We are making use of the grid to capture records.

Here is the jsplayground for it:

https://jsplayground.syncfusion.com/y1tikwxv

If you click + to add a record, then select active ingredient, then select supplier - then click on SAVE - the supplier is still required even though it has been selected. Why is this?

[Farveen Sulthana Thameeztheen Basha]

Hi Malcolm, 

Thanks for contacting Syncfusion Support. 

Query#:- If you click + to add a record, then select active ingredient, then select supplier - then click on SAVE - the supplier is still required even though it has been selected. Why is this? 

 

We can reproduce your reported problem at our end and the issue occurs due to special characters given in the Field Name as well as Grid id. We have rendered the input element of the form based on the column’s FieldName. In our source, we have get the  input element based on the Id. When the id contain special character, we couldn’t get the input element while on traversing which is the jquery behavior. We used JsRender to render the Grid and helper function in which we couldn’t perform jquery operations using special characters 

 

We have already discussed about this topic in our knowledge base document. Please refer the following link to our kb,  

https://www.syncfusion.com/kb/4265/why-do-not-use-special-characters-in-grid-id 

Refer to the modified sample Link:- 

https://jsplayground.syncfusion.com/hqkrlcun 

To overcome this we suggest you to avoid special characters on FieldName as well as Grid id. 

Regards, 

Farveen sulthana T 

[Malcolm van Staden]

Hi,

Thank you for that information, however based on the KB link, an underscore is a valid character. Why is it necessary to not use the underscore _ ? The field active_ingredient_id doesn't appear to suffer from the same problem either?

[Farveen Sulthana Thameeztheen Basha]

Hi Malcolm, 

The same problem occurs for active_ingredient_id when we  provide empty dataSource for the column on columns property on rendering. As per previous update When the id of the fieldname contain special character, we couldn’t get the input element while on traversing which is the jquery behavior. We have rendered the Grid using jquery we couldn’t perform operations as per we expect while using special characters. 

So we suggest you to avoid specialCharacters for the fieldname to resolve the problem. 

Regards, 

Farveen sulthana T 

[Malcolm van Staden]

Hi,

I'm having difficulty understanding what is or isn't special characters.

From the KB article:

Hence we must use only valid JavaScript name characters (a-z, A-Z, 0-9, _, $) as a grid id

_ is listed as a valid JavaScript character name. Where does it state that the underscore is a special character?

[Farveen Sulthana Thameeztheen Basha]

Hi Malcolm, 

We are very sorry for the previous updates. 

Further analyzing it was not relates to Jquery problem. When we define ForeignKey column by default it will render the column with dropdownList. When we re-render the dropdownList it will leads to conflict and validation not occurred properly for that column which is the cause of the issue.  

In order to avoid this problem we suggest you to destroy the dropdownList and render the dropdownList with dataSource  as like below code example:- 

<script type='text/javascript'> 

jQuery(function ($) { 

    $('#active_ingredients_grid').ejGrid({ 

      dataSource: [], 

    columns : [ 

          { field: "id", visible: false, isPrimaryKey: true }, 

       

    ], 

     

      actionComplete : function complete(args){ 

        if (args.requestType === 'save'){ 

        }        

        if (args.requestType === 'add' || args.requestType === 'beginedit') { 

            $('#active_ingredients_gridactive_ingredient_id').ejDropDownList({ select: function(args){ 

              $('#active_ingredients_grid').ejWaitingPopup('show'); 

                .       .       . 

                $('#active_ingredients_gridsupplier_id').ejDropDownList('destroy'); 

               $('#active_ingredients_gridsupplier_id').ejDropDownList({  

                 dataSource : items, 

                   width:'100%', 

                fields: { text: 'name', value: 'value' } 

              }); 

                 

              $('#active_ingredients_grid').ejWaitingPopup('hide'); 

            } 

            }); 

        } 

      }      

    }); 

  });     

     

  </script> 

Modified sample Link:- https://jsplayground.syncfusion.com/2nvpffor 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T