While doing a code review this week, the developer asked me if we could refactor some TypeScript. Basically take some repetitive client side code, pop it into a new file and make it easier to implement elsewhere. The project is using the powerful DevExpress ASPxGridView control in a lot of places (multiple controls on a page and multiple pages) and in batch edit mode. The users wanted the ‘Save / Cancel’ panel to be at the top of the screen instead of the default location in the grid footer. Simple enough process, we can create a user control to handle a couple of nicely themed ASPxButtons, link to a helper class for the common work on the grid and we should be done.
First we take a look at the original markup, the client side client event is being wired to a TypeScript method
Inside the TypeScript file, the method was doing some checks and calling another method on the grid control, gvTemplates.UpdateEdit(); This is where the repetition was, each grid had its own ‘save’ method.
helper.saveGrid = function ( ) {
gvTemplates.UpdateEdit();
}
In order to optimise the code, we have to pass in the name of the grid being edited, then find the grid in the DOM and execute the method on it.
The first part was to update the markup to call to the helper class
The key difference here is the introduction of the brackets into the assignment, we are no longer just pointing the click event to our TypeScript method, but actually executing it, which is bad. This is where the closure comes in. For more information about closures I suggest you read the following article from Julian Bucknall.
For our needs, the code should look something like this
helper.saveGrid = function (gridId: string) {
return function (s, e) {
var grid: ASPxClientGridView = ASPxClientControl.GetControlCollection().GetByName(gridId);
grid.UpdateEdit();
}
}
The ‘gridId’ parameter is going to contain the grid’s client side ID, the saveGrid() method then returns a function that is passed back to the click event handler on the button. There are a few cool things going on with the new code. Firstly (and this is where you can come unstuck very quickly) is the use of the parameter that is passed in. The inner function can use the value from the outer function. The second thing to note is the nice helper class provided by DevExpress to get access to the control, so you don’t need to go searching through the DOM. Code cleaned, duplication removed and a much nicer way to handle calls from multiple controls and/or pages.
While this serves as a very quick tutorial on being able to call common methods, I really want to highlight a) the power of the closure, b) the frustration they can cause to JavaScript / TypeScript beginners.
For more detailed information on closures and best practices please see these fantastic articles: