11.7. Master-Detail Binding

A common scenario in line-of-business applications is the need to create master-detail forms. The DataView control makes this very easy; let's see how:

  1. Copy the existing dataviewProgrammatic.htm, and rename the new file to dataviewMasterDetail.htm.

  2. Replace the existing <script> block with the following:

    <script type="text/javascript">

Sys.require([Sys.components.dataView], function() {
var people = [
   { Name: "Alex Mackey", Age: "28", Address: "20 Tree road", Telephone: "888888" },
   { Name: "Sharyn Mackey", Age: "35", Address: "10 Oak ave", Telephone: "777777" },
   { Name: "Brett Chaney", Age: "33", Address: "50 Wayside Road",
     Telephone: "6666666" },
   { Name: "Jenny Chia", Age: "24", Address: "88 Burleigh Gardens",
     Telephone: "5555555" }
];

var master = Sys.create.dataView('#peoplesNames',
{
    data: people
});

var detail = Sys.create.dataView("#peopleDetail");
Sys.bind(detail, "data", master, "selectedData");

});
</script>

  3. Now replace the <body> section with the following code:

    <body>
<div id="peoplesNames" class="sys-template">
<div class="dataItem" sys:command="select">
   {{ Name }}
   <hr />
   </div>
</div>

<!--Detail View-->
<div id="peopleDetail" class="sys-template">
<span class="nameddetailitem">
    Age: {{ Age }}  <br />
    Address: {{ Address }}   <br />
    Telephone: {{ Telephone }}
</span>
</div>

</body>

  4. That's it. Run the code, click a name, and see that the individual's details are retrieved. Note the line Sys.bind(detail, "data", master, "selectedData") that links the master and detail DataViews together.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.227.134.154