DevExpress ASPxGridView CommandColumn Built-in and Custom Button Sort Order Solution

DevExpress provides a number of useful controls that I've used for a variety of projects. I recently encountered an annoyance with the ASPxGridView controls Command Column. The Command Column provides a fixed set of out of the box buttons (Edit, New, Delete, Select) and the ability to specify custom buttons.

In my example below I am using the built-in Delete button, displayed first, and four custom buttons, one of which, displayed second, triggers navigation to a custom editor page. There isn't a way to change this ordering due to DevExpresses implementation of the command column ordering.

Buttons are rendered in the fixed order (Edit, New, Delete, Select, [Custom]) within DevExpress's code, GridViewTableCommandCell.CreateControlHierarchy(). This is fine if you use all of the built-in features of the DevExpress control however if you were to provide a custom button(s) as I have, it's not possible server side to force a custom button to be displayed before or intermingled with a built-in button.

The solution is to handle this client side with a jQuery function. There are many possible ways to go about sorting the command column but I wanted to just ensure that if the default delete button was used it would always display last in the command column.

$('td.dxgvCommandColumn').each(function() {
    var buttons = $(this).find('img.dxgvCommandColumnItem');
    
    if (buttons.length > 0) {
        var lastItem = buttons.last();
        $(this).find('img.dxgvCommandColumnItem[title=Remove]').insertAfter(lastItem);
    }
});

The command column is rendered for each row in the grid within a table cell with the class "dxgvCommandColumn". This script iterates over each of the command cells in the grid and finds the last button in the default rendered order. Command buttons are rendered as img tags with the class "dxgvCommandColumnItem". It then finds the delete command button using the title within the selector and moves it to after what was the last button. The end result looks like this:

Happy Coding!!