\nThe code would be:
\n
exports.pageLoaded = function(args) {\n var page = args.object;\n \/\/ Set our Record Set Data up. \n var data = [{text: "One", color: "#FF0000"},\n {text: "Two", color: "#00FF00"},\n {text: "Three", color: "#0000FF"}];\n page.bindingContext = {items: data};\n};\n\nexports.onTap = function(args) {\n \/\/ Find the Parent StackLayout\n var stackLayoutContainer = args.object.parent;\n\n \/\/ Disable button\n args.object.isEnabled = false;\n\n \/\/ Find the "Label" Child inside the StackLayout\n var label = stackLayoutContainer.getViewById('wow'); \n\n \/\/ Look at our Specific Record \n var dataRecord = args.object.bindingContext;\n\n \/\/ Set the Label color to our Records color...\n label.backgroundColor = dataRecord.color;\n};<\/pre>
\nSo in this example; I'm showing you two cool things about the args that get sent to the onTap function inside a ListView<\/em>.\u00a0\u00a0 The first item, is args.object<\/strong> -- this is the actual button.\u00a0 So if you wanted to disable the button you could something like args.object.isEnabled = false; <\/strong>and it would disable just that specific button.\u00a0 However, items in the view tree have a parent.\u00a0\u00a0 In our Declarative UI XML you can see that the Button<\/em> is a child of the StackLayout<\/em>, then that means the StackLayout<\/em> is the parent.\u00a0 So once we have the parent object, we just search its children for the child (label) we want.\u00a0\u00a0\u00a0 Once we have the label we can do whatever we want with it.<\/p>\nThe next thing I'm showing you is that in addition to the Button<\/em> having a parent <\/strong>property, in this case the Button<\/em> will also have a bindingContext<\/strong> property.\u00a0 The bindingContext in this case is the single record that was used in the creation of this specific view object (i.e. Button<\/em> in this case).\u00a0 So for the first Button<\/em>, it would have the full \"One\" record.\u00a0 The second Button<\/em> has the \"Two\" record and the final Button<\/em> has the \"Three\" record.\u00a0 You can use this information to be able to do just about anything from the Button<\/em> since you now know which record this tap event is now related to.\u00a0\u00a0 Instead of a Button<\/em>, we could have used a Image<\/em>, Label<\/em>, or any other view object.\u00a0\u00a0 The args <\/strong>passed to the tap event would contain the same information.![\"blog-listview-sample\"](\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/02\/blog-listview-samepl.png\")
<\/a><\/p>\nAs you can see in this simple sample, by clicking the second button; it found the \"Two\" label, changed the color to the color that we set in the \"Two\" record; and also disabled the tap button.\u00a0\u00a0\u00a0 If you were to tap the Third button, it would change that label to be blue, since the third record has color: \"#0000FF\" as its color.<\/p>\n","protected":false},"excerpt":{"rendered":"
I was asked earlier this week about how to access a related label when you click on a button or other object in the list of a ListView\/GridView\/Repeater. Since it took me a little while to figure this out for my own project a couple weeks ago and since someone else ran into this issue… Continue reading NativeScript: Tip - access a related view of a GridView\/ListView\/Repeater<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[15,39],"tags":[48,47,16,50,49],"class_list":["post-224","post","type-post","status-publish","format-standard","hentry","category-nativescript","category-tips","tag-gridview","tag-listview","tag-nativescript","tag-nested-object","tag-repeater","entry"],"_links":{"self":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=224"}],"version-history":[{"count":1,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/224\/revisions"}],"predecessor-version":[{"id":226,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/224\/revisions\/226"}],"wp:attachment":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=224"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}