Can i use source item values in radListView.itemTemplates

Question

I am creating an array of radListView im my page and for each radList, i implement one "radListView.itemTemplates" as follow:

radListView.itemTemplates = [
                {
                    key: "notaBaixa",
                    createView: () => {
                        const gridLayout = new GridLayout();

                        gridLayout.addColumn(new ItemSpec(1, GridUnitType.STAR));
                        gridLayout.addColumn(new ItemSpec(1, GridUnitType.AUTO));
                        gridLayout.addColumn(new ItemSpec(1, GridUnitType.AUTO));
                        gridLayout.verticalAlignment = "middle";
                        gridLayout.css = "border-bottom-width:1px; border-bottom-color:black;";

                        const lblDisciplina = new Label();
                        lblDisciplina.col = 0;
                        lblDisciplina.setInlineStyle("padding:10px 0 0 10px; height:60px;");
                        lblDisciplina.verticalAlignment = "middle";
                        lblDisciplina.text = "{{disciplina}}";

                        const lblnotaTotal = new Label();
                        lblnotaTotal.col = 1;
                        lblnotaTotal.setInlineStyle("padding:10px 0 0 10px; height:60px; color: red;");
                        lblnotaTotal.verticalAlignment = "middle";
                        lblnotaTotal.text = "{{nota_total}}";

                        const lblFaltasTotal = new Label();
                        lblFaltasTotal.col = 2;
                        lblFaltasTotal.setInlineStyle("padding:10px 0 0 10px; height:60px;");
                        lblFaltasTotal.verticalAlignment = "middle";
                        lblFaltasTotal.text = "{{faltas_total}}";

                        gridLayout.addChild(lblDisciplina);
                        gridLayout.addChild(lblnotaTotal);
                        gridLayout.addChild(lblFaltasTotal);

                        return gridLayout;
                    }
                },
                {
                    key: "notaAlta",
                    createView: () => {
                        const gridLayout = new GridLayout();
                        gridLayout.addColumn(new ItemSpec(1, GridUnitType.STAR));
                        gridLayout.addColumn(new ItemSpec(1, GridUnitType.AUTO));
                        gridLayout.addColumn(new ItemSpec(1, GridUnitType.AUTO));
                        gridLayout.verticalAlignment = "middle";
                        gridLayout.css = "border-bottom-width:1px; border-bottom-color:black;";

                        const lblDisciplina = new Label();
                        lblDisciplina.col = 0;
                        lblDisciplina.setInlineStyle("padding:10px 0 0 10px; height:60px;");
                        lblDisciplina.verticalAlignment = "middle";
                        lblDisciplina.text = "{{disciplina}}";

                        const lblnotaTotal = new Label();
                        lblnotaTotal.col = 1;
                        lblnotaTotal.setInlineStyle("padding:10px 0 0 10px; height:60px; color: blue;");
                        lblnotaTotal.verticalAlignment = "middle";
                        lblnotaTotal.text = "{{nota_total}}";

                        const lblFaltasTotal = new Label();
                        lblFaltasTotal.col = 2;
                        lblFaltasTotal.setInlineStyle("padding:10px 0 0 10px; height:60px;");
                        lblFaltasTotal.verticalAlignment = "middle";
                        lblFaltasTotal.text = "{{faltas_total}}";

                        gridLayout.addChild(lblDisciplina);
                        gridLayout.addChild(lblnotaTotal);
                        gridLayout.addChild(lblFaltasTotal);

                        return gridLayout;
                    }
                }
            ];

As you can see, in my label i am trying get some property of source item but the label does not understand as property. how can i set the label text value as item source property ?

Answer 1

Please refer the data binding docs. The syntax you are using, is only valid on XML, the XML parser will interpret the syntax and initiate binding between the element and data model.

You have to call bind method on the target element and pass the source & target property to do the same programatically.

For example,

lblDisciplina.text = "{{disciplina}}";

Should be

lblDisciplina.bind({
   sourceProperty: "disciplina",
   targetProperty: "text",
   twoWay: false
});