在Javascript中获取Devexpress Gridview排序和排序顺序

Question

我正在MVC中实现Devexpress Grid Control。我遇到了需要当前排序依据列和javascript中排序顺序（asc / desc）的点。我还尝试了clientSide事件 OnColumnSortingChanged（s，e），它只在click事件中提供列的名称而不是gridview javascript对象。

Answer 1

研究后得到了答案......

必须在局部视图中将CustomJsProperty添加到控件中，如下所示

settings.CustomJSProperties = (s, e) =>
    {
        var Grid = s as MVCxGridView;
        var result = new System.Collections.Hashtable();
        foreach (var col in Grid.AllColumns)
        {
            var dataCol = col as GridViewDataColumn;
            if (dataCol != null)
            {
                if (dataCol.SortIndex == 0)
                {
                    e.Properties["cpColumnsProp"] = new Dictionary<string, object>()
                    {
                        { "sortcolumn", dataCol.FieldName },
                        { "sortorder", ((Convert.ToString(dataCol.SortOrder).Equals("Ascending")) ? "asc" : "desc")}
                    };
                }
            }
        }
    };

按如下方式处理ColumnSortingChange事件

function gvChartList_OnColumnSortingChanged(s, e) {
        $("#hdsortname").val(e.column.fieldName); // contains the sort column name
        $("#hdsortorder").val(((s.cpColumnsProp.sortcolumn == e.column.fieldName) ? "desc" : "asc")); // contains the sort column order
    }

最后但并非最不重要，必须为列

定义默认排序索引和排序顺序

settings.Columns.Add(col =>
    {
    // column details
        col.SortIndex = 0;
        col.SortAscending();

   });

Answer 2

我最近需要类似的，我想保存列顺序，排序顺序和过滤信息;这样用户可以创建网格的已保存视图，而不必继续重新输入所有这些首选项。

我发现，在一个事件的 CustomJSPropeties 我可以发送者作为一个ASPxGridView，相互作用，使得我可以抓住从一个所需的值的 ASPxGridView.SaveClientLayout（）即可。同样在这里有用的可以是FilterExpression和VisibileRowCount - 如果你想使用的过滤器表达式导出，但只有当visibleRowCount的小于某一阈值（这是在底部寻呼机区域中显示的行数）

    settings.CustomJSProperties = (s, e) =>
    {
        ASPxGridView gridView = (ASPxGridView)s;
        e.Properties["cpGridFilterExpression"] = gridView.FilterExpression; //Make Filter Expressions Availabe to JavaScript
        e.Properties["cpVisibleRowCount"] = gridView.VisibleRowCount; //Make Visible Row Count Availabe to JavaScript
        e.Properties["cpLayout"] = gridView.SaveClientLayout(); //Get Layout String and make it available to JavaScript
    };

这是做什么的？此事件中定义的属性可用作javascript网格视图对象的属性。所以我们在可以的时候抓住这些值，并将它们放在我们通常无法访问它们的地方。

然后，从JavaScript开始，我们现在可以访问GridView.cpLayout（其中GridView是提供给网格的名称/ ID。）

<script type="text/javascript">
    $(document).ready(function () {
        $('#saveButton').click(
            function () {
                var layout = GridView.cpLayout;
                //Perform Save...
            }
        );
    });
</script>

要清楚，此“布局”包含排序顺序，可见列信息和过滤器信息。

<强>布局：

https://documentation.devexpress.com/#AspNet/CustomDocument4342

https://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_SaveClientLayouttopic

<强> CustomJSProperties：

https://documentation.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_CustomJSPropertiestopic

注意：我在这里添加此解决方案，因为这是我在搜索问题时发现的。可以看到，这些是在CustomJSProperties事件处理程序中访问AspxGridView（base of）或MVCGridView的类似主题。