docs(grid): column reorder

Author: marin-bratanov

components/grid/columns/bound.md

@@ -18,13 +18,15 @@ They are added to the `GridColumns` tag and are of type `GridColumn`. You can us
 * `Title` - the text that is rendered in the column header.
 * `Editable` - you can set this property to `true` or `false` to allow or prevent [editing]({%slug components/grid/overview%}#editing) of this field. Defaults to `true`.
 * `Filterable` - you can set this to `false` so a [filterable]({%slug components/grid/filtering%}) grid will not let the user filter that particular column.
+* `Groupable` - whether the use can [group]({%slug components/grid/features/grouping%}) the grid by this column.
+* `Reorderable` - whether the user can [drag to reorder]({%slug components/grid/columns/reorder%}) this column.
 * `Width` - the width of the column. See the [Dimensions]({%slug common-features/dimensions%}) article. Keep in mind that these are columns in a `<table>`, so it is often a good practice to leave one column without explicit dimensions so it can accommodate the remaining width and changes to the container size.
 * `Template` - this property can also be used as an inner tag and it lets you define the [column display content]({%slug components/grid/features/templates%}#column-template). It can also point to a component name.
 * `Context` - the standard Blazor context variable name for use inside the inline template.
 * `ref` - the standard Blazor reference name.
 * `EditorTemplate` - this property can also be used as an inner tag and it lets you define the [column edit content]({%slug components/grid/features/templates%}#edit-template). It can also point to a component name.
 
-For an example of the column usage, see the [Grid Overview]({%slug components/grid/overview%}) article and the [examples repo](https://github.com/telerik/ui-for-blazor-examples/).
+For an example of the column usage, see the [Grid Overview]({%slug components/grid/overview%}), the rest of the documentation and our [live demos](https://demos.telerik.com/blazor-ui/grid/overview).
 
 ## See Also
 

components/grid/columns/images/column-reorder-preview.gif

@@ -0,0 +1,74 @@
+---
+title: Reorder
+page_title: Grid for Blazor | Reorder Columns
+description: Drag to reorder columns in the Grid for Blazor
+slug: components/grid/columns/reorder
+tags: telerik,blazor,grid,column,reorder,drag
+published: True
+position: 0
+---
+
+# Reorder Columns
+
+The Grid lets the user reorder its columns by dragging their headers.
+
+To enable the column reordering, set the `Reorderable` parameter of the grid to `true`.
+
+To prevent the user from moving a certain column, set its own parameter `Reordarable="false"`. Note that the user can still re-arrange other columns around it.
+
+>caption Enable column reordering in Telerik Grid
+
+````CSHTML
+@* Drag a column header between other columns to change the columns positions. You cannot drag the command column. Note that actual CRUD operations and settings are not implemented here for brevity. *@
+
+<TelerikGrid Data="@GridData"
+             Reorderable="true"
+             Pageable="true" PageSize="10" Sortable="true" Height="300px">
+    <GridColumns>
+        <GridColumn Field=@nameof(SampleData.Id) Title="Id" />
+        <GridColumn Field=@nameof(SampleData.Name) Title="First Name" />
+        <GridColumn Field=@nameof(SampleData.LastName) Title="Last Name" />
+        <GridCommandColumn Width="100px" Reorderable="false">
+            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
+            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
+            <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
+            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
+        </GridCommandColumn>
+    </GridColumns>
+</TelerikGrid>
+
+@code {
+    public List<SampleData> GridData { get; set; }
+
+    protected override void OnInitialized()
+    {
+        GridData = GetData();
+    }
+
+    private List<SampleData> GetData()
+    {
+        return Enumerable.Range(1, 50).Select(x => new SampleData
+        {
+            Id = x,
+            Name = $"name {x}",
+            LastName = $"Surname {x}"
+        }).ToList();
+    }
+
+    public class SampleData
+    {
+        public int Id { get; set; }
+        public string Name { get; set; }
+        public string LastName { get; set; }
+    }
+}
+````
+
+
+>caption How column reordering works in the Telerik grid
+
+![](images/column-reorder-preview.gif)
+
+## See Also
+
+  * [Live Demo: Column Reordering](https://demos.telerik.com/blazor-ui/grid/column-reordering)