List Control - Conditional Styling - Server-side and Client-side Part 2

UX Component

 

In this document and accompanying video we will continue our discussion on Conditional Styles.

 

Watch Video 2

 

Download Component

 

In our example list we have specified that the Customerid should be underlined if the country is Germany.  To see how we do that click on the Design tab, then List properties:

 

 

 

Click the Fields tab.  When the List Builder window opens we see that we only have a Conditional style option for Server-side, not Client-side.  But we can do client-side conditional styles in a different way.  Start by clicking the List Properties tab:

 

 

 

Click on the event handler called OnBeforeItemDraw.  This event handler fires before each item in the list is drawn:

 

 

 

This will bring up the List Control System Events window.  We see the code is saying that if data.Country is equal to Germany, then set data.CustomerID to underline (we are using the HTML tags for underline).  So this is how we did a client-side conditional style at the individual control level, by using the onBeforeItemDraw event handler:

 

 

These are very powerful features in the List Control for adding conditional styles to the data where the conditional style can either be computed server-side using Xbasic code, or client-side using Javascript.