Month: July 2015

JQuery DataTable With Knockout Inline Editing

Vasu Uncategorized

In my previous post I have already discussed the importance of Tables in any web application ,I have also shared a sample to integrate JQuery Data Table with KnockoutJs and Server Side paging in MVC using templating in that post .
I have extended that sample and have made the Tables editable inline .

So now the Table is fully loaded with features like –
Server Side Paging + Template Switch For List and Grid View + Server Side Searching + Server Side Column Sorting + Responsive With Bootstrap  + (and the new entry) Inline Editing 

Editing tables inline improves User Experience not the user will not be redirected to a different update page for making any edits he can edit the table using this inline editing feature.

Here are a few Snapshot of the look and feel of the Tables –

List View 
ListView

Grid View

GridView

List view Inline editingListInlineEdit

Grid view Inline EditingGridInlineEdit

You can get the Source Code from the below Git Repo –
https://github.com/Vasu1990/EditableGridKO

Revise AngularJs Concepts Succinctly

Vasu javascript ,

Featured image

Learning the core concepts behind any framework is very essential. Almost any Developer can go through a series of tutorials for beginners for a Front End Framework and can start coding in it.
But in order to produce quality code you must have the knowledge about the Architecture and the life cycle of these Frameworks and how they work internally.

I found a very interesting series of articles on AngularJS which has some very short and interesting articles on its architecture and life cycle.Not a detailed version though but a good read to refresh your concepts Succinctly.

Here is the link to the articles –

These are a series of almost 25 articles on this link with maximum length of one page each, it helped me Revise AngularJs quickly.

http://www.dotnet-tricks.com/Tutorial/angularjslist

Interview Questions MVC.Net, OOPS, JavaScript and SQL

Vasu .Net MVC, Interview Questions, javascript , ,

Content:

  1. Interview questions on ASP.NET MVC
  2. Interview questions on OOPS and C#
  3. Interview Questions on JavaScript
  4. Interview Questions on SQL

Interviews are indeed a good reality check for your knowledge, faced an interview today after 6 months and got a good reality check. Jotting down some of them just to have a quick look in future.

Interview questions on ASP.NET MVC

Interview questions on OOPS and C#


Interview Questions on JavaScript


Interview Questions on SQL

JQuery DataTable With Knockout Server Side Paging in MVC

Vasu .Net MVC, javascript, Jquery Data Table, KnockoutJs , ,

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

Vasu KnockoutJs , , ,

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 –

koWithJs

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.

koWithmappingJs

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

koWithMVC

 //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

Vasu KnockoutJs , , , , ,

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

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 .

templateComponent

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

multiTempaltView

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

ImultiVM View

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.

AMDKO

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 belowrequreObj

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 looksemployee Module

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.

dirStucture

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

Useful GIT Commands

Vasu GIt ,

Learn the basics of branching in GIT

https://www.atlassian.com/git/tutorials/comparing-workflows/forking-workflow

//create new repo from existing code
git init

//initialize a repo
git add .
git commit

//create repo on github
git remote add  origin repo-url
git remote -v

//checks if successful
git push origin master

//create branch
git checkout -b “branch name”

//push on server

git push origin [name_of_your_new_branch]

//git un add added file
git revert file-name

//push to git
git piush origin branch name

// remove files
git rm files name

//untrack committed files
git update–index –assume-unchanged fileName or git rm -r –cached folder-name
http://stackoverflow.com/questions/6964297/untrack-files-from-git
//unstage checked file from git having copy in local
git rm –caching fileName

//switch branch
git checkout branchName

//remove untracked files using an interface
git clean -d -i

//rever to a commit if you’ve published the work
git revert CommitId

//view all stash
git stash list

//apply particular stash
git stash apply stash@{0}

If you want to rename a branch while pointed to any branch, simply do :

git branch -m <oldname> <newname>

If you want to rename the current branch, you can simply do:

git branch -m <newname>

checkout specific file from another branch

git checkout otherbranch myfile.txt

Undo current merge
git merge --abort

remove local commits
git reset --hard origin/master

view git commit log
git –log pretty=oneline

create tags for versions
git tag -a v0.3 -m “new version”
-a annotation type tag
version no
-m message