Skip to main content

Bootstrap Server Side Sorting Cont....


On my previous post I had already mentioned about how to apply the sort to Bootstrap paginated tables. By making the following changes server side sorting can be achieved along with pagination.

On Filter Model

self.sortBy = ko.observable('Id');//Default sort Column
self.sortAscending = ko.observable(false);
self.iconType = ko.observable('glyphicon glyphicon-chevron-down'); // Icon to appear near Column


No Changes to Adarsh Log Model or Adarsh Log list Model


Knockout.js View Model for Adarsh Log Changes

Add the sortTable  method to it

self.sortTable = function (viewModel, e) {
            var columClicked = $(e.target).attr("data-column")
            var sortAscending = (self.filter().sortAscending() === true) ? false : true;
            self.filter().sortAscending(sortAscending);
            self.filter().sortBy(columClicked);
          
            datacontext.getAllPost(self.adarshLogListModel, config.adarshLogUrl, model.adarshLogListModel, self.filter).always(function () {
                var list = [];
                if (self.filter().currentPageIndex() <= 0) {
                    self.filter().enablePrev(false);
                }
                self.adarshLogListModel().adarshLogList().forEach(function (item) {
                    var newRecord = new model.adarshLog();
                    ko.mapping.fromJS(item, {}, newRecord); 
                    list.push(newRecord);
                });
                self.adarshLogs(list);
                // var newFilter = model.filter;
                ko.mapping.fromJS(self.adarshLogListModel().filterModel(), {}, self.filter());
                //(newFilter);
                self.individualPageList(self.adarshLogListModel().filterModel().individualPageList());
                if (self.filter().currentPageIndex() <= 1) {
                    self.filter().enablePrev(false);
                }
                if (self.filter().currentPageIndex() >= self.filter().totalPageCount()) {
                    self.filter().enableNext(false);
                }
                self.isBusy(false);
                self.filter().iconType((sortAscending === false) ? "glyphicon glyphicon-chevron-down" : "glyphicon glyphicon-chevron-up");
            });
        }


Filter.CS C#Model Changes

Add Following Properties

  public string SortBy { get; set; }
  public bool SortAscending { get; set; }

No Changes to Get All WebApi Controller Method

GetAll Repository Change


Before applying the pagination, add the sorting
switch (filter.SortBy)
                    {
                        case "Id":
                            if(filter.SortAscending)
                                adarshLogList = adarshLogList.OrderBy(a => a.Id);
                            else
                                adarshLogList = adarshLogList.OrderByDescending(a => a.Id);
                            break;
                        case "Name":
                            if (filter.SortAscending)
                                adarshLogList = adarshLogList.OrderBy(a => a.Name);
                            else
                                adarshLogList = adarshLogList.OrderByDescending(a => a.Name);
                            break;
                    }



Changes in View List View


<table class="table table-striped" id="tbUsers">
   
    <thead>
        <tr data-bind="click: $root.sortTable" class="pointerControl">
            <th data-column="Id">
                Id
                <span data-bind="attr: { class: sortBy() == 'Id' ? 'isVisible' : 'isHidden' }">
                    <i data-bind="attr: { class: iconType() }"></i>
                </span>
            </th>
            <th data-column="Name">Name
                <span data-bind="attr: { class: sortBy() == 'Name' ? 'isVisible' : 'isHidden' }">
                    <i data-bind="attr: { class: iconType() }"></i>
                </span>
            </th>
            <th class="col-sm-1"></th>
        </tr>
    </thead>
   
    <tbody data-bind="foreach: adarshLogs">
        <tr>
            <td data-bind="text: id"></td>
            <td data-bind="text: name"></td>
            <td class="col-sm-1">
                <a data-bind="attr: { href: '@Url.Action("Edit", "AdarshLog")' + '/' + Id () }" title="View"><span class="glyphicon glyphicon-pencil"></span></a>
            </td>
        </tr>
    </tbody>
</table>

Comments

Post a Comment

Popular posts from this blog

Compiled Query- Improve the performance of Linq to Entity Query

Most of the small or medium IT firms are using the Entity framework for the Data Access layer (DAL). If we write a complex linq to Entity queries performance will always be an issue. But with the Compiled Query Performance can be improved. This below definitions are from MSDN and more details can be found on the MSDN Link that is at the end of this post           When you have an application that executes structurally similar queries many times in the Entity Framework, you can frequently increase performance by compiling the query one time and executing it several times with different parameters. For example, an application might have to retrieve all the QuoteRevision for a particular quotelineStatus, the quotelinestatus is specified at runtime. LINQ to Entities supports using compiled queries for this purpose.               The  compiled query class provides compilation and caching of queries for reuse . Co...
1 comment
Read more

Sql Server Internals - Named Pipes

Named pipes enables clients applications to request a reliable and two way connection between the client application and Sql Server, across a network. A named pipe has a name which follows the UNC naming convention : \\Server\pipe\name The default names pipe for SQL server is :                 \\Server\pipe\sql\query A named instance would have a named pipe of                \\server\pipe\MSSQL$instancename\sql\query Early versions of SQL Server only provided Named Pipes. Named Pipes also allows for impersonation of a clients credentials. The feature is used by SQL server when using Linked Servers. The clients logon credentials are passed across to the Linked Server for authentication. Named Pipes can operate over TCP/IP, NETBEUI or IPX as it indirectly relies on the Common Internet Files Sytems
Post a Comment
Read more

How to add a stored procedure in Entity Framework

Step1- Open the . edmx file Step2- Right click in . edmx file and select Update Model from Database Step3- Select Add tab, select Stored Procedures and select the procedure you want to add and click finish as shown in below figure a Step4- Build the Entity Project to make sure nothing is broke Step5- Right click on . edmx file and  select Model Browser Step6- Model Browser Popup will appear as  below figure. Click on the Strored Procedures in PricingToolModel . Stroe and click the newly added SP (it will appear here) Step7- The Add Function Import screen will appear Based on the return we can set up. If you are returning a multiple column Click on the Get Column Information First, then click the new Complex Type. After that you can  see the Return of Collection will select the Complex and a complex type is generated by EF If its returning scalar you can select which return type like int , string etc... If its return  entitty ...
Post a Comment
Read more