EJ2 ASP.NET MVC Grid: zeros are displayed as empty cells and sorted as highest values

[Vasyl Shepelyov]

Hello,

Could you please advise how to make zeros sorted like zeros? My problem is that currently when I sort this column, records containing zeros go first (as if they are highest values), while I'd like them to go at the end of the list. Probably that's because zeros are rendered as 'undefined', maybe there is some way to make them render as zeros instead.

If it matters, field in underlying data source for this column is of type int. And same happens with decimal, double, etc.

Thank you!

...

.DataSource(Model).Columns(col =>

           {
               ...
               col.Field("ValueOnHand").HeaderText("VOH").Type("number").ClipMode(ClipMode.Clip).Width("40").TextAlign(TextAlign.Right).Format("0.00").Add();

...

[Mohammed Farook J]

Hi Vasyl, 

 

Thanks for contacting Syncfusion support. 

 

We have achieved your requirement by using ‘sortComparer’ function in column definationat grid load event. Please find the code example 

 

 

 

@Html.EJS().Grid("Grid").AllowPaging().Load("load").AllowSorting().DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col => 

           { 

               col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

               col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 

               col.Field("Freight").HeaderText("Freight").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add(); 

               col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add(); 

 

           }).Render() 

</div> 

 

<script> 

    function load(args) { 

// add your condtion for apply custom sorting empty or null values display at end of list when apply descending 

        this.columns[2].sortComparer = function (x, y) { 

            if (!x) { 

                x = 0; 

            } 

            if (!y) { 

                y = 0; 

            } 

            return x > y 

 

        } 

    } 

</script> 

 

 

 

Please find the sample for your reference. 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication31-80352893.zip  

 

 

https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#load  

 

 

Regards, 

J Mohammed Farook 

[Vasyl Shepelyov]

Hi J Mohammed,

Thank you, proposed solution works great.

I've change it to foreach to be more generic and apply to all columns:

this.columns.forEach(function (item, i, arr) {
        item.sortComparer = function (x, y) {
            if (!x) {
                x = 0;
            }
            if (!y) {
                y = 0;
            }
            return x > y
        };
    });

[Rahul Narayanasamy]

Hi Vasyl, 

 

We are glad to hear that the provided solution helped you to achieve your requirement. 

 

Regards, 

Rahul Narayanasamy.