Dynamically show or hide columns in Kendo Grid

11 posts, 0 answers
  1. Khushali
    Khushali avatar
    41 posts
    Member since:
    Jan 2012

    Posted 16 Mar 2012 Link to this post

    Hi,

    I have a kendo grid, and there is a button on click of which i need to hide some of the columns. And on click of other button same columns which were hidden, needs to be shown again. Found in some forums that it can be achieved by changing the column definition but that does not seem to be a good approach. Please help.

    Regards,
    Khushali
  2.
  3. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 16 Mar 2012 Link to this post

    Hello Khushali,

    The Kendo Grid does not implement API for showing/hiding column yet. However the algorithm for this is quite simple:
     - hide the header for given column, i.e th element
     - hide the corresponding td elements
     - remove the col element for the column in question

    We will provide API and UI for this functionality at some point, but at the moment I cannot be more concrete. You can keep track of our road map of what's been committed for next official release and also vote in your user voice.

    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Khushali
    Khushali avatar
    41 posts
    Member since:
    Jan 2012

    Posted 16 Mar 2012 Link to this post

    Thanks Nikolay, that works fine.
  7. Atul
    Atul avatar
    3 posts
    Member since:
    Jun 2012

    Posted 15 Jun 2012 Link to this post

    Hello,

     Can you please give code how to hide Header and hide vertical lines in grid

    Thanks,
    Atul
  8.
  9. Khushali
    Khushali avatar
    41 posts
    Member since:
    Jan 2012

    Posted 18 Jun 2012 Link to this post

    Hi,

    I am right now hiding and showing the columns using "td" elements. But, now my grid is editable. So, the columns that i was hiding, appears on click of edit, delete, update and cancel. Kendo has events for edit, save and remove where i can add my logic to hide these columns again. But on click of cancel button i am not able to hide these columns as there is no such event. I tried to hide on click of cancel button, but could not. Please suggest, how can i achieve this.

    Regards,
    Khushali
  11. Manik
    Manik avatar
    3 posts
    Member since:
    Jun 2012

    Posted 22 Jun 2012 Link to this post

    Hi,

    Is this feature to hide/show columns is implemented yet?

    Thanks,
    Manik
  13. Logan
    Logan avatar
    57 posts
    Member since:
    Apr 2013

    Posted 12 Jul 2013 Link to this post

    Has this feature been implemented yet?
  14.
  15. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 15 Jul 2013 Link to this post

    Hello guys,

    This is already supported codelessly via the column menu available in the grid. See this online example for reference.

    Additionally, you can utilize the showColumn method from the client API for the same purpose.

    Best regards,
    Sebastian
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Logan
    Logan avatar
    57 posts
    Member since:
    Apr 2013

    Posted 15 Jul 2013 Link to this post

    I was not able to use the Column Menu for this purpose, because I needed to dynamically show/hide columns from a grid in a detailed template based on the data from the parent grid row.   The user also needed to be able to edit the sub grid without seeing any removed columns.

    Using the hideColumn method triggered from the DataBound event on grid looks like it will do what I want.

    Thanks,
    ~Logan

    @(
    Html.Kendo().Grid<Employee>()
    .Name("Grid")
    .Columns(columns =>
    {
    columns.Bound(p => p.EmployeeID).Groupable(false);
    columns.Bound(p => p.FirstName);
    columns.Bound(p => p.LastName);
    columns.Bound(p => p.City);
    columns.Bound(p => p.Country);
    columns.Bound(p => p.Title);
    })
    // .ClientDetailTemplateId("template")
    .Editable(e=>e.Mode(GridEditMode.InCell))
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(p => p.EmployeeID))
    .Read(read => read.Action("Employees_Read", "Home"))
    .Update(update=>update.Action("Employees_Update","Home"))
    )
    .Events(e=>e.DataBound("remoteColumns()"))
    )

    <script>
    function remoteColumns() {
    // $('#Grid th:nth-child(1), #Grid td:nth-child(1)').remove();  This will remove the row, but will cause problems with in-line/cell editing
    this.hideColumn(0);
    }
    </script>
  19. Houssam
    Houssam avatar
    1 posts
    Member since:
    Jun 2014

    Posted 19 Aug 2014 Link to this post

    Please use Hidden("Condition") as showColumn and hideCOlumn will cause the grid layout to break
  20.
  21. Tom
    Tom avatar
    10 posts
    Member since:
    Sep 2017

    Posted 27 Nov 2017 Link to this post

    Thanks Houssam. Best answer out the lot and you aren't even an admin.

    .Hidden(!Model.IsSomethingVisible);

Back to Top