|
|
Events are used to call client-side JavaScript methods in response to a client-side grid event (EventType) which enables additonal levels of customisation. The event passes 2 arguments to the client-side method. The first is a reference to the client-side grid control and the second (optional) argument is an object that contains information specific to the event type.
Handlers are assigned to events using the Bind method which take 2 methods
OnCellTransform
The OnCellTransform event is called for every cell in the page after the page is loaded and passes a reference to the grid followed by an options object that containsthe following properties.
•cell - reference to the HTML cell element
•row - reference to the HTML row element
•columnName - the name of the column associated with the cell
|
...
customersGrid.Bind(EventType.OnCellTransform, "addButton");
...
<script type="text/javascript" class="source">
function addButton(sender, args) {
switch(args.columnName.toLowerCase())
{
case "button":
var $cell = $(args.cell);
var $row = $cell.parent();
var customerId = sender.columnValue("CustomerId", $row);
$cell.html(`<a class='btn btn-sm btn-secondary' target='_blank' href='/samples/detail?customerid=${customerId}' role='button'>Orders</a>`)
break;
}
}
</script>
|
Demo
OnConfigureBinaryData
The OnConfigureBinaryData event is used to configure the way in in which a binary data column is configured in conjunction with the Image and File column methods. In the example below the event is used to assign a file name to the image or download button so that if/when it is downloaded the file name is assigned to the download.
The second args object has the following properties:
•row - a reference to the HTMLTableRowElement
•cell - a reference to HTMLTableCellElement containing the preview image or download button
•fileName - the default file name. If a new value is assigned to the property then it will be used as the download file name.
•columnName - the name of the source database column
|
...
DbNetGridCore employeesGrid = new DbNetGridCore("northwind", "employees", "imageGrid")
{
Columns = new List<string>() { "EmployeeId", "FirstName", "LastName", "Title", "Photo", "PhotoPath" },
PageSize = 5
};
employeesGrid.View = true;
employeesGrid.PageSize = 5;
employeesGrid.MaxImageHeight = 40;
employeesGrid.Bind(EventType.OnConfigureBinaryData, "configureImageFileName");
employeesGrid.Column("Photo").Image( new ImageConfiguration("jpg"));
@employeesGrid.Render()
DbNetGridCore downloadGrid = new DbNetGridCore("northwind", "employees", "downloadGrid")
{
Columns = new List<string>() { "EmployeeId", "FirstName", "LastName", "Title", "Photo", "PhotoPath" },
PageSize = 5
};
downloadGrid.Column("EmployeeId").Hidden();
downloadGrid.Bind(EventType.OnConfigureBinaryData, "configureImageFileName");
downloadGrid.Column("Photo").File(new FileConfiguration("jpg"));
@downloadGrid.Render()
...
<script type="text/javascript" class="source">
function configureImageFileName(sender, args) {
var fileName = sender.columnValue("photopath", args.row);
args.fileName = fileName.split('/').pop().replace(".bmp", ".jpg");
}
</script>
|
Demo
OnInitialized
This event is fired as soon as the client-side instance of the grid has initialised and can be used to save a client-side reference to the grid control if needed.
|
...
customersGrid.Bind(EventType.OnInitialized, "saveGridReference");
...
<script type="text/javascript">
var customersGrid;
$(document).ready(init);
function init() {
$('#showRowsBtn').click(showSelectedRows);
}
function saveGridReference(grid)
{
customersGrid = grid;
}
function showSelectedRows() {
var selectedRows = customersGrid.selectedRows();
var ids = []
for (var i = 0; i < selectedRows.length; i++)
{
ids.push(selectedRows[i].dataset["id"])
}
if (ids.length == 0)
{
alert("No rows selected")
}
else
{
alert("You have selected the following rows:\r\n" + ids.join(","))
}
}
</script>
|
Demo
OnPageLoaded
The OnPageLoaded event is fired after each page of the grid is displayed and passes a reference to the grid followed by an options object that contains the following properties.
•table - reference to the HTML table element
OnRecordDeleted
The OnRecordDeleted event is called after a record is deleted.
OnRowSelected
The OnRowSelected event is fired whenever a row in the grid is clicked on and passes a reference to the grid followed by an options object that contains the following properties.
•row - reference to the HTML row element thar was selected
|
...
customersGrid.Bind(EventType.OnRowSelected, "setOrderTabLabel");
...
ordersGrid.Bind(EventType.OnRowSelected, "setOrderDetailsTabLabel");
...
<script type="text/javascript" class="source">
function setOrderTabLabel(grid, args) {
$("button#orders-tab").html("<b>" + grid.columnValue("companyname") + "</b> orders")
}
function setOrderDetailsTabLabel(grid, args) {
$("button#orderdetails-tab").html("Order <b>" + grid.columnValue("orderId") + "</b> details")
}
</script>
|
Demo
OnRowTransform
The onRowTransform event is called for every row in the page after the page is loaded and passes a reference to the grid followed by an options object that contains the following properties.
•row - reference to the HTML row element.
|
...
productsGrid.Bind(EventType.OnRowTransform, "highlightOrderLevels");
...
<script type="text/javascript">
function highlightOrderLevels(sender, args)
{
var unitsInStock = parseInt(sender.columnValue("UnitsInStock",args.row));
var reorderLevel = parseInt(sender.columnValue("ReorderLevel",args.row));
if (unitsInStock < reorderLevel) {
jQuery(args.row.cells[sender.columnIndex("UnitsInStock")]).css("backgroundColor","red");
jQuery(args.row.cells[sender.columnIndex("ReorderLevel")]).css("backgroundColor","red");
}
}
</script>
|
Demo
OnViewRecordSelected
The OnViewRecordSelected event is called after a record is displayed in the View dialog and passes a reference to the grid followed by an options object that contains the following properties.
•dialog - a reference to the JQuery UI dialog.
•record - an object that contains data for the currently selected record
|
...
employeesGrid.Bind(EventType.OnViewRecordSelected, "updateTitle");
...
<script type="text/javascript">
function updateTitle(sender, args)
{
args.dialog.dialog("option", "title", args.record["firstname"] + " " + args.record["lastname"]);
}
</script>
|
Demo
|
|
