Ahmad Masykur

Share your knowledge although one function!

About the author

Ahmad Masykur is a Software Architecture Engineer at PT. Freeport Indonesia Jakarta Indonesia.
In this blog, I share things of interest to me. Most topics are likely to be related to software development, but don't hold me to it.

Certificates



Awards


Powered by

Widget Prayer Time not found.

There is an error in XML document (4, 16278).X

Page List

Validators


Ahmad Masykur

ASP.NET Ajax Client Template | Select Command

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

image

Dengan client template, pemprograman halaman html yang interactive menjadi lebih mudah.

Source-code contoh program ini dapat diunduh pada link di bawah.


Categories: ASP.NET AJAX
Permalink | Comments (11) | Post RSSRSS comment feed

Comments

Busby SEO Test Republic of the Philippines | Reply

Sunday, November 30, 2008 11:49 AM

Busby SEO Test

Great! Thanks this is useful!

Busby SEO Test United States | Reply

Saturday, December 06, 2008 6:17 PM

Busby SEO Test

Pada post sebelumnya yg mana bro ? ada urlnya gak ?

digg - Busby SEO Test United States | Reply

Wednesday, December 10, 2008 9:31 AM

digg - Busby SEO Test

beuh, susah bener ya belajar ASP.NET Frown

Busby SEO Test United States | Reply

Wednesday, December 17, 2008 2:19 AM

Busby SEO Test

Semakin banyak yg mengulas tentang ASP.NET nih, bagus2x

idea aku Kuwait | Reply

Saturday, December 20, 2008 9:18 PM

idea aku

kepala aku pusing mana bisa membacanya. tapi aku tahu kamu memang expert. bagus sekali . post yang membawa manfaat.

Busby Test Indonesia | Reply

Friday, January 02, 2009 2:30 PM

Busby Test

mantab postingannya yah...

ery Turkey | Reply

Wednesday, January 07, 2009 4:13 PM

ery

aduh...gw br belajar nih ttg ASP.NET,pusing tapi gmn lagi,tuntutan

Plinian Webhotel Hosting United States | Reply

Tuesday, January 13, 2009 11:53 PM

Plinian Webhotel Hosting

Last week, we shipped the first preview for the Ajax work we're doing in ASP.NET 4.0 under the simple form of a simple script file (release and debug versions). This should show how much emphasis this release puts on the client-side. As a matter of facts, I'll use a plain HTML file here instead of an ASPX file to make it perfectly clear that everything here (except for the web service that provides the data) runs on the client.

Busby SEO Test!!! United States | Reply

Sunday, January 25, 2009 1:50 AM

Busby SEO Test!!!

susah euy... liat kodenya mata langsung kunang-kunang wekekekekk...

neil United States | Reply

Thursday, January 29, 2009 2:40 PM

neil

After an Ajax request, the HTML within some portions of the page (for ASP.NET Ajax this is the "update panel") are being completely re-rendered with new HTML and therefore it's impossible to keep client side state across Ajax Server Side event handlers.

Simon United States | Reply

Sunday, February 01, 2009 2:22 AM

Simon

The codes giving me some problem.

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading