What is already implemented:
We have a page where the Backgrid table is rendered from table1
in database (which is working fine) and most of the cells in the Backgrid are editable. The cells are left editable so that the existing details can be displayed in the grid and at the same time could be edited if required. Further new rows could be added by double-clicking on one of the cells in the empty row.
What needs to be achieved:
There is a column (clientid
) which currently displays only the ID numbers, but we need the cell to display the client-name
based on the existing ID in that cell. These [clientid, client-name]
comes from table2
in the database. Since the cell is also editable, we want the user to be able to select the appropriate client using Backgrid.Extension.Select2Cell
.
If I refer to this example: http://backgridjs.com/ref/cell.html
{
name: "gender",
label: "Gender",
cell: Backgrid.SelectCell.extend({
// It's possible to render an option group or use a
// function to provide option values too.
optionValues: [["Male", "m"], ["Female", "f"]]
})
The Gender (SelectCell)
will display options to select based on the optionValues defined. Similarly, we'll need the select options to be listed as drop-down (pulled from table2
in the database as [clientid, client-name]
) and at the same time, the content of the cell (from table1
) should display the text not the ID...so, Male
not m
(m
referring to above example).