Override Girid.ts file as per below.
/// <reference path="../../../Northwind/Order/OrderGrid.ts" />
namespace Serene.BasicSamples {
@Serenity.Decorators.registerClass()
export class CustomLinksInGrid extends Northwind.OrderGrid {
constructor(container: JQuery) {
super(container);
}
/**
* We override getColumns() to change format functions for some columns.
* You could also write them as formatter classes, and use them at server side
*/
protected getColumns(): Slick.Column[] {
var columns = super.getColumns();
var fld = Northwind.OrderRow.Fields;
Q.first(columns, x => x.field == fld.CustomerCompanyName).format =
ctx => `<a href="javascript:;" class="customer-link">${Q.htmlEncode(ctx.value)}</a>`;
Q.first(columns, x => x.field == fld.OrderDate).format =
ctx => `<a href="javascript:;" class="date-link">${Q.formatDate(ctx.value)}</a>`;
Q.first(columns, x => x.field == fld.EmployeeFullName).format =
ctx => `<a href="javascript:;" class="employee-link">${Q.htmlEncode(ctx.value)}</a>`;
Q.first(columns, x => x.field == fld.ShipCountry).format =
ctx => `<a href="javascript:;" class="ship-country-link">${Q.htmlEncode(ctx.value)}</a>`;
return columns;
}
protected onClick(e: JQueryEventObject, row: number, cell: number): void {
// let base grid handle clicks for its edit links
super.onClick(e, row, cell);
// if base grid already handled, we shouldn"t handle it again
if (e.isDefaultPrevented()) {
return;
}
// get reference to current item
var item = this.itemAt(row);
// get reference to clicked element
var target = $(e.target);
if (target.hasClass("customer-link")) {
e.preventDefault();
let message = Q.format(
"<p>You have clicked an order from customer: {0}.</p>" +
"<p>If you click Yes, i'll open Customer dialog.</p>" +
"<p>If you click No, i'll open Order dialog.</p>",
Q.htmlEncode(item.CustomerCompanyName));
Q.confirm(message, () => {
// CustomerDialog doesn't use CustomerID but ID (identity)
// so need to find customer to get its actual ID
var customer = Q.first(Northwind.CustomerRow.getLookup().items,
x => x.CustomerID == item.CustomerID);
new Northwind.CustomerDialog().loadByIdAndOpenDialog(customer.ID);
},
{
htmlEncode: false,
onNo: () => {
new Northwind.OrderDialog().loadByIdAndOpenDialog(item.OrderID);
}
});
}
else if (target.hasClass("date-link")) {
e.preventDefault();
var ordersInSameDate = Q.count(this.view.getItems(), x => x.OrderDate == item.OrderDate);
Q.notifyInfo("You clicked an order from date " +
Q.formatDate(item.OrderDate) + ". There are " +
ordersInSameDate + " orders from the same date that is loaded in grid at the moment");
}
else if (target.hasClass("employee-link")) {
e.preventDefault();
Q.notifySuccess("You clicked an employee name, " +
"so i've opened a new Order Dialog from same customer " +
"with that employee prepopulated!");
new Northwind.OrderDialog().loadEntityAndOpenDialog(<Northwind.OrderRow>{
CustomerID: item.CustomerID,
EmployeeID: item.EmployeeID
});
}
else if (target.hasClass("ship-country-link")) {
e.preventDefault();
Q.notifySuccess("Let's filter the grid to orders from " + item.ShipCountry);
var countryFilter = this.findQuickFilter(Serenity.LookupEditor,
Northwind.OrderRow.Fields.ShipCountry);
countryFilter.value = item.ShipCountry;
this.refresh();
}
}
/**
* This method is called for columns with [EditLink] attribute,
* but only for edit links of this grid's own item type.
* It is also called by Add Product button with a NULL entityOrId
* parameter so we should check that entityOrId is a string
* to be sure it is originating from a link.
*
* As we changed format for other columns, this will only be called
* for links in remaining OrderID column
*/
protected editItem(entityOrId) {
// check that this is an edit link click, not add button, ID is always a string
if (typeof entityOrId == "string") {
// convert ID to an integer, and find order with that ID
var item = this.view.getItemById(Q.toId(entityOrId));
// date is a ISO string, so need to parse it first
var date = Q.formatDate(item.OrderDate);
// ask for confirmation
Q.confirm(Q.format("You clicked edit link for order with ID: {0} and Date: {1}. Should i open that order?",
item.OrderID, date), () => {
new Northwind.OrderDialog().loadByIdAndOpenDialog(item.OrderID);
});
}
else {
super.editItem(entityOrId);
}
}
}
}