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.
• Solution Architect /Principle Lead Developer with 12 years of IT experience with more emphasize on Capital Domain and Investment banking domain.
• Strong experience in Continuous Integration, Delivery and DevOps solutions.
• Strong experience in drafting solutions, stakeholder communications and risk management.
• Proved strong coding and designing skills with agile approaches (TDD, XP framework, Pair Programming).
• Delivered many projects with involvement from inception to delivery phase.
• Strong experience in high performance, multithreaded, low latency applications.
• Ability to communicate with the business and technical stake holders effectively.
• Have extensive experience in Capital Market Domain: Front Office & BackOffice (Algorithm Trading tools, messaging framework, Enterprise bus, integration of FIX APIs and many trading APIs).
• Functional knowledge of Portfolio/Wealth Management, Equities, Fixed Income, Derivatives, Forex.
• Practical knowledge of building and practicing agile delivery methodologies (SCRUM, TDD, Kanban).
Technical Skills
• Architectural: Solution Design, Architectural Presentations (Logical, Component, Physical, UML diagrams)
• Languages: C#, C++
• Server Technologies: WCF, Web API,
• Middle Ware: ActiveMQ, RabbitMQ, Enterprise Service Bus
• UI Technologies: Winforms and WPF
• Web Technologies: Asp.Net Mvc, KnockOutJS, JQuery, Advance Java Scripts Concepts
• Databases: Sql Server 2008 +, MySQL
• Tools/Frameworks: TFS, SVN, NUnit, Rhino Mocks, Unity, NAnt, QuickFix/n, Nhibernate, LINQ, JIRA,
Functional Skills
• Wealth Management System, Trade Life Cycle, Trading Components and their integrations
• Working knowledge of Stocks, Bonds, CFDs,Forex, Futures and Options
• Pricing Systems, Market Data Management,
• BackOffice Processes : Settlement Processes, Netting, Tax, Commissions, Corporate Actions Handling,
• Reporting Solutions : OLTP and OLAP Data model designing
• FIX Engine implementation and integration
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
