In this iteration of the series we will complete our datagrid widget which we started on in Interface Widgets: Datagrid (part I). Today we will cover a few more topics: columns sorting, editing records directly in the datagrid and printing the datagrid scrollable content.
Sortable columns
First of all let’s decide which columns will be sortable and by which one the datagrid will be sorted by default when the page first loads.
To me it made the most sense to sort the columns by Title, Price and Genre. I also decided by default the datagrid should be sorted by Title. In order to show to the user the difference between the non-sortable and sortable columns we want to make the latter look more like buttons. I created a separate CSS class and applied it to all sortable columns.
.column_header_sortable{
border-top: 2px solid ThreedHighlight;
border-left: 2px solid ThreedHighlight;
border-bottom: 2px solid ThreedShadow;
border-right: 2px solid ThreedShadow;
color: ButtonText;
font-weight: bold;
padding:3px;
cursor: default;
To visually indicate the current sort order (ascending or descending) we need two images – for the “up” and “down” arrows. You can use the images below or create your own:
Down arrow:
Up arrow:
If you open those images with your favourite image-editing software you will see that both of them are semi-transparent gifs. Using transparent areas creates the desired 3D/ see-through effect and allows the arrows to “take on” the user’s system colour.
.
Place both images in each sortable header cell next to the column title.
Read More