ASP.NET Ajax client template juga memiliki fitur menarik yaitu select command sebagaimana GridView pada ASP.NET server control. Pada contoh post sebelumnya, saya telah tunjukkan bagaimana membuat sebuah client template pada sebuah table. Pada post kali ini saya akan buat baris pada table tersebut dapat dipilih dengan melakukan klik pada salah satu baris. Ada dua cara untuk melakukan hal ini, secara declarative dan imperative (JavaScript).
Object control DataView memiliki property selecteditemclass yang dapat diisi dengan class element yang dipilih. Property tersebut dapat diset secara declarative maupun imperative (JavaScript). Sebelum membuat DataView dapat dipilih, buat dulu class yang ditampilkan saat row terpilih. Class tersebut diberi nama selected-row
<style type="text/css">
.sys-template { display:none; visibility:hidden; }
.selected-row { background: #ffff7f; color: Green; }
</style>
Select Command secara Declarative
Untuk membuat DataView dapat dipilih secara declarative, tambahkan property sys:command="select" pada table row (TR) dan selecteditemclass property pada dataview seperti pada contoh berikut.
<tbody id="stockListView" class="sys-template" sys:attach="dataview"
dataview:serviceuri="StockService.svc"
dataview:query="GetStocks"
dataview:selecteditemclass="selected-row">
<tr sys:command="select" style="cursor: pointer" >
<td>{{Symbol}}</td>
<td>{{Quote}}</td>
<td>{{Change}}</td>
<td>{{Day}}</td>
<td>{{Time}}</td>
</tr>
</tbody>
Dengan hanya menambahkan property tersebut, sekarang table dapat dipilih (select) dan warna pada baris yang dipilih akan berubah.
Select Command secara Imperative
Penggunaan select command juga dapat dilakukan secara imperative dengan JavaScript. Perlakuannya sama antara declarative dan imperative. Pada cara imperative, row template ditambahkan attribute sys:command="select".
<tbody id="stockListView" class="sys-template">
<tr sys:command="select" style="cursor: pointer">
<td>{{Symbol}}</td>
<td>{{Quote}}</td>
<td>{{Change}}</td>
<td>{{Day}}</td>
<td>{{Time}}</td>
</tr>
</tbody>
Jangan lupa pada tag body juga ditambahkan namespace sys untuk supaya attribute sys dikenali dalam body html.
<body xmlns:sys="javascript:Sys">
Setelah semua attribute disiapkan, tinggal menambahkan property selectedItemClass pada object DataView.
var dataview = $create(
Sys.UI.DataView,
{
serviceUri: "StockService.svc",
query: "GetStocks",
selectedItemClass: "selected-row"
},
{},
{},
$get("stockListView")
);
Tampilan baris yang dipilih akan seperti pada gambar di bawah
Dengan client template, pemprograman halaman html yang interactive menjadi lebih mudah.
Source-code contoh program ini dapat diunduh pada link di bawah.