Drag and Drop Data Grid to Data Grid
This example demonstrates how to create a shopping cart using objects from the 4D Ajax Framework. This page uses three data grids: one to display a list of products, one for a our cart icon, and one to display the actual shopping cart list. Objects can be dragged from the product list data grid and dropped onto the cart icon data grid. When this happens, the contents of the shopping cart data grid will be updated according to a few rules we define.
Product List
The product list will have text content and an image. The data grid object does not natively support images, but it does accept html content, which we can use to insert images.
Populate Data
A table is setup with all of the product information, including the images. This table is used to create
the DCS for the data grid, with the exception of the image field. To add the image as html content, we simply
build the url call which gets the image from the 4D table and this url is added to the DCS. Here is the url
syntax for getting an image from a 4D table.
Syntax: /DAX/GetImage/x.y.z?sessionId=sID)
where:
x = the table number
y = the field number
z = the record number
sID = the sessionID (DAX_Dev_Session_SessionID will return this value)
Now, to display the grid as one cell that can be dragged, html content is created and the other data grid values are
incorporated into the html content. The other cells are hidden, leaving only the one cell to be displayed and dragged.
Syntax: var myContent = ' ... html ... + myGrid.getCellValue(row,column) + ... html ...';
myGrid.setCellValue (row, column, myContent);
Enable Draggable Option
Enabling draggable option on a data grid, the command setDragCells must be executed on the grid object.
This command must also be executed after the grid object is constructed (dragGrid.go();)
Syntax: dragGrid.setDragCells(row, column, isDroppable);
Cart Icon
A data grid is used to represent our cart icon because it can be set to allow dropping. The cart icon is a 1x1 data grid contains no data and the image displayed is controlled via CSS.
Enable Data Grip Drop Option
1) To specify which cells are drop zones, call the function 'setDropCells'. This function is used to turn the drop zones on and off.
By default, all cells of a data grid are set as drop zones.
Syntax: myGrid.setDropCells(row, column, isDroppable);
2) To enable the droppable option on a data grid, the event 'ondragrelease' must be activated for the grid object, in this case, the 1 cell in
the data grid. The javascript function we define will
Syntax: myGrid.ondragrelease = YourFunction;
3) To provide the visual indicator of a cell being dragged over, the event 'ondragover' is activated for the grid object. We define a javascript
function for this event that returns the stylesheet that we would like to see, which in this example is a image of a full shopping cart.
Syntax: myGrid.ondragover = YourFunction;
//javascript
function onDragOverEvent(cellRef, event) {
return 'carthover_style';
}
//CSS
.dax_datagrid .carthover_style {
background-image: url('/dax/images/sc_full.jpg');
border:2px solid #FFFFFF;
}
Shopping Cart
A data grid is used to display the contents of the shopping cart. Everytime an object from the data grid is dropped onto the
cart icon data grid, the shopping cart data grid is updated accordingly. For this example, that means that either the item is inserted
into the cart, or if the item has already been added to the cart, then the quantity and price are updated. Also, as the items are
added to the cart, they are sorted alphabetically by item name.
Data Grid Creation
To create the shopping cart data grid we use the 'dax_dataGrid' function. We use a DCS as the selection that contains the fields
we need and specify 1 header row.
Syntax: myGrid = new dax_dataGrid(selection, location, headerRows, lockedLeftColumns, useControlColumn);
Data Grid Footer Setup
To create the footer rows for our data grid and to populate them with the information we need, we need to execute 3 commands.
1) Create footer rows.
Syntax: displayGrid.setFooterRows(number of footer rows);
2) One at a time, get the actual row of each footer row number (which is different from the footer row number).
Syntax: myRowNumber = myGrid.getFooterRowNumber(footerRowNumber);
3) Populate the individual footer cells with the information we want, by using the 'setCellValue' function.
Syntax: myGrid.setCellValue(myRowNumber, column, content);
Drop Handling
After an object is dropped onto the shopping icon data grid, the 'ondragrelease' event function we assigned earlier is
called and will handle what happen at this point. We named our function onDragReleaseEvent and it contains 3 functions that we use to
carry out the steps we want.
1) Our first call is to a function called getCurrentRow, which extracts the information we need from the dropped object. First, we need to
get the cell that was dropped by using the 'dragObjectSource' function. Then we use this object's row number to extract the values of its
corresponding grid cells.
//get dropped object cell
Syntax: var originCell = dax_bridge.hoverDragging.dragObjectSource;
//save contents of the specified field
Syntax: field_value1 = myGrid.getCellValue(originCell.row, column);
2) At this point we have the values of the dropped object and we can proceed however we want. So the next call will be to the function
'UpdateCart', which actually inserts or updates the contents of the shopping cart data grid. The function contains logic for where and when
to insert or update a row, but ultimately we just make different calls of the 'setCellValue' function.
Syntax: myGrid.setCellValue(row, col, content);
3) The last call is to a function called 'updateFooters', which updates the values of the footer rows (Subtotal, Tax, and Total). To do this
we use the 'setCellValue' in conjunction with the 'getFooterRowNumber' function.
Syntax: myGrid.setCellValue(myGrid.getFooterRowNumber(footerRowNumber), col, content);