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.

Binding with HTML table:

I get following error message.

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.

Step 4: Populate data in template.

Step 5: Run application.

You can find code here.