Extending GridBuilder and putting default columns at the END of the column list

[DominionZA]

Hey peeps,

I am a bit stuck on this problem.
I have a ton of maintenance CRUD views that I am implementing in my project. I use convention to ensure I am consistent with naming of repo's, views, editors, etc... and using this to simplify the building of my grids with editor templates etc...
I have created an HtmlHelper extension that returns a GridBuilder<T> so that I can keep the building of the grids for my CRUD views uniform and consistent - and give me a single place to make changes if necessary.
All my grids will show a CreatedOn column and a Commands column with Edit and Destroy buttons. I cannot figure out a way to get these columns to ALWAYS be at the END of the column list. All works hundreds with the creation of the grid but these 2 columns are always FIRST in the list and I don't want them to be.

Here is a simple example.
First the extension I have created. Note the 2 columns created here which will display in all views that use this grid.

public static class HtmlHelperExtensions
    {
        public static GridBuilder<T> SavitarCRUDGrid<T>(this HtmlHelper helper, string name)
            where T : class, IEntity
        {
            string entityType = typeof(T).ToString();
            int index = entityType.LastIndexOf('.');
            entityType = entityType.Substring(index + 1, entityType.Length - (index + 1));

            return helper.Kendo().Grid<T>()
                        .Name(name)
                        .Groupable()
                        .Pageable()
                        .Sortable()
                        .Scrollable()
                        .Filterable()
                        .Pageable()
                        .Selectable(e => e.Mode(GridSelectionMode.Single))
                        .ToolBar(toolbar => toolbar.Create())
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.CreatedOn).Width(100).Format("{0:dd/MM/yyyy}");
                            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(170);
                        })
                        .Editable(editor => editor
                            .Mode(GridEditMode.PopUp)
                            .Window(window => window
                                .Name("EditorWindow")
                                .Title("Smartrail Editor")
                                .Visible(false)
                                .Modal(true)
                                .Width(475)

                                .Render()
                            )
                            .TemplateName(entityType + "Editor")
                        )
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(20)
                            .Model(model => model.Id(p => p.ObjectId))
                            .Events(events => events.Error("onError"))
                            .Create(x => x.Action("Editor_Create", entityType))
                            .Read(x => x.Action("Editor_Read", entityType))
                            .Update(x => x.Action("Editor_Update", entityType))
                            .Destroy(x => x.Action("Editor_Destroy", entityType))
                            .ServerOperation(false));
        }
    }

And here is the usage in my EditorTemplate.

@(Html.SavitarCRUDGrid<ReefType>("Grid1")
        .BindTo(Model)
        .Columns(columns =>
                       {
                           columns.Bound(p => p.Description);
                       })
    )

This works perfectly, except the order of the columns in the grid is
Created On, Commands, Description
I am trying to get CreatedOn and Commands to the end so my grid renders as
Description, Created On, Commands.

Any ideas?

TIA
Mike

[Daniel]

Hello Mike,

The column factory uses the Add method so the columns will be added in the order the column builders are used. In order to always add the columns at the end you could create a custom extension for the GridBuilder that is used after the columns in the Grid configuration are added:

public static class Extensions
{
    public static GridBuilder<T> AddDefaultOptions<T>(this GridBuilder<T> builder) where T: class
    {
        //add options
        return builder;
    }
}

@(Html.SavitarCRUDGrid<ReefType>("Grid1")
    .BindTo(Model)
    .Columns(columns =>
           {
               columns.Bound(p => p.Description);
           })
   .AddDefaultOptions()
)

An alternative is to get the component via the ToComponent method after all columns are added and reorder the columns as needed.

Kind regards,
Daniel
the Telerik team

[DominionZA]

Works great. Dunno why I never thought of this myself. Perfect.
Thanks Daniel.