How to hide first column after load for Awesome grid MVC

Question

I am using MVC Awsome grid, I want to hide first column of the grid, but struggling to do and no proper documentation for that in internet, please check below..

@(Html.Awe().Grid("MilkClassGrid").Load(false)
                            .CssClass("keynav")
                              .Columns(
        //new Column { Name = "Count", Width = 100, Header = "Count", ClientFormatFunc = "txtCount"},
                                  new Column { Name = "ID", Width = 100, Header = "", ClientFormatFunc = "txtslno" },
                                  new Column { Name = "MilkClasificatn", Width = 100, Header = "Classification", ClientFormatFunc = "txtClass" },
                                  new Column { Name = "MilkClassDesc", Width = 100, Header = "Description", ClientFormatFunc = "txtDesczzzz" }
        // new Column { Name = "Organic", ClientFormatFunc = "toggleButton", Width = 90}
                              )
                              .Url(@Url.Action("GetEmptyRecords"))
        //.PageSize(100)
                              .PageSize(5)
                              .Persistence(Persistence.Session)
                              .Persistence(Persistence.View) // save collapsed groups and nodes when switching between grid pages
                              .ColumnsPersistence(Persistence.Session) // save columns (width, grouping, etc..) for browser session lifetime
                              .Groupable(false)
        .Selectable(SelectionType.Single)
                              .Persistence(Persistence.View)
        //.Sortable(true)
                              .SendColumns(true)
                              .SingleColumnSort(true)
                              .Height(300)
                              .Parent("PageSize", "PageSize")
                              .Parent("MilkType", "search")
                              )

Edited

function txtslno(model, name) {

    var as = arryLen.length;
    as = parseInt(as) + parseInt(counta);
    var val = model[name];
    if (!val) val = "";
    if (as <= counta) {
        counta++;
        var html = "<input type='text' class='count11' disabled='disabled'  name='" + name + "' id='GetList_" + counta + "_slno'  value='" + escapeChars(val) + "'/>";

        return html;
    } else {
        return "<input type='text' class='count11' disabled='disabled'  name='" + name + "' id='GetList_" + as + "_slno1'  value='" + escapeChars(val) + "'/>";
    }
}

I have tried by calling a javascript function in Load function, but didn't getting, please help me anyone. Thank you

If you want to hide first column, then why to bind it in first place? — ramiramilu, Jun 06 '15 at 08:58
I want value of first column and pass as parameter, but by default it should not be visible to user, just like hidden field — Developer, Jun 06 '15 at 09:04
Show us your `txtslno` function? It should work if you write your custom CSS there. — ramiramilu, Jun 06 '15 at 09:06
Also you have one more - `ClientFormat` have your tried that? Example here - http://demo.aspnetawesome.com/GridDemo/CustomFormat — ramiramilu, Jun 06 '15 at 09:07
I dont see any where in your JQuery function, that you are trying to hide the control. So please correct it and add style - display:none. — ramiramilu, Jun 06 '15 at 09:30

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

Just inspect the page with chrome dev tools and hide the first row of the grid using css.

Similar to:

https://stackoverflow.com/a/30681422/769871

How to select first row of something with pure css:

Select only the first row in a table with css

edited May 23 '17 at 11:58

Community

1
1

answered Jun 06 '15 at 10:15

cchamberlain

17,444
7
59
72

score 0 · Answer 2 · answered Sep 18 '20 at 12:40

If you only need the value that the first Column is showing there's no need to declare the column at all. The row model and what you are rendering in the grid row are separate things.

There's a demo for hiding columns here: https://demo.aspnetawesome.com/GridShowHideColumnsApiDemo

Basically it would be something like this:

var g = $('#Grid1');
g.data('o').columns[0].Hid = 1;
g.data('api').render() // or .load()

How to hide first column after load for Awesome grid MVC

2 Answers2