Asp.Net, CodeProject, DotNet, KnockoutJs

Implement Jquery.tmpl (template) with KnockoutJS, Asp.Net Mvc3


In continuation of my previous post on search implementation using knockoutjs. In previous example I bind grid with knockoutjs observable array object. Because of observable characteristics, once view model update then knockoutjs engine render html controls which are bound to that view model. I found one problem in it when dealing with huge data.

I had a requirement to show thousands of records in grid without paging. If I use knockoutjs way of binding with html table it takes time to load and browser also popup message about “Unresponsive script” which ask to further render or to stop script.

I wanted to use same view model for data but i didn’t want to use “data-bind” attribute in html. I found one of good plugin of jquery (jQuery.tmpl) through which we can define template and can inject data in runtime. Here I’ll show you how to implement it. I am using same code base which I used in previous post.

 

How to reproduce error?

Let say I am adding 20000 employees in collection and it will render on UI.

image

Binding with HTML table:

 

image

 

I get following error message.

 

image

 

Solution:

Implementation of Jquery.tmpl

To avoid this message and to render data fast I choose jquery.tmpl to render html table.

Here are steps which will define step by step implementation:

Step1 : download Jquery.tmpl.js file from jquery

http://github.com/jquery/jquery-tmpl

http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js

and save in scripts folder.

You can directly reference script file as well if you want.

 

Step 2: Reference jquery.tmpl.min.js in relevant page or _layout.cshtml file.

 

<script src="@Url.Content("~/Scripts/jquery.tmpl.min.js")" 
	type="text/javascript"></script>

 

You can also give direct path from

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>

 

Step 3: Create blank tbody where data will populate.

<tbody id="datalist"></tbody>

Step 4: Create template of <tr> element in which data will render.

 

image

Step 4: Populate data in template.

 

image

 

Step 5: Run application.

image

 

image

 

You can find code here.

Advertisements

One thought on “Implement Jquery.tmpl (template) with KnockoutJS, Asp.Net Mvc3

  1. Can we still utilize knockout custom bindings using this method ? My data needs some edit before being put into the table.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s