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

Question

我有一个隐藏列的问题。

在 DataGrid 中没有模型类型（员工、客户等）。当数据到来时，我解析为 json 数组并发送到 DataSource 的 DataGrid。

对不起我的英语不好。

这是我的代码：

@{
    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")

                )

我可以看到所有列，但我想隐藏一些列。如何隐藏特定列？

我试过这个代码：

<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>

标签： javascriptc#razordevextreme

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") {
	}
}