Cannot get Value from Rule Object in input of Filter, when loading pre-defined rules.

The Problem:

Accessing the value in the Rule Object always returns undefined. In console.log(rule) , it can be seen that the value property of the rule object has a value. Tried to access it by rule.value and rule["value"]. Both yielding undefined always

jsFiddle : Link

Larger Picture

I am able to show, custom operators, and show the input field as select dropdown or number input according to the operator selected. Its just that when loading pre-defined rules, not able to access value.

Solutions to be achieved

I have custom Code to Deal with Comparing 2 fields of Database. On selecting a specific type of operations , ie the once in FieldsOps group and name ending with an _ , the input would be a dropdown. And also pre populating the values and display the either input box or select.

Effort So Far

1. Added a new optgroup named FieldOps and made sure all the operators are named the same but just appended with underscore. So, less will becore less_ in the FieldOps optgroup. And set appropriate apply_to. This works perfectly.

{ type: "less_", optgroup: "FieldsOps", nb_inputs: 1, apply_to: [ "number" ] },
{ type: "less_or_equal_", optgroup: "FieldsOps", nb_inputs: 1, apply_to: [ "number" ] },
{ type: "equal_", optgroup: "FieldsOps", nb_inputs: 1, apply_to: [ "number", "string" ] },
{ type: "not_equal_", optgroup: "FieldsOps", nb_inputs: 1, apply_to: [ "number", "string" ] },
{ type: "greater_", optgroup: "FieldsOps", nb_inputs: 1, apply_to: [ "number" ] },
{ type: "greater_or_equal_", optgroup: "FieldsOps", nb_inputs: 1, apply_to: [ "number" ] },

2. In the filters --> input ,

{
	id: "3MS1",
	label: "3M Sales S1",
	type: "integer",
	input: function ( rule, name ) {
		return input_creator_fieldComparison( rule, name );
	},
	valueGetter: function ( rule ) {
		return valueGatter_fieldComparison( rule );
	},
},

3. Definition of valueGetter and input functions in the filters.

function input_creator_fieldComparison( rule, name ) {

	 let value = rule.value;
	let myOptGroup = rule.operator.optgroup;
	let show_select = ( myOptGroup == "FieldsOps" );
	let show_text = !show_select;
	let htmlOut = "<select name = \"" + name + "_1\" class = \"form-control value-select\"" + ( show_text ? " style = \"display: none;\"" : "" ) + " onchange=\"data_from_select(this)\"" + ">";
	htmlOut += getComparableCoumnsDropDownOptions(selectedOption);
	htmlOut += "</select>";
	htmlOut += "<input name = \"" + name + "_2\" class = \"form-control value-text\" type = \"text\"" + ( show_select ? " style=\"display: none;\"" : "" ) + "onchange=\"data_from_text(this)\" onkeyup=\"data_from_text(this)\"" + " value=\""+value+"\"></input>";

	return htmlOut;
}

function valueGatter_fieldComparison( rule ) {
	return rule.$el.find( ".rule-value-container" ).attr( "data-value" );
}

4. Definition of additional Helper Function in the custom HTML from input

data_from_select = function ( id ) {
	$( id ).parent().attr( "data-value", $( id ).find( ":selected" ).val() );
};

data_from_text = function ( id ) {
	$( id ).parent().attr( "data-value", $( id ).val() );
};

The Problem:

Accessing the value in the Rule Object in input_creator_fieldComparison always returns undefined. This is necessary when loading pre defined rules from the last request, after sending a set of rules and then in response loading the resulting set in a table.

Any pointer would be highly appreciated.

Start with the linked jsFiddle and the input_creator_fieldComparison and valueGatter_fieldComparison functions, then trace how pre-defined rules are loaded into the input callback. Reproduce the missing value and confirm that the callback can access the pre-defined rule value while preserving the custom select and text input behavior.