Adding inline styles programmatically in NativeScript

Question

I'm teaching myself the basics for NativeScript.

This is my main-page.xml:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <GridLayout id="grid">

  </GridLayout>
</Page>

This is the JS code:

var view = require("ui/core/view");
var layout = require("ui/layouts/grid-layout");

function pageLoaded(args) {
    var page = args.object;
    var gr = view.getViewById(page, "grid");
    if (gr) {
        for (var i = 0; i < 10; i++) {
            gr.addColumn(new layout.ItemSpec(1, layout.GridUnitType.star));
            var g = new layout.GridLayout();
            g.style = "{ background-color: red; }";
            layout.GridLayout.setColumn(g, i);
            gr.addChild(g);
        }
    }
}

exports.pageLoaded = pageLoaded;

How does one programmatically set the style for a grid created in code-behind? When I run the code, I don't see anything in red. Ideally, I'd like to be able to add styles without creating a css class or selecting css by id. Is this possible i.e. adding in-line styles?

EDIT: Fixed the typo in "{ backgroud-color: red; }";

'Background' is misspelled in your example. Are you that's not the problem? Also, do g.style.backgroundColor = "red"; — Miguel M.
– Miguel M., Commented Jun 5, 2015 at 16:37
Miguel, I fixed the typo but that didn't work. I tried your second suggestion, and it seems to work. Thanks!! — Matt Donovan
– Matt Donovan, Commented Jun 5, 2015 at 16:43

Alexander Vakrilov · Accepted Answer · 2015-06-29 14:13:12Z

3

You can set the background as a property of the style object:

g.style.backgroundColor = new colorModule.Color("Red");

Check the "JavaScript property" column here if you need to access other properties for the style object.

answered Jun 29, 2015 at 14:13

Alexander Vakrilov

1,1217 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gumuruh Over a year ago

i didnt find the .display = "block" or .display = "none" style in nativescript. so how do nativescript v8 styling used to make a view visible and hidden anyway? @Alexander

Collectives™ on Stack Overflow

Adding inline styles programmatically in NativeScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related