Dynamically show or hide columns in Kendo Grid

13 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
    61 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
    61 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);

  23. srisaigowtham
    srisaigowtham avatar
    1 posts
    Member since:
    Dec 2020

    Posted 19 Jan in reply to Nikolay Rusev Link to this post

    Hi Rusev,

    I have the same functionality to achieve. But in my case I want to insert a new column whenever the user click on a button dynamically and be able to remove it dynamically. Please suggest if there is a possibleway.

    Thanks,

    Gowtham.

  25. Nikolay
    Admin
    Nikolay avatar
    323 posts

    Posted 22 Jan Link to this post

    Hello Gowtham,

    The column collection could be changed only by re-initializing the Grid widget through the "setOptions" method or by destroying and initializing it from scratch.

    var oldOptions = grid.getOptions();
oldOptions.columns = getMyNewColumns();
grid.setOptions(oldOptions);

    The setOptions() method in action can be observed in the following Persist state Grid demo:

    Let me know if you have any questions.

    Regards,
    Nikolay
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  26.
Back to Top