Navigation: Cool Wave theme overview > Working with table windows

Working with table windows

Print this Topic    Previous page  Parent page  Next page
Expand All Collapse All

 

The table window is the most common type of window in the Cool Wave theme.

 

hmtoggle_plus1 Simple table window

 

A simple table window is shown below:

 

cool wave simple table window.zoom25
A simple table window under the Cool Wave theme

 

Here is the description of the different parts of the window:

 

Window Title: The title of the window
Headers: The name of the data in each column
Filters: Click on these to set the filters for each column
Row Action Area: Icons in this area show the status of the row. Some icons can be clicked to perform an action. A list of icons that can appear in this area is given below
Cells: Each cell contains a piece of data. Some cells can be edited. Cells sometimes have icons within them to represent the status of the cell. A list of icons that can show up is given below
Page Navigation: When there are too many rows to display, you can use this section to move between pages
Action Buttons: Clicking these buttons performs various operation. A list of available buttons is given below
Rows Per Page: Number of rows to display per page
Slave Windows: More on slave windows below
Status Bar: Useful comments about operations you are about to perform or have already performed

 

The icons that can appear in the Row Action Area along with a short description follow:

 

update

This icon is a clickable save button. Click to save the modifications made to the row. The changes will then be sent to the server to update the database.

new

This icon indicates that the row is a new row that hasn't yet been modified and saved to the server.

loading

This icon appears when some processing is in progress (for example, when modification made to a row have been sent to the server). You will not be able to edit the cells of the row while this icon is displayed.

thumbs up

This icon indicates that the operation being performed on the row was successful. This icon will disappear automatically after 10 seconds.

thumbs down

This icon indicates an unsuccessful row operation. You can hover the mouse over this icon to know what went wrong. You can retry the operation on the row after correcting the problem.

 

The icons that can appear in a cell along with a short description follow:

 

symbol edit

This icon indicates that the contents of the cell have been modified, but not yet saved onto the server.

secured

This icon appears when the row is being processed. An example is when the row data is being sent to the server to be saved into the database

symbol error

This icon appears when there was an error with the cell while processing the row. It is possible that some data in the cell was invalid and couldn't be processed. You can retry the operation on the row after correcting the problem.

 

 

The Action Buttons along with a short description follow:

 

table row add

Use this button to add a new row into the table window. You can edit the cells of the newly added row and save it to the server. Some table windows might not allow you to add a new row. You can use the Insert key as a shortcut to add a new row.

table row delete

Use this button to delete rows from the table window. On successful processing of this action, the row is deleted from the server and cannot be recovered You can use the Delete key as a shortcut to delete a row.

copy

Use this button to copy data from the table window into a spreadsheet. You can use the Ctrl-Alt-C key combination as a shortcut to copy data.

 

 

Table windows can be sorted by up to three levels by clicking on the headers to bring up the sort menu shown below:

 

cool wave sort menu.zoom25
Cool Wave Table Window Sort Menu

 

While sorting on the selected primary field, if there are rows with the same data for the field, the secondary field data will be used to further sort those rows. Similarly, the tertiary field is used in case the secondary field data too is the same.

 

 

hmtoggle_plus1 Navigating within table windows

 

Using the mouse, clicking on a cell navigates to that cell and double clicking on a cell will edit its contents if it is editable.

 

The table below shows the keyboard navigation keys available to you:

 

Up arrow

One cell up

Down arrow

One cell down

Left arrow

One cell left

Right arrow

One cell right

Ctrl Left or Home

Leftmost cell of the current row

Ctrl Right or End

Rightmost cell of the current row

Ctrl Up

Topmost cell of the current column

Ctrl Down

Bottommost cell of the current column

Page Up

Scroll up

Page Down

Scroll down

Ctrl Home

Move to top left cell in the table

Ctrl End

Move to bottom right cell in the table

F2 or Enter

Edit a cell if it is editable

Escape

When editing a cell, cancels edit and restores the cell data to what it was before editing

 

 

hmtoggle_plus1 Editing cells in table windows

 

If a cell is editable, you can edit it by navigating to it and pressing F2 or Enter. You can also double click on the cell to edit it. To apply the changes you make after editing a cell, you can click on any other cell in the table or hit enter. Pressing escape will discard any changes you have made and restore the cell to the way it was before you started editing it.

 

The edit mode a cell enters will differ depending on the type of data in the cell. The following are screenshots of the different different edit modes available:

 

Edit Mode

Screenshot

Description

Textbox

Cool Wave Edit Textbox

A textbox is the most basic type of edit mode. You can type directly into it.

Dropdown list

Cool Wave Edit Dropdown

A dropdown list allows you to choose from a list of choices.

 

You can quickly select one of the options by typing the first letter of the option.

 

You can also click on the down arrow next to it and select an option using the mouse.

Date

Cool Wave Edit Date

The date mode allows you to choose a date. You can drag the entire date panel using the blue bar with the date at the top.

 

Clicking on « and » allows you to choose the year. You can press and hold down the left mouse button  on them to select a specific year quickly. Similarly, ‹ and › can be used to select the month. Click on Today to select today's date.

 

If the time is displayed, it can be changed using the left mouse button and shift left mouse button to increase and decrease the values. You can also click and drag to change the values faster.

 

The keyboard arrow keys can be used to move from one date to another. Ctrl left and right changes the month and Ctrl up and down changes the year.

Panel

Cool Wave Edit Panel

The panel mode allows you to edit complex cell data. It contains various elements depending on the data in the cell.

 

You can navigate between elements using Tab and Shift Tab or by just clicking on the element.

 

You can drag the entire panel around using the image in the top left corner.

 

 

hmtoggle_plus1 Slave windows

 

You might have observed the Salve Window dropdown box on the bottom left of the table windows next to the status bar. An expanded Slave Window dropdown is shown below:

 

Cool Wave Slave Windows Dropdown

 

You can use this to link the window to the filters of other windows. We call the window in which you are selecting the slave windows as the master window and the ones that are being selected are called slave windows. When you click on a new row in the master window, all the slave windows will filter themselves based on the data of that row in the master window.

 

Lets consider an example. Lets say you have a Customer Information window as the master window and two slave windows - an Invoice window and an Order window. As soon as you click on a new row in the Customer Information window, the Invoice and Order windows will filter themselves based on the Customer ID of the row selected in the Customer Information window. The two windows in the process of filtering themselves are shown in the screenshot below:

 

cool wave slave windows.zoom25
Cool Wave Slave Windows

 

Another option in the Slave Windows dropdown is the "All (Autolink)" option. This option will automatically make any new windows you open within the same workspace slave windows of the current window if the fields to filter on match. This saves you the trouble of adding each new window as a slave window.

 

 

Caution

Using too many slave windows could increase the load on your server

 

Since every click on a new row in the master window results in the slave windows refreshing their data, which in turn results in a call to the web server, having too many slave windows can cause many requests to be made to the server. Be sure to uncheck the checkboxes in the Slave Windows dropdown when you are no longer using them.

 

 

 

hmtoggle_plus1 Drag and drop filtering

 

Instead of using Slave Windows, it is possible to simply drag a row from one window to another to filter the destination window based on the source row's data. The screenshot below shows a row being dragged from a Customer Information window to an Invoice window:

 

cool wave drag drop filter.zoom25
Cool Wave Drag Drop Filter

 

The tooltip at the top right corner of the workspace gives you an indication as to what the filter field(s) will be. When you let go of the mouse button on the Invoice window, it will filter itself according to the Customer ID of the row that was dragged from the Customer Information window.

 

 

hmtoggle_plus1 Complex table windows

 

A complex table window is shown below:

 

cool wave complex table window.zoom25
Cool Wave Complex Table Window

 

It is quite similar to a simple table window, except for the first column which contains + and - images to expand and collapse the row. In the above screenshot of the Invoice window, each collection of rows under the + / - sign belongs to one invoice. Each row represents one invoice item. All the values common to the entire invoice appear on the first row.

 

The entire collection of rows representing one invoice is modified, saved and deleted together. When you click on the add new row or delete row buttons, you will be asked if you would like to perform the operation on the entire invoice or a single invoice item.

 

Performing a delete operation on the first invoice item in the above example could be confusing for beginners since the first row also contains all the common invoice fields. So, lets go into a few details about it. When you select a cell on the first row of the invoice and click on the delete row button, you will be asked if you would like to delete the entire invoice or just an invoice item. If you select the invoice, the entire invoice will be deleted. If you select invoice item, only the first invoice item is deleted. However, the common invoice fields are NOT deleted since you are deleting only the invoice item. So, there should be no confusion - when you choose to delete the invoice, the entire invoice is deleted, while if you choose to delete an invoice item, even if its the first one, only that single invoice item is deleted.