Get Devexpress Gridview Sort By and Sort Order in Javascript

Question

I am implementing Devexpress Grid Control in MVC. I was stuck at a point where i need the current Sorted By column and Sort Order (asc/desc) in javascript. I also tried the clientSide Event OnColumnSortingChanged(s , e) , it is only providing the name of the column at click event not from the gridview javascript object.

Answer 1

I recently needed similar, where I wanted to save the column order, sort order, and filter information; such that a user could create saved views of a grid, and not have to keep re-entering all these preferences.

I found that in an event CustomJSPropeties I could interact with a sender being an ASPxGridView, such that I could grab a needed value from ASPxGridView.SaveClientLayout(). Also useful here can be the FilterExpression, and the VisibileRowCount - if you want to use the filter expression for exporting, but only when the VisibleRowCount is less than a certain threshold (this is the number of rows shown in the bottom pager area)

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

So what does this do? Properties defined in this event are available as properties of the javascript grid view object. So here we grab these values when we can, and place them in a place where we normally cannot access them.

And then, right from JavaScript we can now access GridView.cpLayout (where GridView is the name/id supplied to your grid.)

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

To be clear, this "layout" contains sort order, visible column info, and filter information.

Layout:

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

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

CustomJSProperties:

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

Note: I add this solution here because this is what I found when I was searching for my issue. As one can see, these are similar topics of accessing the AspxGridView (base of) or MVCGridView within a CustomJSProperties event handler.

Answer 2

Got the answer after research...

Have to add CustomJsProperty to the control in the partial view as below

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

Handle the ColumnSortingChange event as follows

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
    }

Last but not the least, One must have to define the default sort index and sort order for the column

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

   });