Client-side API

Alongside the server-side Razor component it is also possible to interact with the client-side instance of the JavaScript object using the client-side API. Typically you will need to use the OnInitialized event to save a reference to the client-side control to that you can reference it in subsequent cliebnt-side API calls

Methods

columnIndex(string)

This method will return the cell index for the supplied column name.

...

productsGrid.Bind(EventType.OnRowTransform, "highlightOrderLevels");

...

function highlightOrderLevels(sender, args)

{

var unitsInStock = parseInt(sender.columnValue("UnitsInStock",args.row));

var reorderLevel = parseInt(sender.columnValue("ReorderLevel",args.row));

if (unitsInStock < reorderLevel) {

$(args.row).css("backgroundColor", "#F2D7D5").css("color", "#CD6155");

$(args.row.cells[sender.columnIndex("UnitsInStock")]).css("backgroundColor", "#CD6155").css("color", "#F2D7D5");

$(args.row.cells[sender.columnIndex("ReorderLevel")]).css("backgroundColor", "#CD6155").css("color", "#F2D7D5");

}

</script>

Demo

columnValue(string, HTMLTableRowElement)

This method will return the value for a column name for the supplied HTML row (or if not supplied the currently selected row)

...

ordersGrid.Bind(EventType.OnRowSelected, "setOrderDetailsTabLabel");

...

customersGrid.Bind(EventType.OnRowSelected, "setOrderTabLabel");

...

function setOrderTabLabel(grid, args) {

$("button#orders-tab").html("<b>" + grid.columnValue("companyname", args.row) + "</b> orders")

}

function setOrderDetailsTabLabel(grid, args) {

$("button#orderdetails-tab").html("Order <b>" + grid.columnValue("orderId", args.row) + "</b> details")

}

</script>

Demo

selectedRow()

This method will return a reference to the currently selected row (HTMLTableRowElement)

selectedRows()

This method will return an array of the HTML table rows (HTMLTableRowElement) that have been selected

...

customersGrid.Bind(EventType.OnInitialized, "saveGridReference");

...

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

viewElement(string)

This method will return the HTML element containing the column value in the view dialog and can be used to customise the presentation of the value.

...

employeesGrid.Bind(EventType.OnViewRecordSelected, "configureNotesElement");

...

function configureNotesElement(grid, args) {

$(grid.viewElement("notes")).width(200).height(100).css("overflow","auto");

}

</script>

Demo