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

How to write secure mvc application using encrypting URL

There are lots ways available to write the secure Mvc application. In my experience I came across lots of secure application in public facing. I want to tell about some of the mechanism I followed. 1- encrypting the URL Parameters and preserving id's encrypted on the client side 1- I always make sure if I pass Id or any sensitive data into the view always make sure it's encrypted. By doing so make sure if we forced to use HTML.hidden or HTML.hidden for have the encrypted values, in action link if I pass any parameters from the client side (eg:- edit or create or navigating between different actions we can make sure that all the values are encrypted) During the design of the actions results if it's http get I usually encrypt the sensitive data [httpget] Public actionresult display() { TestModel testModel=new TestModel(); testModel.id= encrypt(id); Return View(testModel); } [httppost] Public ActionResult Display(string id) { Guid d_id= new Guid(decrypt(id));
Post a Comment
Read more

Single page application (SPA) using ext.js

what is spa? Single page application are applications that fit in one page with rich and fluid user experiences like a desktop based applications. Why is SPA? All web based elements (html, CSS,javascript) are downloaded from the server on single page load and avoid the continuous page post back. i can explain what this mean. Suppose your web application is made of certain flow and it consists of 5 different pages. Each page need to get data from the user and save before moving to the next page. So when we navigate from one page to other it need to make a round trip to server to store the data in one page and get the data for the next page to display. but in spa we can avoid the continuous post backs. The whole page will not post back any time other than the first load. But it communicate to the server dynamically behind the scene and can achieve the same functionality. Spa using ext.js designing a SPA using ext.js is a challenging task if you are unaware about the ext.js
Post a 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