hide columns in grid kendo

Thread is closed for posting
14 posts, 0 answers
  1. Lerovi
    Lerovi avatar
    9 posts
    Member since:
    Jan 2012

    Posted 13 Mar 2012 Link to this post

    Good morning. I need to hide columns in grid kendo?
    as I can do that when grouping columns hide the column that is grouped? 

    thanks 
  2. Seaman
    Seaman avatar
    22 posts
    Member since:
    Nov 2011

    Posted 13 Mar 2012 Link to this post

    yes ,I also have such ideas,pls help.
  3. Kendo UI is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 14 Mar 2012 Link to this post

    Hello,

    Hiding columns in the Kendo Grid is still not supported via the API. I can tell you how it should be done theoretically, so that you can try implementing it with custom code:

    1. The corresponding <col> element should be removed from the DOM.
    2. A display:none style should be applied to all cells from that column.
    3. All related colspan attribute values (in the grouping rows) should be decremented by 1.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Dave Navarro
    Dave Navarro avatar
    150 posts
    Member since:
    Jul 2005

    Posted 16 Mar 2012 Link to this post

    Hello,

    I also have a need to hide a column or two. I'll try to setup the columns / cells that needs to be hidden by setting the style="display:none".

    Should we post this request in the 'wish list' for the grid?

    Please let me know and thanks!

    ~ Dave
  6. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 16 Mar 2012 Link to this post

    Hi Dave,

    We will surely implement column hiding in the Kendo Grid for some of the next releases, so posting requests about this is not required.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. somnadh
    somnadh avatar
    2 posts
    Member since:
    Jun 2012

    Posted 13 Jun 2012 Link to this post

    Hi Dimo,

    When do you think you will have this functionality available on the grids? Approximate release / timing?

    Regards
    Som
  8. Gerald
    Gerald avatar
    5 posts
    Member since:
    Jun 2012

    Posted 14 Jun 2012 Link to this post

    I struggled with this long enough until I discovered that as long as the "ID" is defined in the data source model it does not need to be defined in the columns setup. Here is my code snippet for my cols and data model. Hope this helps.

    $("#grid").kendoGrid({
        height: 300,
        columns: [
            { field: "fname", title: "First Name", width: "150px" },
            { field: "lname", title: "Last Name", width: "150px" },
            { field: "username", title: "User", width: "100px" },
            { field: "role", title: "Role", editor: roleDropDown },
            { command: "destroy", title: " ", width: "150px" }
        ],
        dataSource: {
        // CRUD Operations in here...
        },
        schema: {
            data: "d",
            model: { // define the model of the data source. Required for validation and property types.
                id: "ID",
                fields: {
                    ID: { editable: false, nullable: true },
                    fname: { editable: true, nullable: true },
                    lname: { validation: { required: true} },
                    username: { validation: { required: true} },
                    roleID: { editable: false, nullable: false },
                    role: { validation: { required: true }
                    }
                }
            }
        }
    });
  9. Dave Navarro
    Dave Navarro avatar
    150 posts
    Member since:
    Jul 2005

    Posted 14 Jun 2012 Link to this post

    Hello Gerald,

    Wouldn't we want to define the ID column so that we can hide it? I'm guessing here (I'll try it out later), but it seems like we should be able to define the ID column with the width set to: "0px"... and this would hide it?

    We could then have access to the data by field name but our users won't see the column?

    I'll give it a try.

    Thanks for posting!

    ~ Dave
  10. AkAlan
    AkAlan avatar
    121 posts
    Member since:
    Jun 2009

    Posted 28 Jun 2012 Link to this post

    I tried Geralds solution and it does just what I needed, that is not show the ID column to the user but still have access to the value. I was able to loop through the grid and alert out the ID

    <script>
          $(document).ready(function () {
              $("#btn").on("click", function () {
                  
                  var grid = $("#LineItems").data("kendoGrid");
                  var data = grid.dataSource.data();
                  $.each(data, function (i, item) {
                      alert(item.ID);
                      });
              });
          });
        </script>
  11. ANIL
    ANIL avatar
    11 posts
    Member since:
    Apr 2012

    Posted 29 Jun 2012 Link to this post

    Hi,

    I have a command column like as follows.

     { command: ["edit", "destroy", { text: "Reset", className: "Reset-button" }, { text: "Re-Register", className: "Re-Register-button"}], title: "&nbsp;", width: "420px"}],

    As you can see I have associated 4 buttons to the column.
    In the grid Data Bound event I want to show 2 buttons for some rows and 3 buttons for some rows and 4 buttons for some.


    Please let me know how can i achieve this in Data Bound event, I have already spent nights for this please help .

    Thanks
    Anil.  
  12. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 29 Jun 2012 Link to this post

    Hi Anil,

    In order to achieve the desired result, you need to iterate through the rows manually with DOM operations, check the cell values and hide selected buttons, according to your preference.

    If you need further assistance with this, please submit a new support ticket.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. ANIL
    ANIL avatar
    11 posts
    Member since:
    Apr 2012

    Posted 29 Jun 2012 Link to this post

    Hi,

    Can you please let me know how do i find the delete button from the cell object.

    Thanks
    Team Symantec.
  14. Scott
    Scott avatar
    1 posts
    Member since:
    Sep 2012

    Posted 12 Sep 2012 Link to this post

    I am doing what Gerald mentioned - storing ID in data source model, but not displaying it to the user in a field.  How do I access the ID of that particular row from the click event of a button in that row.

    { command: { text: "Manage Event", click: showDetails}, title: " Edit Event", width: "150px" }
     
               function showDetails(e) {
                   var dataItem = this.dataItem(dataItem.ID);
                   alert(dataItem);
               }


    I'm lost here as to how to get ID from the row that the click event came from , this is as close as I could get , I'm not too sure though
  15. Kai
    Kai avatar
    25 posts
    Member since:
    Jul 2012

    Posted 13 Sep 2012 Link to this post

    This worked for me: 
    .HtmlAttributes( new {@style= "display:none"})
Back to Top
Kendo UI is VS 2017 Ready