New UI - Required Picklist field issue after moving it in th

Posted by Meryk on 20-Oct-2015 06:11

Hello,

I am having an issue with required picklist fields.

Actually, I am moving the entire row of the picklist field (rbi_L_myField and rbi_F_myField) to another position in the Dom, by using append().

So I am getting the selected div above "rbs-simpleField-boxLayout" and doing myElement.append("rbs-simpleField-boxLayout");

where myElement is a div with the class : "col-xs-12 col-sm-6 col-md-6 col-lg-4".

So the picklist is copied properly and the values are there, but if I try to save a record without setting this picklist value, it will be set automatically to the first option in the combobox, and won't display any error message, which is not a normal behavior, as it is a required field and the error message should be displayed when field is empty.

Why is appending or moving the picklist producing this behavior ? The DOM structure of this row (label + field) is exactly the same before and after appending.

Any ideas ?

Thank you

Meryem

Posted by Mohammed Siraj on 29-Oct-2015 10:02

Am able to reproduce the issue. Seems like a Chrome issue. Does not occur on Firefox.

After moving DOM element, on querying field value it returns first option. Eventhough UI is not upated.

As a workaround, you can reset the field value to null. As this is New Object page, that should not be a concern.

Got the expected behavior by adding this statement at at the end of document ready function i.e. after moving DOM elements,

rbf_setFieldValue('mPicklist',null);

All Replies

Posted by Meryk on 21-Oct-2015 05:31

Hello,

Any update on this please?

Thanks

Meryem

Posted by Thierry Ciot on 22-Oct-2015 09:48
Could you provide a sample app?
 
Thanks, Thierry.
 
Posted by Meryk on 23-Oct-2015 03:28

Hello,

Here is the piece of code that I am running on a given page :

var sectionId = "rbi_S_12345";
		var rows = $('section[id="' + sectionId.toString() + '"] > div');
		var l = rows.children().length;
        
		// First Column handling
		var firstRowFirstCol = rows.children().eq(0).children().eq(0);
		for (var i = 1; i < l; i++) {				
			var nextRowFirstCol = rows.children().eq(i).children().eq(0).children();
			firstRowFirstCol.append(nextRowFirstCol);
		   		
		}


Basically, I am moving rows and appending them to the first row to make the column responsive.

When I remove this code, the issue disappears. as soon as I allow this code, the required picklists are no more checked before saving. That is why I was thinking it has something to do with the append I am doing in the last line.

If you just try this code, you must see the issue very quickly.

Thank you
Meryem


Posted by Meryk on 28-Oct-2015 04:00

Hi,

Have you had any chance to try this code please?

Thank you

Meryem

Posted by Mohammed Siraj on 28-Oct-2015 10:42

Did not get your code to work, however, wrote my own script to collect all fields as children of first row’s div.col element.

Validation worked as expected.

The only case where I was able to reproduce the issue was when we move the elements such that they are no longer descendant of the form element.

Kendo validator is attached to the form element. And will validate only those elements that come under the purview of the form.

Also, going forward please share a sample app for such scripting issues. This will get us quickly started in troubleshooting the root cause. You need not share you actual App xml but instead create any sample highlighting the issue on hand.

Posted by Meryk on 29-Oct-2015 05:42

Hi,

Here is a sample App of what I am trying to explain. (M Sample App_v2.xml attached in here).

I have only one objcet "M Object", and a required picklist "M picklist".

Please try creating a new record without selecting a value in the picklist and you will see that it is allowing the save and setting the picklist field to its first value.

I have the same code in New/Edit/View pages. But the issue comes from the New page, as this is where the behavior occurs.

Can you have a look please?

Thank you

Meryem

Posted by Mohammed Siraj on 29-Oct-2015 10:02

Am able to reproduce the issue. Seems like a Chrome issue. Does not occur on Firefox.

After moving DOM element, on querying field value it returns first option. Eventhough UI is not upated.

As a workaround, you can reset the field value to null. As this is New Object page, that should not be a concern.

Got the expected behavior by adding this statement at at the end of document ready function i.e. after moving DOM elements,

rbf_setFieldValue('mPicklist',null);

Posted by Meryk on 30-Oct-2015 12:02

Thanks Siraj, your solution is working fine. But is this a Chrome bug ?

Meryem

This thread is closed