JQuery DataTable With Knockout Server Side Paging in MVC

Content

1. Analysis of client side and server side listings
2. How to implement the same by choosing the best approach
3. Solution to the Server Side Grid Problem

1. Analysis of client side and server side listings

Every project needs to show some or the other listing be it a job listing or a product listing and if this list grows in size then it is also  required to add paging and filtering to it. You may even want to add sorting to the list for the ease of user. We have tons of solutions for the above problem statement I will list few of them –

1. Create your custom paging , sorting and Filtering which actually requires a lot of time and expertise.
2. Use some third party client side library like JQGrid or JQuery Datatable, I personally prefer JQuery Data Table because it is much more matured and has a good community backing it up.

Now using these client side libraries makes it very easy to implement all these functionalities and everything works pretty well.

But a major problem in using these client side libraries is that they fetch all the data at once and then apply paging and sorting to it. And if the length of JSON data travelling over the network is very large that is if the no of records you are fetching is very large then it may become very slow or even fail to load in some cases.

2. How to implement the same by choosing the best approach

One of the possible solution to this problem is to apply server side paging and sorting .And the good part about Jquery Datatable is that it also gives you an option to apply server side paging by  providing an ajax data source which works great.

But it becomes a nightmare if you try to integrate knockout with server side Jquery Data Tables. I prefer knockout as it goes very well with MVC and saves a lot of time I am sure you will agree with me to it if you have used it with MVC in your projects.

An easier way out to this problem is to bind your table using knockout and then apply data table to it, which is actually not very high in performance and not a suggested approach.

There are many third party libraries that can integrate Knockout with data table and server side paging for you, but it is very difficult to find the right one and there are a very few that will give you an integration with the latest version of data table like 1.10.3.

3. Solution to the Server Side Grid Problem 

I found a similar library that  had support for knockout data table and server side paging it was cog.js a third party library and it works like a charm with the older version of JQuery Data Tables that is 1.9, but when we upgraded the data table version it stopped working.

So I tried to change the basic attributes and tweak it a bit to  make it work with JQuery Data Table 1.10.3 . There might be some scope of improvement for the same but it is working perfectly fine for me. I  have also implemented templating as it is a very common requirement these days, it will help you easily switch between Grid and list views.The data tables also uses Data Table Twitter Bootstrap css  specially designed for data tables so they are responsive as well.

KnocoutJs + Jquery DataTable + Templating +Server Side Paging + Responsive + what else could you ask for ?

You can find the source code for the same over here .

I have commented the code as much as I could if you face any problem in understanding the code or if you feel a need to have a documented post for the same do let me know.

I will be happy to hear if anyone has even a better solution to this problem.

KnockoutJs Creating View Model With And Without MVC.Net

Content

1. How to Create view model in knockoutJs manually.
2. How to Create  view model in knockout automatically using mapping plugin.
3. How to Create  view model in knockout using Server side model in .Net MVC and ko mapping plugin.

When has different ways of creating the View Model when used with and without MVC .Net .In this post we will explore the different way sof creating view Models in knouckoutJs

1 . Create view model in KnockoutJs manually –

Similarly if you have 30 40 properties in your model then you have to manually define those properties in your dataItem model and then fill them manually. This sounds very tedious.

Another alternative is to use the the knockout mapping plugin which will map the ajax data directly to your dataItem view model.Here is the sample code for the same.

2. Create  view model in knockout automatically using mapping plugin.

Mapping plugin dependency – you will also have to refer the mapping js from ko apart from the knockout script file.

this saves a lot of time as you do not have to create custom properties and map them individually.

Knockout with MVC .Net
When we use knockout with MVC we can leverage the model that is bound to the view to create our view model’s structure.This means that you can pass data normally to your view from your controller action and knockout will use this server side model to create it’s client side view model structure.

This is how we do it –

3. Create  view model in knockout using mapping plugin in MVC.Net

 //var viewModel = ko.mapping.fromJS(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));

This simple line of code does the magic it again uses the knockout mapping plugin and serializes the server side model as JSON object using the Newtonsoft serializer and then maps it directly to client side knockout model using the mapping plugin.
Now you can use this  viewModel and bind it directly to your view just as you bind a ko model . All the properties in this veiw model will be observable.

Knockout Components using AMD

Content

1. What are Knockout Components.
2. How to create ko Components.
3. How to load then asynchronously using RequireJs

What are Knockout Components

Knockout enables you to create declarative and reusable components similar to Angular directives.Components in knockout are combination of a view template and it’s model, they can be created as standalone components and can be reused just like User Controls in ASP.Net .

How to create ko Components

To create knockout components we have to register the components . Components are a part of ko v.3.0 and above so you need to have latest KnockoutJs.

Here is the sample code for creating and invoking ko components

If ko.mapping.fromJs is some thing alien to you please go through this blog post to get a better understanding of knockout Js mapping plugin.

The data in the Employee Register function is getting passed using params  where the component is invoked inside the HTML.

In the above section components are registered and invoked but the components created here uses inline template you can also create a template element inside your HTML and then invoke it instead of using inline template .

Now it might be a case that you want to use multiple components in one view which you can do by registering them and invoking them similarly example

In the above case I have created two templates and is rendering the manager template depending on the role.

I

Also I have created separate View models for them.

Problem using Components without AMD(RequireJs or any other library that can load scripts on demand)

1. The problem in the above approach is that even if the Manager template is not invoked it’s template and View Model has to be loaded on the view , now imagine you have multiple templates and multiple View Model’s in that case the page will become very heavy.
2. Also you have to copy paste the template and view model if you want to re use it.

In order to overcome this problems we can use RequireJs(on any other AMD library) to load these modules on demand.It will also help us to define a separate module for our components.

This is how your script will look after using requireJs .The require.config.js is a configuration file that I have created to load some dependent files.The name of the file can be anything but it requires a config object as shown below

As you can see inside the component it is requiring its respective js files these js files are nothing but the components that we have created using RequireJs they contain the ViewModel and template paths to be invoked.

This is how EmployeeRegisterForm.js looks

The text! is a require function which is a library to load text files in require Js.We have directly passed the HTML template path to it.

Now these components are isolated can be invoked anywhere directly. Another advantage to this approach is that if both the modules have some common function that can be written on the main view Model just like the viewModel.Submit method now this can be used by both the templates and methods specific to them can be written in their own View Models.

The components are kept under koModules folder for segregation .Here is how the directory structure looks.

Source Code: https://github.com/Vasu1990/koParentChildVMComponents