The BindingManager is a global object that manages custom bindings for LEADVIEW.
LEADVIEW's BindingManager contains a simple set of API methods that allows users to bind custom functionality to existing LEADVIEW components. Bindings should be set in the manager before calling Viewer.run.
Note: Changing the binding for a UI component does not affect the component's state. For instance, binding the Previous Page Button
will not prevent the button from becoming disabled if there is no previous page in the view.
export class BindingManagerExample {
public constructor() {
if (lt.RasterSupport.kernelExpired)
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null);
this.rebind();
}
public run = (divID: string): void => {
const lv = new lt.LEADVIEW.Viewer();
lv.run(null, {
'rootDivId': divID
});
}
public rebind = () => {
/**
* The BindingManager handles overwriting any default LEADVIEW button functionality.
* We recommend that you setup bindings before calling LEADVIEW.run();
*/
const manager = lt.LEADVIEW.BindingManager.Instance;
/**
* The binding contract to apply to one of LEADVIEW's components.
*/
const binding: lt.LEADVIEW.LVBinding = {
onClick: () => alert('Custom Click!'),
tooltip: 'Custom Tooltip!',
class: 'lv-custom-class'
};
/**
* A full list of all keys available for binding can be retrieved by calling
* BindingManager.getAllAvailableKeys(). This will return an array of all available keys.
* To check and see if a key is supported in LEADVIEW, just call BindingManager.isSupported().
*
* Any string key value can be set in the manager, but the key will only be consumed internally by LEADVIEW
* if isSupported = true.
*
* For the purposes of this example, we will just loop through every available key, and apply our custom binding.
*/
manager.getAllAvailableKeys().forEach(key => {
if(!manager.isSupported(key)) return;
manager.add(key, binding, true);
});
}
}