We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Table sorting without affecting column number?


 i got a requirement from client to maintain listing numbering even when they sort other column. It means, for example, by default, i got a list of data containing 10 items that is sort by created date ascending. even if user click column created date to descending, the number column still maintain 1 to 10 instead of 10 to 1.  Plus, user can sort the column number too if the want to sort descending (10-1). Is it doable..? Hope you can understand my explanation :p

Please find below my codes .

@Html.EJS().Grid("ScoreDetails2").Load("load2").DataSource((IEnumerable<object>)ViewBag.List_Manifest_Details_OUT_Model).DetailTemplate("#detailtemplate").AllowExcelExport().ShowColumnMenu(true).AllowFiltering().AllowSorting().ToolbarClick("toolbarClick2").AllowReordering().Columns(col =>
                     col.Field("InLoggedDate").HeaderText("Logged Date").Width(200).Add();
                     col.Field("DocNumber").HeaderText("Manifest No").Template("#riskManifest").Width(250).Add();
                     col.Field("Vessel_TransactionNumber").HeaderText("Transaction No").Width(200).Add();
                     col.Field("Vessel_JourneyNo").HeaderText("Journey No").Width(200).Add();
                     col.Field("Vessel_VesselIdentification").HeaderText("Vessel ID.").Width(200).Add();
                     col.Field("Vessel_VoyageNo").HeaderText("Voyage No").Width(180).Add();
                     col.Field("Vessel_ShipCallNumber").HeaderText("Ship Call No.").Width(180).Add();

                 }).AllowGrouping(true).AllowResizing(true).AllowPaging().PageSettings(page => page.PageCount(5).PageSize(10).PageSizes((new string[] { "5", "10", "20", "All" }))).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).Toolbar(new List<string>() { "ExcelExport" }).Render()



1 Reply

MS Madhu Sudhanan P Syncfusion Team January 23, 2019 05:18 AM UTC

Hi Muhammad, 

Thanks for contacting Syncfusion support. 

You can achieve your requirement using custom adaptor concept in which the serial number is generated at the client side based on the page number and size.  The custom adaptor is as follows. 

.DataSource(ds => ds.Json(ViewBag.List_Manifest_Details_OUT_Model.ToArray()))... .Render()) 

    var customAdaptor = new ej.data.JsonAdaptor(); 
    ej.base.extend(customAdaptor, { 
      processResponse: function(dm, x, query) { 
        var pageQuery = query.queries.filter(function(e) { return e.fn === 'onPage'})[0]; 
        var i = (pageQuery.e.pageIndex - 1) * pageQuery.e.pageSize; 
        //calling base class processResponse function 
        var original = ej.data.JsonAdaptor.prototype.processResponse.apply(this, arguments); 
        //Adding serial number 
        original.result.forEach(function(item) { item['RowCount'] = ++i; }); 
        return original; 
    function load2(args) { 
        this.dataSource.adaptor = customAdaptor; 

Madhu Sudhanan P 

Live Chat Icon For mobile
Up arrow icon