title: Adding inline styles programmatically in NativeScript
body: <p>I'm teaching myself the basics for NativeScript.</p>
  
  <p>This is my main-page.xml:</p>
  
  <pre><code>&lt;Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded"&gt;
    &lt;GridLayout id="grid"&gt;
  
    &lt;/GridLayout&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p>This is the JS code:</p>
  
  <pre><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 &lt; 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;
  </code></pre>
  
  <p>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?</p>
  
  <p>EDIT: Fixed the typo in <code>"{ backgroud-color: red; }";</code></p>