[Solved] how do you hide the Id column?

[Alexandre Jobin]

hi everyone!

i need to hide the first column who contain the id of the row. How do you do that?
presently, i set the Width to 0px, the title to string.empty and i turn off the sort and filter.
it seems to work great but with IE7 (and maybe others), i see that theres some space used but the hidden column. Maybe 1 or 2 px.

is there a better way to have the Id hidden?

alex

[Atanas Korchev]

Hello Alexandre Jobin,

You can either not define a column for the id or use its Visible(false) method:

columns.Add(c => c.Id).Visible(false);

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Alexandre Jobin]

if i use .Visible(false) for the Id column, it will not be rendered to the client.

i need to know the Id on the client side to do ajax. So i need to put the Id somewhere to retreive it with javascript.

[Atanas Korchev]

Hello Alexandre Jobin,

You can try this then:

columns.Add(c => c.Id).HeaderHtmlAttributes(new {style="display:none"}).HtmlAttributes(new {style="display:none"});

Greetings,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Alexandre Jobin]

it doesnt work for me. The second column get truncated and i dont know why.
what i would suggest to the dev team is to have a property on the grid to set the Id of the row without generating a column. Maybe the Id could be on the TR tag?

because on this post, someone was talking about a problem that when the ajax event add new rows, the hidden column was showed.

i think i would be a great addition to the grid!

[Atanas Korchev]

Hello Alexandre Jobin,

This is strange as it should have worked. I am sending you a sample project which shows the same approach. Could you be using an older version?

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Alexandre Jobin]

hi again!

sorry for the delay!

heres 2 screenshots of the problem that i have. Maybe you will understand something from them. The first one (ver1.jpg) is from this code, without the column Id and theres no hidden column:

... c.Add(a => a.Nom).Title("Abonnement");

c.Add(a => a.NomCategorie).Title("Catégorie").Width(95);

c.Add(a => a.NomStatut).Title("Statut").Width(85);

c.Add(a => a.NomFournisseur).Title("Fournisseur").Width(175);

c.Add(a => a.DateActivation).Title("Début").Format("{0:yyyy-MM-dd}").Width(80);

c.Add(a => a.DateDesactivation).Title("Fin").Format("{0:yyyy-MM-dd}").Width(80);

c.Add(a => a.Requisition).Title("Réquisition").Width(85); ...

the second one (ver2.jpg), i've added the Id column like this:

... c.Add(a => a.Id).HeaderHtmlAttributes(new { style = "display:none" }).HtmlAttributes(new { style = "display:none" });

c.Add(a => a.Nom).Title("Abonnement");

c.Add(a => a.NomCategorie).Title("Catégorie").Width(95);

c.Add(a => a.NomStatut).Title("Statut").Width(85);

c.Add(a => a.NomFournisseur).Title("Fournisseur").Width(175);

c.Add(a => a.DateActivation).Title("Début").Format("{0:yyyy-MM-dd}").Width(80);

c.Add(a => a.DateDesactivation).Title("Fin").Format("{0:yyyy-MM-dd}").Width(80);

c.Add(a => a.Requisition).Title("Réquisition").Width(85); ...

as you can see, the grid is not displayed like the first version like it should. The width of the colums have changed and i dont know why. So my workaround was to change the way the Id column was displayed and this is why i had a 1 or 2 px of the Id column displayed.

do you have any idea why i get this kind of result?

[Atanas Korchev]

Hello Alexandre Jobin,

Indeed there is a visual difference. However I think I found a workaround:

1. Remove the HtmlAttributes and HeaderHtmlAttributes from the first column
2. Handle the OnLoad event of the grid:
   .ClientEvents(events => events.OnLoad(() => {%>
                   function () {
                      $(this).find('colgroup').find('col:first').width(0);
                   }
               <% }))

Here is the complete code listing:

<% Html.Telerik().Grid(Model)
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Add(a => a.Id);
                //Rest of the columns
            })
            .ClientEvents(events => events.OnLoad(() => {%>
                function () {
                   $(this).find('colgroup').find('col:first').width(0);
                }
            <% }))
            .Scrollable()
            .Pageable()
            .Sortable()
            .Render();
     %>

Regards,
Atanas Korchev
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Alexandre Jobin]

is it possible, for a future version, to have something like this?:

c.Add(a => a.Id).Hidden;

i think it would offer a better way when you want to hide a column :)

keep the good work!!

alex

[Doug]

I wanted to second Alexandre's idea of a hidden method. It feels like a hack to have to hide the column using css and javascript post binding

[Atanas Korchev]

Hi,

I have logged this as a feature request. You can cast your vote here.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.