Show or hide columns on databound

4 posts, 1 answers
  1. Matias
    Matias  avatar
    24 posts
    Member since:
    Mar 2016

    Posted 24 May Link to this post

    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?

  2. Answer
    Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 26 May Link to this post

    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
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Matias
    Matias  avatar
    24 posts
    Member since:
    Mar 2016

    Posted 26 May in reply to Kostadin Link to this post

    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!

  5. Matias
    Matias  avatar
    24 posts
    Member since:
    Mar 2016

    Posted 27 May in reply to Matias Link to this post

    Nevermind, this is the way to accomplish that:

     

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

Back to Top
UI for ASP.NET MVC is VS 2017 Ready