Set specifics columns DINAMICALLY in a Kendo Grid helper

3 posts, 1 answers
  1. Answer
    Ivan
    Ivan avatar
    2 posts
    Member since:
    May 2013

    Posted 13 Jun 2013 Link to this post

    Hi,
    I implemented Kendo Grid helper in a MVC 4 with WebApi application, but I don't know how can I set de column list to change dinamically the rows that it shows. I don't want put all columns, only a list of columns pre-selects by diferents criterials (user config preferences).

    My Helper code:

    @(Html.Kendo().Grid<Bitacora.WebUI.Models.WhiteBoard.XXXGridModel>()
                .Name("Grid")
                .AutoBind(true)
                .EnableCustomBinding(true)
                //.BindTo(Model.xxxx.YYYList)
                .Columns(c =>
                {
                    c.AutoGenerate(column =>
                    {
                        //customize autogenereted column's settings                                                    
                        column.Width = "150px";
                        
                        //column.ClientTemplate = "<input type='checkbox' name='checkbox' />";

                    });
                })
                .Scrollable(scrolling => scrolling.Enabled(true).Height("auto"))
                .Resizable(x => x.Columns(true))
                .Events(events => events.Change("searchCalls"))
                .DataSource(dataSource => dataSource
                                                    .Ajax()
                                                    .Read(read => read
                                                       .Action("Search", "api/ActionApi")
                                                       .Data("getFiltersSelected")
                                                       .Type(HttpVerbs.Post))
                                                       .ServerOperation(true)) // Paging, sorting, filtering and grouping will be done server-side  
                                                    //.ColumnMenu()
                                                    .Selectable(selectable => selectable
                                                        .Mode(GridSelectionMode.Multiple))
                                                    .Reorderable(reorder => reorder.Columns(true))
                                                    .Groupable(grouping => grouping.Enabled(true))
                                                    .Filterable(filterable => {filterable
                                                                                .Operators(operators => 
                                                                                            {operators.ForString(strFilter => strFilter.Clear().Contains("contains"));
                                                                                                operators.ForNumber(strFilter => strFilter.Clear());
                                                                                            });
                                                                                filterable.Extra(false);
                                                                }) //--> sólo se muestra el contains en las columnas Texto
                .Sortable(s=> s
                    .SortMode(Kendo.Mvc.UI.GridSortMode.MultipleColumn)
                    .AllowUnsort(true))
                .Pageable(pager => pager
                    .Enabled(true)
                    .Input(true)
                    .PageSizes(new [] { 5, 10, 20, 30, 40, 50 })) // MULTIDIOMA RESOURCES


    My Model:

     public class XXXGridModel
        {
            [Display(Name = "Id", ResourceType = typeof(WhiteBoardGridVMResource))]
            public int Id { get; set; }
             [Display(Name = "DateCreated", ResourceType = typeof(WhiteBoardGridVMResource))]
            public DateTime DateCreated { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public string CallNumber { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public string FileNumber { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public string DUE { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public int IdBranchOffice { get; set; }
             [Display(Name = "BranchOfficeName", ResourceType = typeof(WhiteBoardGridVMResource))]
            public string BranchOfficeOfficeName { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public int IdCompany { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public string CompanyCompanyName { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public int IdOffice { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public string OfficeOfficeName { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public int IdShip { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public string ShipShipName { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public int IdPort { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public string PortPortName { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public int IdCallStatus { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public string CallStatusStatusName { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public int? IdOwner { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public string OwnerThirdPartyName { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public int? IdOperator { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public string OperatorThirdPartyName { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public int? IdInductor { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public string InductorThirdPartyName { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public bool IsNominatorOwner { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public bool IsNominatorOperator { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public bool IsNominatorInductor { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public int IdCreatedBy { get; set; }
            [Display(Name = "Default", ResourceType = typeof(WhiteBoardGridVMResource))]
            public string CreatedByUserName { get; set; }
            }

    Anyone can Help me?!
    Thanks in advance
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 17 Jun 2013 Link to this post

    Hello Ivan,

    The Grid does not support adding columns dynamically to the Grid. You can define all the column and hide most of them. This way the user can later make them visible by using the column menu.

    http://demos.kendoui.com/web/grid/column-menu.html


    Kind Regards,
    Petur Subev
    Telerik
    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. balazs
    balazs avatar
    13 posts
    Member since:
    Dec 2014

    Posted 24 Sep 2015 in reply to Petur Subev Link to this post

    Hi Ivan,

     

    There are 2 solutions:

    a) take the .NET class, use reflection and generate javascript array to customize columns which then you render in razor

    b) or simply use reclection and get MemberType property from the column parameter / c.AutogenerateColumn(column => /

    Hope this helps.

     

    I also do not like the idea to define each column manually :D Hope this help.

Back to Top