In this document and accompanying video we will discuss how to do advanced client-side conditional styling on a list using Javascript to create arbitrarily rich dynamic styles.
In our example we have a simple List Control and we have styled it so that it has alternating row colors. We have also set the background color of a button to yellow if the State is MA, and specified that if the State is CO the button should have a label equal to the value of the Lastname field:
Let's take a look at how we did this. Click the Design tab, then List properties:
When the List Builder window opens we see that it is a simple list based on static data. Click on Static data to see the Static Choices:
Click on the Fields tab to see that we have added a button control and specified that the Button text is MyButton, and the button Name is btn1:
Now click the List Properties tab. All of the work is done using the OnItemDraw event. This is an event that fires after each row in the list has been drawn:
Click on OnItemDraw to open the List Control System Events window where we can see the Javascript that was executed to create the conditional styling. Click on Examples of typical 'onItemDraw' event handlers for help in using it and in writing the Javascript:
Looking at the code we used, we start by looking at the value in the State column. We clicked on Insert Field to see the available fields, and chose data.State. Our code goes on to say that if the state is equal to CO, then we would like to get a pointer to the button control in the current row. We have used a special place holder called {listElement:btnl} for that:
To insert that placeholder we clicked on Insert Element Placeholder to see the available elements. This placeholder will get replaced at runtime with a pointer to the DOM element for the button. After that, if the State is CO set the inner HTML to data.Lastname:
So that is how we put the value of the Lastname field in the button text if the state is CO. The next code block says that if the State is MA, then again get a pointer to the button element, set the background image to 'none' and set the background color to 'yellow':
And, last is the code for alternating row colors. 'Index' is the zero based row index for the row number that we are currently drawing, and 'ele' is a pointer to the element that contains the entire row. We are using the Javascript Modulus Operator, so if index MOD 2 is equal to 0, then set the background color to #8496c6, otherwise set it to #7685f8 (as 'ele' is a pointer for the entire row):
Just a small amount of Javascript has enabled us to create a rich, dynamic style in our list.