Adding button to datatable

I have the code below where I want to add a record to the webix datatable. I’m a JS novice so not sure of the correct definition to make sure the variable scope is valid.

Basically I have a pager and datatable like so which works fine:

	<script type="text/javascript" charset="utf-8">

	webix.ready(function(){

		webix.ui({
			id: "pagerA",
			view: "pager",
			template:"{common.prev()} {common.pages()} {common.next()}",
			container: "page_section",
			size: 15,
			group: 5
		});

		theGrid = {
			id: "gasGrid",
			view:"datatable",
			editable: true,
			navigation: true,
			pager: "pagerA",
			columns:[
				{ id:"PKey",			header:"",			hidden:true},
				{ id:"SiteName",		header:"Site", 		width:250, sort:"string"},
				{ id:"PercentageChange",header:"% Change",	width:100, editor: "text", sort:"int"},
				{ id:"kWChange",		header:"kW Change",	width:100, editor: "text", sort:"int"}
			],
			autoheight:true,
			autowidth:true,
			select:"row",
			save: "data/gasforecastdata_save.php",
			url: "data/gasforecastdata.php"
		};

		webix.ui({
			container:"gasforecast",
			rows: [
				{type: "header", template: "Gas Forecast"},
				theGrid]
		});

		cmdAddRow = webix.ui({
			container:"addbutton",
			view:"button",
			label: "Add Site"
		});

		cmdAddRow.attachEvent('onItemClick', function(id, e) {
				var data = {"SiteName": "X", "PercentageChange": 1, "kWChange": 0};
				theGrid.add({data);
		});

	});
	</script>

However when the button is clicked it generates a ‘Uncaught TypeError: gasgrid.add is not a function’

I have tried adding an id: property to the datatable and reference that, but I still get an error. Not sure what to do?

Thanks

Gary

answered on stackoverflow http://stackoverflow.com/questions/32460164/attach-button-click-to-webix-datatable