Telerik RadListBox onClientTransferred not firing with disabled items selected and transferred, workaround

Was running into an issue when selecting disabled items with a telerik radListBox.

Normally you would not be able to select disabled items with the radListBox, but there is a known bug that allows you to do so by holding shift and selecting disabled items along with enabled items. This is documented here http://www.telerik.com/community/forums/aspnet-ajax/listbox/able-to-select-disabled-items.aspx.

The specific issue was that by selecting disabled items, and transferring them to a new listbox, the onClientTransferred event for the grid was not firing. This same issue is brought up by someone here: http://www.telerik.com/community/forums/aspnet-ajax/listbox/disabling-item-in-radlistbox—onclienttransferred-not-firing-correctly.aspx

We needed to take advantage of this onClientTransferred event to run a javascript function that was responsible for synching a dropdown list with our radListBox via clientside code. We needed it to run anytime a transfer was completed, and so these 2 issues above were causing us some problems.

There was no solution presented, but with the help of a coworker we came up with something ourselves, solution to follow:

The javascript function we wanted called on the onClientTransferred was updateOrderbyDropDown(), the contents of the function are not really relevant to this post, but simply that it needs to be called after ever client transfer on this grid.

My coworker instructed me that we could wrap the radListBox Javascript function we wanted called, so that it was called after every transfer on this radListBox.  We needed to find a function that we could use and after some investigation we discovered there was a function called Transfer, with 6 parameters, that was called by the radListBox after every transfer. We discovered this Transfer function with the help of firebug and its script panel. We decided that this function would fit our needs.

The first thing we needed to do was to wrap the Transfer(n,j,o,l,p,g) function we wanted. This was accomplished by calling our pageLoad() function (shown below) in either document load or ready.  We created a function called overrideListboxTransferFunction(n,j,o,l,p,g) that used the exact same signature as the Transfer(n,j,o,l,p,g) function we wanted to wrap. The function looks like this:

function pageLoad() {

    var toListBox = $find(selectedColumnListBoxClientID);
    var fromListBox = $find(availableColumnListBoxClientID);

    //proxy the onItemSelected methods of both lisboxes, so we can apply custom logic to the transfer buttons
    fromListBox._transfer = wrap(fromListBox._transfer, null, overrideListboxTransferFunction, fromListBox);
}

The wrap function we used, is referenced from a stack overflow article here:
http://stackoverflow.com/questions/5258829/wrapping-a-function-in-javascript-jqueryand it looks like this:

var wrap = function (functionToWrap, before, after, thisObject) {
    return function () {
        var args = Array.prototype.slice.call(arguments),
            result;
        if (before) before.apply(thisObject || this, args);
        result = functionToWrap.apply(thisObject || this, args);
        if (after) after.apply(thisObject || this, args);
        return result;
    };
};

Now we just need to implement “our version of the transfer function. As you can see from abovewe called it overrideListboxTransferFunction(n, j, o, l, p, g) with 6 parameters. It isimportant that the number of parameters match the underlying telerik javascript functions signature like so:

function overrideListboxTransferFunction(n, j, o, l, p, g) {
    updateOrderbyDropDown();
}

So by wrapping this transfer function, so that our “customized version of it is called after
every single call to the original. We were able to solve our issue. updateOrderbyDropDown() is now able to be called on every
transfer. Regardless of if onClientTransferred is called or not.