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

3 posts, 1 answers
  1. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 28 Mar 2013 Link to this post

    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
  2. Answer
    Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 01 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 02 Apr 2013 Link to this post

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