New UI - Required Picklist field issue after moving it in the DOM - Forum - Rollbase - Progress Community

New UI - Required Picklist field issue after moving it in the DOM

 Forum

New UI - Required Picklist field issue after moving it in the DOM

This question is answered

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

Verified Answer
  • 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);

    Regards,
    Siraj.
All Replies
  • Hello,

    Any update on this please?

    Thanks

    Meryem

  • Could you provide a sample app?
     
    Thanks, Thierry.
     
  • 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


  • Hi,

    Have you had any chance to try this code please?

    Thank you

    Meryem

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

    Regards,
    Siraj.
  • M Sample App_v2.xml

    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

  • 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);

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

    Meryem