Table sorting without affecting column number?

[afiqdoherty]

Hi,

 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("RowCount").HeaderText("No.").Width(80).Add();

                     col.Field("InLoggedDate").HeaderText("Logged Date").Width(200).Add();

                     col.Field("Manifest_Final_Channel").HeaderText("Channel").Width(150).Add();

                     col.Field("DocNumber").HeaderText("Manifest No").Template("#riskManifest").Width(250).Add();

                     col.Field("Vessel_ModeOfTransport_2").HeaderText("Mode").Width(120).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()

Thanks, 

afiq

[Madhu Sudhanan P]

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. 

@(Html.EJS().Grid("ScoreDetails2").Load("load2") 

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

<script> 

 

    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; 

    } 

</script> 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/#custom-adaptor 

Regards, 

Madhu Sudhanan P