如何在Devextreme DataGrid中隐藏动态数据的列

Question

i have a problem for column hidding.

In DataGrid don't have model type(Employee,Customer etc..). When data is coming, i parsing to json array and send to DataSource for DataGrid.

Sorry my bad english.

Here is my code:

@{
    JObject root = JObject.Parse(ViewBag.X.ToString());
    string _root = root.Value<string>("Message");
    JArray obj = JArray.Parse(_root) as JArray;
}

    @(Html.DevExtreme().DataGrid()
                .ID("DevDataGrid")
                .DataSource(obj)
                .Columns(c =>
                {
                    if (_anyPermission)
                    {
                        c.Add().DataField(BelbimADK.Web.Resource.txt_Action).CellTemplate(@<text>
                            @if (_allowUpdate)
                            {
                                @(Html.DevExtreme().Button().ID("btnEdit").Text("").Icon("edit").Type(ButtonType.Default).OnClick("function(e) { onEdit(e, data, rowIndex) }"))
                            }
                            @if (_allowDelete)
                            {
                                @(Html.DevExtreme().Button().ID("btnDelete").Text("").Icon("remove").Type(ButtonType.Danger).OnClick("function(e) { onDelete(e, data,rowIndex) }"))
                            }
                        </text>
                        ).AllowFiltering(false).FormItem(f => f.Visible(false));

                    }

                }).ColumnChooser(cc => cc
    .Enabled(true)
    .EmptyPanelText("Daha fazla sütün yoktur.")
    .Mode(GridColumnChooserMode.Select)
    )
.Pager(a => a.Visible(true)
.ShowPageSizeSelector(true)
.ShowInfo(true))
.Paging(p => p.PageSize(Convert.ToInt16(Resource.PageSize)))
.FilterRow(f => f.Visible(true))
.HeaderFilter(f => f.Visible(false))
.OnRowUpdated("UpdateWithMessage")
.OnRowInserted("InsertWithMessage")
.AllowColumnResizing(true)
.AllowColumnReordering(true)
.RemoteOperations(true)
.NoDataText("Kayıt Bulunamadı!")
.ShowBorders(true)
.Scrolling(Scrolling => Scrolling.ShowScrollbar(ShowScrollbarMode.Always))
.ColumnAutoWidth(true)
.Selection(s => s.Mode(SelectionMode.Multiple).AllowSelectAll(true))
.Export(f => f.Enabled(true).FileName(_title).AllowExportSelectedData(true))
.OnExported("ExportGrid")
.Editing(e => e.AllowAdding(_allowInsert ? true : false).Mode(GridEditMode.Popup)
.Popup(p => p
.Title(_title)
.ShowTitle(true)
.Width(700)
.Height(345)
.Position(pos => pos
.My(HorizontalAlignment.Center, VerticalAlignment.Center)
.At(HorizontalAlignment.Center, VerticalAlignment.Center)
.Of(new JS("window"))
)))
.RemoteOperations(true)
.Grouping(g => g.AutoExpandAll(false))
.OnRowRemoved("DeleteWithMessage")

                )

I can see all column but i wanna hide some column. How can i hide spesific column?

I tried this codes:

<script>
    $("#DevDataGrid").dxDataGrid({
                "columnOption": {
                    "id":0,
                    "visible": false
                }
            });
    ----------------------------------------
    $("#DevDataGrid").dxDataGrid("columnOption", 0, "visible", false);
    ----------------------------------------
    $("#DevDataGrid").dxDataGrid("columnOption", 0, "showInColumnChooser", false);
</script>

EDIT2----

@{
    JObject root = JObject.Parse(ViewBag.X.ToString());
    string _root = root.Value<string>("Message");
    JArray obj = JArray.Parse(_root) as JArray;
}

    @(Html.DevExtreme().DataGrid()
                .ID("DevDataGrid")
                .DataSource(obj)
                .Columns(c =>
                {

                }).ColumnChooser(cc => cc
    .Enabled(true)
    .EmptyPanelText("Daha fazla sütün yoktur.")
    .Mode(GridColumnChooserMode.Select)
    )
.Pager(a => a.Visible(true)
.ShowPageSizeSelector(true)
.ShowInfo(true))
.Paging(p => p.PageSize(Convert.ToInt16(Resource.PageSize)))
.FilterRow(f => f.Visible(true))
.HeaderFilter(f => f.Visible(false))
.OnRowUpdated("UpdateWithMessage")
.OnRowInserted("InsertWithMessage")
.AllowColumnResizing(true)
.AllowColumnReordering(true)
.RemoteOperations(true)
.NoDataText("Kayıt Bulunamadı!")
.ShowBorders(true)
.Scrolling(Scrolling => Scrolling.ShowScrollbar(ShowScrollbarMode.Always))
.ColumnAutoWidth(true)
.Selection(s => s.Mode(SelectionMode.Multiple).AllowSelectAll(true))
.Export(f => f.Enabled(true).FileName(_title).AllowExportSelectedData(true))
.OnExported("ExportGrid")
.Editing(e => e.AllowAdding(_allowInsert ? true : false).Mode(GridEditMode.Popup)
.Popup(p => p
.Title(_title)
.ShowTitle(true)
.Width(700)
.Height(345)
.Position(pos => pos
.My(HorizontalAlignment.Center, VerticalAlignment.Center)
.At(HorizontalAlignment.Center, VerticalAlignment.Center)
.Of(new JS("window"))
)))
.RemoteOperations(true)
.Grouping(g => g.AutoExpandAll(false))
.OnRowRemoved("DeleteWithMessage")

                )

<script>
    $("#DevDataGrid").dxDataGrid({
                "columnOption": {
                    "id":0,
                    "visible": false
                }
            });
    ----------------------------------------
    $("#DevDataGrid").dxDataGrid("columnOption", 0, "visible", false);
    ----------------------------------------
    $("#DevDataGrid").dxDataGrid("columnOption", 0, "showInColumnChooser", false);
</script>

Answer 1

 //You can use do this two method. //1. when you have static condition { dataField: "Id", caption: "ID", visible: (sessionStorage.getItem('isAdminUser') === "True") ? true,:false , } //2.when you have dynamic condition. Data come from API the this method useful. cellTemplate: function (container, options) { if (options.data.isAdminUser === "true") { } }