Adjusting Shield UI Grid columns sequence

Question

After doing some research I seem to be unable to solve a problem with a Shield UI Grid control. I want to be able to allow users to place columns in a order of their choice. I have similar orders like the code below:

$(function () {
    $("#grid").shieldGrid({
        dataSource: {
            data: products
        },
        columns: [
            "ProductName",
            { field: "['Category']['CategoryName']", title: "CategoryName", format: "{0:c}", width: "330px" },
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
            { field: "Discontinued", width: "130px" }
        ]
    });
});

And after I didn't find the solution I placed some additional controls on the page to display the columns sequence, but this doesn't liik quite the way I want. Is there a way to dynamically change places of the grid columns?

Answer 1

As a matter of fact the solution is quite simple. The Shield UI Grid control supports dynamical column reordering. All you need is to include the columnReorder property set to true in your code:

columnReorder: true,

In addition to that there is no need to use additional controls. Using drag and drop users can just drag the column and place it in the desired position.