[Solved] Hide column when grid is grouped by that column

[Dean]

Is there a way to hide a column when grid is grouped by that column?

[Saul]

Did you ever figure this one out. I am looking for a solution on how to do this as well

Thanks

[Dadv]

Look this

but there are some bugs...

Perhaps a Telerik admin will see my message  this time ?

[Saul]

I was looking to do this with AjaxBinding. I don't think you example will work for me.

Thanks for responding.

[John DeVight]

I have been developing extensions to the telerik client api and have an example of how you could accomplish this.  If you go to: http://www.aspnetwiki.com/page:extending-the-telerik-mvc-client-api and take a look at the ASPX or RAZOR sample applications, there is a Grid sample called "Hide Grouped Columns".  The example implements a handler for the OnDataBound client event.  In the handler calls my client api extension function, hideColumn().

Here is the grid declaration:

Html.Telerik().Grid<TelerikMvcClientApi.Models.WikiPage>()
    .Name("WikiPageGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Category);
        columns.Bound(c => c.Name);
        columns.Bound(c => c.Url);
        columns.Bound(c => c.PageViews);
        columns.Bound(c => c.UniquePageViews);
    })
    .DataBinding(dataBinding => dataBinding.Ajax().Select("SelectWikiPages", "Grid"))
    .Groupable()
    .ClientEvents(events => events.OnDataBound("onDataBound"))
    .Render();

Here is the JavaScript code:

<script type="text/javascript">
    onDataBound = function(e) {
        var grid = $('#WikiPageGrid').data('tGrid');
        grid.showAllColumnHeaders();
        var cnt = grid.groups.length;
        if (cnt > 0) {
            $.each(grid.groups, function(gdx, group) {
                var columnTitle = group.title;
                $.each(grid.columns, function(idx, col) {
                    if (col.title == columnTitle) {
                        grid.hideColumn(idx + cnt);
                    }
                });
            });
        }
    }
</script>

I'll modify my client api extensions to incorporate this so that you don't have to write all that javascript code.  I'll post when I am done =)

Regards,

John DeVight

[Henry]

Hi John,

It's really cool! Thanks for your job.

I cannot download the razor sample from the wiki, can you send it to me by email? [e-mail]

Another thing, I wonder if it is compatible with the latest telerik mvc internal build version.

Thanks!

Henry

[John DeVight]

Hi Henry,

I've attached the RAZOR sample to this post.  Here is a direct link to the RAZOR sample as well: http://www.aspnetwiki.com/local--files/page:extending-the-telerik-mvc-client-api/TelerikMvcAppClientApiRazor.zip

The client api extensions were developed against build: 2011.1.315

Regards,

John DeVight

[John DeVight]

I've modified my telerik.extensions.js file to make it easier to hide grouped columns by adding a function called hideGroupColumns().  To use the function, call it from the client onLoad event handler.

For example, here is the grid:

@{
    Html.Telerik().Grid<TelerikMvcClientApi.Models.WikiPage>()
        .Name("WikiPageGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Category);
            columns.Bound(c => c.Name);
            columns.Bound(c => c.Url);
            columns.Bound(c => c.PageViews);
            columns.Bound(c => c.UniquePageViews);
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Select("SelectWikiPages", "Grid"))
        .Groupable()
        .ClientEvents(events =>
            events.OnLoad("WikiPageGrid_onLoad")
        )
        .Render();
}

And here is the onLoad event handler:

<script type="text/javascript">
    WikiPageGrid_onLoad = function(e) {
        $(e.target).data('tGrid').hideGroupColumns();
    }
</script>

The latest version of telerik.extensions.js can be downloaded from http://telerikmvcextendedjs.codeplex.com/SourceControl/list/changesets, Change Set 8215.

[Henry]

Hi John,

Can you help to attach the latest sample (based on 8215) here? The website http://aspnet.wdfiles.com/ cannot be reached.

Thanks and Regards
Henry

[John DeVight]

Attached are the RAZOR and ASPX sample applications.

Regards,

John DeVight

[Saul]

Thanks for sharing. This works well. The only issue that I have is that I can not resize my other columns to use the space vacated by the hidden columns. I am left with blank space. Any ideas?

Thanks

[John DeVight]

Thank you!

I took a look at the resizing issue that you mentioned.  When I added ".Resizable(r => r.Columns(true))" to my grid, I saw that div's were created with a class='t-resize-handle'.  These div's are what the Telerik Grid appears to be using to allow the end user to resize columns.  My guess would be that I would need to adjust my code to take this into account and hide the appropriate "div.t-resize-handle" div's and adjust the position of the remaining "div.t-resize-handle" div's.  I'll look into it and post a response when I've figured something out.

Regards,

John DeVight

[Paulo de Tarso]

Hi.
Excelent, but when scrollbar is displayed does not work.

Tks

[Paulo de Tarso]

Hi,

I'm still expecting the answers...

Thanks
Paulo

[John DeVight]

Hi Paulo ,

I needed to make a correction to the hideColumn function in the telerik.extensions.js file.  I've attached the file to this post.  I need to see if I can come up with a solution for resizing the columns to use the empty space left by hiding the column.

Regards,

John DeVight

[Paulo de Tarso]

Hi, John.
Excelent job!!

Thank you very much

Paulo

[Paulo de Tarso]

Hi, John.
when the grid is grouped the remaining columns are shifted to the left side and the property column width not change.

Thank you for your attention

Paulo

[Paulo de Tarso]

anybody??

[John DeVight]

Hi Paulo,

I haven't been able to reproduce the problem that you are experiencing.  I could be a setting that you are using on the telerik grid that I haven't taken into consideration.  Can you post your code for declaring the grid?

Regards,

John DeVight

[John DeVight]

Hi Paulo,

I think I finally see the problem.  Are you defining .Scrollable() in your grid?  When that property is set, the grid header, contents and footer are placed into separate div's.  I'll see if I can work out a solution for this....

Regards,

John DeVight

[Paulo de Tarso]

Hi, John.
Tanks for your attention.

This is the Grid declaration

@{
    Html.Telerik().Grid<Integracao.Capi.Models.Data.Curso>("ModelCurso")
    .Name("grdCurso")
    .HtmlAttributes(new { style = "margin-left:auto; margin-top:auto; width: 760px;  font-family: Arial Helvetica, Sans-Serif;font-size: 12px; font-weight:bold; text-align:left; float:left; " })
    .Localizable("pt-BR")
    .DataKeys(key => key.Add(p => p.idTurma))
    .Columns(c =>
    {
        c.Bound(cl => cl.NomeCurso).Title("Curso").Width("34%").Filterable(false)
            .HeaderHtmlAttributes(new { style = "font-family: Arial Helvetica, Sans-Serif;font-size: 12px; text-align:center; font-weight:bold;" })
            .HtmlAttributes(new { style = "font-family: Arial Helvetica, Sans-Serif;font-size: 11px; font-weight:bold; text-align:left" })
            .Aggregate(aggregates => aggregates.Count())
            .ClientTemplate("<a href='javascript:fnCursoDetalheClick(<#=idTurma#>,<#=idMatricula#>);'> <#= NomeCurso #> </a>")
            .ClientGroupHeaderTemplate("<#= Title #>: <#= Key #> (Total: <#= Count#>)");

        c.Bound(cl => cl.Turma).Title("Turma").Width("25%").Filterable(false)
            .HeaderHtmlAttributes(new { style = "font-family: Arial Helvetica, Sans-Serif;font-size: 12px; text-align:center; font-weight:bold;" });

        c.Bound(cl => cl.idStatus).Title(".").Width("5%").Filterable(false)
            .HeaderTemplate(@<text><div class = "StatusDesempenho"></div></text>)
            .HeaderHtmlAttributes(new { style = "font-family: Arial Helvetica, Sans-Serif;font-size: 12px; text-align:center;font-weight:bold;" })
            .ClientTemplate("<div align=center><span class='status' title='<#= tituloStatus #>'> <img  width='16px' height='16px'  alt='<#= tituloStatus #>'  src='" + Url.Content("Content/Images/Status_") + "<#= idStatus #>.png'   /> </span> </div>");

        c.Bound(cl => cl.Finaliza).Title("Fim").Width("6%").Filterable(false)
            .HeaderHtmlAttributes(new { style = "font-family: Arial Helvetica, Sans-Serif;font-size: 12px; text-align:center;font-weight:bold" })
            .HtmlAttributes(new { style = "text-align:center" });

        c.Bound(cl => cl.DataTermino).Title("Lim.").Width("9%").Filterable(false).Format("{0:dd/MM/yy}")
            .HeaderHtmlAttributes(new { style = "font-family: Arial Helvetica, Sans-Serif;font-size: 12px; text-align:center;font-weight:bold" });

        c.Bound(cl => cl.idMatricula).Title("..").Width("6%").Filterable(false)
            .ClientTemplate("<div align=center><img width='16' height='16'alt='Status Desempenho' onclick='statusDesempenhoClick(<#=idMatricula#>)'  title='Status Desempenho' src='" + Url.Content("Content/Images/StatusDesempenho.png") + "' /></div>")
            .HeaderHtmlAttributes(new { style = "font-family: Arial Helvetica, Sans-Serif;font-size: 12px; text-align:center; font-weight:bold" });

        c.Bound(cl => cl.idCurso).Title("Tutoria").Width("15%").Filterable(false) 
            .HeaderHtmlAttributes(new { style = "font-family: Arial Helvetica, Sans-Serif;font-size: 12px; text-align:center; font-weight:bold" })
            .ClientTemplate(
                    "<div align=right>" +
                    "<# if(statusTutor == 1)" +
                                "{#>" +
                                "<img width='16' height='16'alt='Tutoria' onclick='statusDesempenhoClick(<#=idMatricula#>)'  title='Tutoria' src='" + Url.Content("Content/Icons/16x16/AulaAoVivo.png") + "' /> " +
                                "<img width='16' height='16'alt='Monitoria' onclick='statusDesempenhoClick(<#=idMatricula#>)'  title='Monitoria' src='" + Url.Content("Content/Icons/16x16/Monitoria.png") + "' /> " +
                                "<img width='16' height='16'alt='Avaliação' onclick='statusDesempenhoClick(<#=idMatricula#>)'  title='Avaliação' src='" + Url.Content("Content/Icons/16x16/Avaliacao.png") + "' /> " +
                                "<img width='16' height='16'alt='Relatório' onclick='statusDesempenhoClick(<#=idMatricula#>)'  title='Relatório' src='" + Url.Content("Content/Icons/16x16/Print.png") + "' /> " +
                                "<#}#>" +
                    "</div>"
            );
        })
        .Pageable(paging => paging.PageSize(5))
        .Scrollable(scrollable => scrollable.Height("136px"))
        .Sortable()
        .Filterable()
        .Groupable()
        .Selectable()
        .Reorderable(reorder => reorder.Columns(true))
        .DataBinding(dataBinding => dataBinding.Ajax().Select("_Select", "Curso", new {idUsuario = 123}))
        .ClientEvents(events => events.OnDataBound("onDataBoundGrid")
                                      .OnLoad("onLoadGrid")
                      )
        .Render();
}

Paulo

[John DeVight]

Hi Paulo,

I believe I have come up with a solution.  I've updated the hideGroupColumns function in the attached telerik.extensions.js file.  Let me know how it turns out.

Regards,

John DeVight

[Paulo de Tarso]

Hi, John.  
I updated with the new telerik.extensions.js but don´t work...

I will prepare a small code sample...

tanks

Paulo

[Paulo de Tarso]

Hi, John.
I attached a small example.

Greetings from Brazil

Paulo

[John DeVight]

Hi Paulo,

I was able to download the sample application and run it.  I'll work on coming up with a solution.

Regards,

John DeVight
telerikmvcextendedjs at gmail dot com

[John DeVight]

Hi Paulo,

I was able to get this working better by doing the following:
1. Comment all code in onDataBoundGrid
2. Adding a new function called Index.init() that calls: grid.hideGroupColumns()
3. Calling Index.init() from Html.Telerik().ScriptRegistrar().OnDocumentReady()

However, sine you are using percentages, the column widths aren't coming out right.  I'll continue to look at this and see if I can come up with a solution.

Here is the code for Html.Telerik().ScriptRegistrar().OnDocumentReady():

@Html.Telerik().ScriptRegistrar().OnDocumentReady(@<text>Index.init();</text>)

Here is the javascript code:

<script type="text/javascript">
    Index={};

    Index.init=function () {
        var grid=$('#grdCurso').data('tGrid');
        grid.hideGroupColumns();
    }

    //----------------
    // onDataBoundGrid
    //----------------
    onDataBoundGrid=function (e) {
        /*
        // Oculta a coluna que está agrupada
        var grid=$('#grdCurso').data('tGrid');

        grid.showAllColumnHeaders();
        var cnt=grid.groups.length;
        if(cnt>0) {
            $.each(grid.groups,function (gdx,group) {
                var columnTitle=group.title;

                $.each(grid.columns,function (idx,col) {
                    if(col.title==columnTitle) {
                        grid.hideColumn(idx+cnt);
                    }
                });
            });
        }
        */
    }
</script>

Regards,

John DeVight
telerikmvcextendedjs at gmail dot com

[John DeVight]

Hi Paulo,

I've tweeked the hideGroupColumns function a bit to handle column widths a bit better.  I've attached your sample application with the changes.  Let me know how it works out for you...

Regards,

John DeVight
telerikmvcextendedjs at gmail dot com

P.S. - If this works out, please mark it as the answer =)

[Paulo de Tarso]

Hi. John.

It´s work perfect!!!

Excelent!!!

helped me a lot

Thank you very much

Paulo

[Paulo de Tarso]

I can not mark as answered because it was not me who opened the question ...
but for me it is answered.

all the best

Paulo

[John DeVight]

Glad to hear! =)

I've started putting together an MVC application that demos all the functions I've created in the telerik.extensions.js.  You can get it at: http://telerikmvcextendedjs.codeplex.com/ on the downloads tab.

Regards,

John DeVight

[Vladimir]

Guys, there is more simple way - see topic 'Custom label for group?'.

[Jana]

Hi,

I would like to use the hidegroupcolumns function in my project, but this isn't working with version 2012.1.214.

Anyone who can fix this problem?
Thanx!

Jana