Custom Renderers and Custom Editors

Lianja provides the ability to specify custom renderers and custom editors for Grid and Form section cells.

In the example below there are two of the grid columns (the Chart and the Employee Details columns) that have a Custom Renderer and one (the Employee Details column) that also has a Custom Editor.

Cell Renderer

You can customise what is displayed inside the grid cells by specifying a Display delegate in the Custom Delegates for the grid columns of a Grid Section or the FormItem of a Form Section.

When the display delegate is called, the record for that particular grid row is active so you can generate dynamic content in the context of that record.

Example code from the example_smartgrid App

////////////////////////////////////////////////////////////////
// Custom display for column 'section1.column5'
function page1_section1_column5_customdisplay(controlsource, row, col)
{
	var grid = Lianja.get("page1.section1").grid;
	var employees = Lianja.getCursor("employees");
	dcont = createObject("dcont", "container");
	dcont.layout = "H";
	dcont.margin = 1;
	dcont.backcolor = "white";
	dcont.border = 1;
	dcont.bordercolor = "lightgray";
	dcont.raisedshadow = true;
	dcont.addObject("leftdcont", "container");
	leftdcont.layout = "V";
	leftdcont.addObject("labtitle", "label");
	labtitle.fixedheight = 20;
	labtitle.caption = "EMPLOYEE DETAILS";  
	labtitle.backcolor = "lightgray";
	labtitle.alignment = "center";
	leftdcont.addObject("lab", "label"); 
	lab.alignment = "center";
	lab.forecolor = "gray";
	lab.backcolor = "white";
	lab.fontbold = 1;
	lab.text = 	"<h3>" + employees.getData("titleofcourtesy") + " " + 
				employees.getData("firstname") + " " + 
				employees.getData("lastname") + "</h3>" +
				"<br>" + 
				employees.getData("address") + 
				"<br>" + 
				employees.getData("city") + 
				"<br>" + 
				employees.getData("region") + 
				"<br>" + 
				employees.getData("postalcode") + 
				"<br>" + 
				employees.getData("country") + 
				"<br>" +
				"Tel# " + employees.getData("homephone") +
				"<br>";
	lab.margin = 25;
	leftdcont.addObject("editbtncont", "container");
	editbtncont.layout = "H";
	editbtncont.backcolor = "white";
	editbtncont.addStretch();
	editbtncont.addObject("editbtn", "commandbutton");
	dcont.setItem("editbtn", editbtn);
	editbtn.setItem("dcont", dcont);
	editbtn.setItem("row", row);
	editbtn.setItem("col", col);
	editbtncont.fixedheight = 45;
	editbtncont.addStretch();
	editbtn.alignment = "center";
	editbtn.fixedwidth = 80;
	editbtn.caption = "EDIT";
	editbtn.stylesheet = "btn-success btn-sm";
	editbtn.click = function()
	{
		var row = this.getItem("row");
		var col = this.getItem("col");
		Lianja.get("page1.section1").grid.activateCell(row, col);
	};
	dcont.fixedheight = 254;
	return dcont;
};

Pro Tip

You could create a timer in the display delegate that when it fires you could update the cell contents in real time when designing dashboards.

Cell Editor

You can customise what is rendered inside the grid cells when editing by specifying an Editor delegate in the Custom Delegates for the grid columns of a SmartGrid or the FormItem cell of a FormGrid.

As with the display delegate, when the editor delegate is called, the record for that particular grid row is active so you can generate dynamic content in the context of that record. This is typically used to render a form dynamically.

Example code from the example_smartgrid App

////////////////////////////////////////////////////////////////
// Custom editor for column 'section1.column5'
function page1_section1_column5_customeditor(controlsource,row,col) 
{
	var employees = Lianja.getCursor("employees");
	econt = createObject("econt","container");
	econt.layout = "Form";	
	econt.addRow("", "formheading", "label");
	formheading.caption = "EDIT EMPLOYEE DETAILS";
	formheading.fontsize = 12;
	formheading.alignment = "center";
	formheading.backcolor = "lightslategray";
	formheading.forecolor = "white";
	econt.addRow("First Name:", "firstname", "textbox");
	firstname.controlsource = "employees.firstname";
	econt.addRow("Last Name:", "lastname", "textbox");
	lastname.controlsource = "employees.lastname";
	econt.addRow("Address:", "address", "textbox");
	address.controlsource = "employees.address";
	econt.addRow("City:", "city", "textbox");
	city.controlsource = "employees.city";
	econt.addRow("Region:", "region", "textbox"); 
	region.controlsource = "employees.region";
	econt.addRow("Postcode:", "postalcode", "textbox");
	postalcode.controlsource = "employees.postalcode";
	econt.addRow("Country:", "country", "textbox");
	country.controlsource = "employees.country";
	econt.backcolor = "lightgray";
	econt.addRow("", "buttons", "container");
	buttons.backcolor = "lightgray";
	buttons.layout = "Horizontal";
	buttons.spacing = 5;
	buttons.addObject("cancelbtn", "commandbutton"); 
	cancelbtn.caption = "Cancel";
	cancelbtn.stylesheet = "btn btn-sm btn-block btn-default";
	cancelbtn.click = function()
	{
		Lianja.get("page1.section1").grid.cancel();
	};
	buttons.addObject("savebtn", "commandbutton");
	savebtn.caption = "Save";
	savebtn.stylesheet = "btn btn-sm btn-block btn-default";
	savebtn.click = function()
	{
		Lianja.get("page1.section1").grid.save();
	};
	buttons.minheight = 34;
	econt.fixedheight = 254;
	return econt;
};