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.
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
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.
You can also give direct path from
Step 3: Create blank tbody where data will populate.
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.