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.
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
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.
You can also give the direct path from
Step 3: Create a blank
tbody where data will populate.
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.
• Technical Architect with 9 years of Application development experience
• Good knowledge and expertise on multiple areas of technologies and their business applications
• Strong experience in high performance and business critical applications.
• Experience in creating framework, Code generators, and UML diagrams.
• Developed messaging framework for Algo Trading, technical analysis tool, market feed client Api, Payment Solutions for SWIFT, Internationalization for Core Banking Solution product etc.
• Practical knowledge of building and practicing agile delivery methodologies (SCRUM & TDD).
• Proven ability in producing technical documentation and presentation to clients.
• Active participation in trainings, article writing & taking initiatives.
• Passion to get knowledge from various resources acquires best practices.
• Good understanding of financial domain especially in investment banking and banking domain.
Technical Architectures, Multi-threading Architecture, Algo Trading systems, Messaging Framework, FIX Implementation, Technical Analysis & Charting, ActiveMQ, MSMQ, C#, WinForms, ASP.NET MVC, Jquery, WCF, Sql Server 2008, Oracle, TFS, TDD, QuickFix, Open Source Tools & Framework.