In continuation of my previous post on search implementation using knockoutjs. In the previous example I showed how to bind a grid with the KnockoutJS observable array object. Because of observable characteristics, once the view model updates the knockoutjs engine renders HTML controls which are bound to that view model. I found one problem with it when dealing with huge data.
I had a requirement to show thousands of records in a grid without paging. If I use the knockoutjs way of binding with an HTML table it takes time to load and the browser also pops up a message about an “Unresponsive script” which asks to further render or to stop the script.
I wanted to use the same view model for data but I didn’t want to use the “data-bind” attribute in HTML. I found a good jQuery plugin (jQuery.tmpl) through which we can define a template and can inject data at runtime. Here I’ll show you how to implement it. I am using the same code base which I used in my previous post.
How to reproduce the error?
Let us say I am adding 20000 employees in a collection and it will render on the UI.
Binding with the HTML table:
I get the following error message.
Solution:
Implementation of Jquery.tmpl
To avoid this message and to render data fast I chose jquery.tmpl to render the HTML table. Here are the steps which will define the implementation:
Step1: Download the 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 the scripts folder. You can directly reference the script file as well if you want.
Step 2: Reference jquery.tmpl.min.js in the relevant page or the _layout.cshtml file.
<script src="@Url.Content("~/Scripts/jquery.tmpl.min.js")"
type="text/javascript"></script>
You can also give the direct path from
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
Step 3: Create a blank tbody where data will populate.
<tbody id="datalist"></tbody>
Step 4: Create a template of the <tr> element in which data will render.
Step 4: Populate data in the template.
Step 5: Run the application.
You can find the code here.
