looking for some solutions? You are welcome.

SOLVED: custom control aggregation binding issue sapui5

niraj17:

I m facing issue while doing aggregation binding the custom control. I m not able to do two-way data binding with the custom control inner element.

Custom control:

(function(){
    "use strict";

    var PriceRangeComponent = sap.ui.core.Control.extend('PriceRangeComponent', {
        constructor: function(mSettings) {
            sap.ui.core.Control.apply(this, arguments);

            this.ef = new sap.m.Input({
                width: '100px',
                value: mSettings.value,
                enabled: mSettings.enabled
            }).attachChange(function(evt){
                console.log(evt);
            });

            this.setAggregation('_ef', this.ef);
        },

        metadata: {
            properties: {
                enabled: { type: 'boolean', defaultValue: true },
                value: { type: 'String', defaultValue: "" }
            },

            events: {
            },

            aggregations: {
                _ef: { type: 'sap.m.Input', multiple: false, visibility: 'hidden' }
            }
        },

        init: function() {
        },

        renderer: function(oRM, oControl) {
            oRM.renderControl(oControl.getAggregation('_ef'));
        },

        setValue: function (sValue) {
            this.ef.setValue(sValue);
        },

        setEnabled: function (bValue) {
            this.ef.setEnabled(bValue);
        },

        getValue: function(){
            return this.ef.getProperty("value");
        },

        getEnabled: function(){
            return this.ef.getProperty("enabled");
        }

    });

    PriceRangeComponent.prototype.clone = function(){
        var clone = sap.ui.core.Control.prototype.clone.apply(this, arguments),
            bindingInfo;

        clone.ef.bindProperty("value",this.getBindingInfo("value"));

        return clone;
    };

    return PriceRangeComponent;
})();

In the control, i want to do two way data binding with the outer model.

usage of custom control:

var priceGridwindowShade = new sap.ui.commons.windowshade.WindowShade({
            openFirstSection:false,
            sections:[],
            //layoutData: new sap.ui.layout.GridData({span: "L9 M9"}),
            width: "800px",

        });

        var oTemplateSection = new sap.ui.commons.windowshade.WindowShadeSection({
            title: {
                parts: [
                    {path: "startRange"},{path: "endRange"}
                ],
                formatter: function(startRange, endRange){
                    //console.log(val);
                    return startRange + " to " + endRange;
                }
            },
            content: [
                new PriceRangeComponent({
                    value: "{startRange}"
                }),

                new sap.m.Input({ // this input is for checking the 2 way data binding
                    width: "80px",
                    value: "{startRange}"
                })
            ]
        });

        priceGridwindowShade.bindAggregation("sections", {
            path: "/items",
            template: oTemplateSection,
            templateShareable: true});

        return priceGridwindowShade;

Please help me. When i just instantiate the control and bind the properties, two-way binding works properly. Just that it stop working when i do the aggregation binding.



Posted in S.E.F
via StackOverflow & StackExchange Atomic Web Robots
Share:

No comments:

Recent