Show or hide columns on databound

[Matias]

I'm trying to display a grid according to certain parameters obtained in the read function.

This is my grid:

@(Html.Kendo().Grid(Model)
    .Name("ConciliacionesPendientesDetalle")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("ConciliacionDetalle", "ConciliacionItem")
            .Data("PasarParametros"))
        .PageSize(12))
    .Columns(columns =>
    {
        columns.Bound(foo => foo.Id).Title("Id").ClientFooterTemplate("#= count#");
        columns.Bound(foo => foo.OrigenDescripcion).Title("Origen");
        columns.Bound(foo => foo.Varchar1).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar2).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar14).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar15).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar16).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar17).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar18).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar19).HtmlAttributes(new { @class = "ocultarColumna" });
        columns.Bound(foo => foo.Varchar20).HtmlAttributes(new { @class = "ocultarColumna" });
    })
    .Sortable()
    .Events(e => e.DataBound("onDataBound"))
    .Selectable()
    .Scrollable(s => s.Height(320))
    .AutoBind(false)
)

And whenever I force the grid to read data, I fire this js function:

function onDataBound(e) {

        var serviceUrl = "/ConciliacionItem/ListarDisenios";
        var _url = (window.BASE_URL == null) ? serviceUrl : window.BASE_URL + serviceUrl;
        
        $.getJSON(_url)
            .done(function (data) {
                var grilla = $("#ConciliacionesPendientesDetalle").data("kendoGrid");

                for (var j = 0; j < data.length; j++) {
                   //debugger;
                    for (var i = 2; i < grilla.columns.length; i++) {
                        if (grilla.columns[i].field == data[j].Campo){
                            grilla.columns[i].title = data[j].Valor;
                            grilla.columns[i].hidden = false;
                            grilla.columns[i].attributes.class = "";
                            break;
                        }
                        else {
                            grilla.columns[i].hidden = true;
                            grilla.columns[i].attributes.class = "ocultarColumna";
                        }
                    }
                }                
            })
};

And this is my css class:

ocultarColumna{
    display:none !important;
    visibility:hidden !important;
}

I put both properties just to see if anything works, but so far no luck. What can I do to hide the columns I don´t want to display dynamically?

[Kostadin]

Hello Matias,

Thank you for contacting us.

In order to hide or show columns you need to use hideColumn and showColumn methods of the grid.

Please give it a try and let me know if I can provide any further assistance.

Regards,
Kostadin
Telerik

[Matias]

Thank you very much for your response, it works flawlessly.

On a side note, I'm trying to chance the title of the columns with the very same code:

function onDataBound(e) {

        var serviceUrl = "/ConciliacionItem/ListarDisenios";
        var _url = (window.BASE_URL == null) ? serviceUrl : window.BASE_URL + serviceUrl;
        
        $.getJSON(_url)
            .done(function (data) {
                var grilla = $("#ConciliacionesPendientesDetalle").data("kendoGrid");

                for (var j = 0; j < data.length; j++) {
                    debugger;
                    for (var i = 2; i < grilla.columns.length; i++) {
                        if (grilla.columns[i].field == data[j].Campo){
                            grilla.columns[i].title = data[j].Valor;  --- THIS IS THE LINE 
                            grilla.showColumn(grilla.columns[i].field);
                            break;
                        }
                    }
                }
};

But it doesn't work. Is there any way I can accomplish that? Thank you!

[Matias]

Nevermind, this is the way to accomplish that:

 

$("#grid thead [data-field=" + yourFieldName+ "] .k-link").html(DataToPass)