This is a migrated thread and some comments may be shown as answers.

hide columns in grid kendo

13 Answers 1818 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Lerovi
Top achievements
Rank 1
Lerovi asked on 13 Mar 2012, 03:55 PM
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 

13 Answers, 1 is accepted

Sort by
0
Seaman
Top achievements
Rank 1
answered on 14 Mar 2012, 02:44 AM
yes ,I also have such ideas,pls help.
0
Dimo
Telerik team
answered on 14 Mar 2012, 09:22 AM
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!
0
Dave Navarro
Top achievements
Rank 2
answered on 16 Mar 2012, 09:10 AM
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
0
Dimo
Telerik team
answered on 16 Mar 2012, 09:21 AM
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!
0
somnadh
Top achievements
Rank 1
answered on 13 Jun 2012, 11:12 PM
Hi Dimo,

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

Regards
Som
0
Gerald
Top achievements
Rank 2
answered on 14 Jun 2012, 07:25 PM
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 }
                }
            }
        }
    }
});
0
Dave Navarro
Top achievements
Rank 2
answered on 14 Jun 2012, 09:10 PM
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
0
AkAlan
Top achievements
Rank 2
answered on 28 Jun 2012, 05:06 PM

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>
0
ANIL
Top achievements
Rank 1
answered on 29 Jun 2012, 09:22 AM
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.  
0
Dimo
Telerik team
answered on 29 Jun 2012, 11:10 AM
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!
0
ANIL
Top achievements
Rank 1
answered on 29 Jun 2012, 03:05 PM
Hi,

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

Thanks
Team Symantec.
0
Scott
Top achievements
Rank 1
answered on 12 Sep 2012, 05:28 PM
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
0
Kai
Top achievements
Rank 1
answered on 13 Sep 2012, 04:38 PM
This worked for me: 
.HtmlAttributes( new {@style= "display:none"})
Tags
Grid
Asked by
Lerovi
Top achievements
Rank 1
Answers by
Seaman
Top achievements
Rank 1
Dimo
Telerik team
Dave Navarro
Top achievements
Rank 2
somnadh
Top achievements
Rank 1
Gerald
Top achievements
Rank 2
AkAlan
Top achievements
Rank 2
ANIL
Top achievements
Rank 1
Scott
Top achievements
Rank 1
Kai
Top achievements
Rank 1
Share this question
or