<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>My Blog &#187; JavaScript Table Widgets</title>
	<atom:link href="http://www.peterclemons.org/blog/?cat=3&#038;feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://www.peterclemons.org/blog</link>
	<description>Software Engineering Topics</description>
	<lastBuildDate>Wed, 08 Aug 2012 15:55:30 +0000</lastBuildDate>
	<language>en-US</language>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=3.9.40</generator>
	<item>
		<title>So, which table is best?</title>
		<link>http://www.peterclemons.org/blog/?p=175</link>
		<comments>http://www.peterclemons.org/blog/?p=175#comments</comments>
		<pubDate>Tue, 10 Jul 2012 16:12:18 +0000</pubDate>
		<dc:creator><![CDATA[peter]]></dc:creator>
				<category><![CDATA[JavaScript Table Widgets]]></category>

		<guid isPermaLink="false">http://www.peterclemons.org/blog/?p=175</guid>
		<description><![CDATA[I propose DataTables is the best choice for any project wanting to provide a single solution for both desktop and mobile devices. While both jqGrid and DataTables are excellent technology and both meet the &#8220;good enough&#8221; criteria, DataTables has a &#8230; <a href="http://www.peterclemons.org/blog/?p=175">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<p>I propose DataTables is the best choice for any project wanting to provide a single solution for both desktop and mobile devices.</p>
<p>While both jqGrid and DataTables are excellent technology and both meet the &#8220;good enough&#8221; criteria, DataTables has a slight edge for mobile devices.<br />
<br />
<i style="font-size:85%;">* note that <a href="http://www.peterclemons.org/blog/?p=161">SlickGrid</a> was eliminated as a candidate.</i></p>
<h1>Here are my reasons for proposing DataTables:</h1>
<ul>
<li>DataTables has a smoother scrolling algorithm on mobile devices (iPad 3)
<ul>
<li><a href="http://www.youtube.com/watch?v=MzvrqdZs2fo">Video of jqGrid</a> scrolling on an iPad 3
<li><a href="http://www.youtube.com/watch?v=qtlFWE7YI2g">Video of DataTables</a> scrolling on an iPad 3
   </ul>
<li>DataTables auto-eliminates the scroll bar and uses the device&#8217;s scrolling method
<li>jqGrid&#8217;s styling is more heavily bound to JQuery UI, creating greater conflict as we try to be JQuery Mobile compliant
<li>DataTables implements Virtual Rendering &#8230;deferring draw calls until needed
<li>By Default, DataTables download size is considerably smaller: 25K vs 68K
<li>DataTables has an excellent unit test suite comprising over 2800 tests
<li>DataTables provides over 130 pre-built examples
<li>DataTables provides a nicer ability to &#8220;expand&#8221; a row to show additional detail
</ul>
<p>
Of course, jqGrid also has some advantages over DataTables.  However, we do not need these in our current solution.  For more details, see the <a href="http://www.peterclemons.org/blog/?p=121">jqGrid Evaluation</a> post.<br /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.peterclemons.org/blog/?feed=rss2&#038;p=175</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Using DataTables with ThemeRoller &#8211; Mobile styles</title>
		<link>http://www.peterclemons.org/blog/?p=95</link>
		<comments>http://www.peterclemons.org/blog/?p=95#comments</comments>
		<pubDate>Fri, 06 Jul 2012 23:42:13 +0000</pubDate>
		<dc:creator><![CDATA[peter]]></dc:creator>
				<category><![CDATA[JavaScript Table Widgets]]></category>

		<guid isPermaLink="false">http://www.peterclemons.org/blog/?p=95</guid>
		<description><![CDATA[Since our project requires a single code base for both desktop and mobile clients, the list we choose needs to look good in both places. Ideally, we could limit ourselves to just the JQuery-Mobile styles, and it would look good &#8230; <a href="http://www.peterclemons.org/blog/?p=95">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<style>
DIV.blog>ul>li {margin-left:0px;}
DIV.blog>ul>li:first-child {margin-top:-20px;}
DIV.blog>ul>li blockquote {line-height:105%; font-size:95%; margin-top:0px; margin-left:0px; margin-bottom:-17px;}
DIV.blog blockquote {line-height:105%; font-size:95%; margin-top:-20px; margin-left:0px; margin-bottom:0px; padding-bottom:3px;}
</style>
<div class="blog">
Since our project requires a single code base for both desktop and mobile clients, the list we choose needs to look good in both places.  Ideally, we could limit ourselves to just the JQuery-Mobile styles, and it would look good on both.  This post attempts to investigate that objective:</p>
<h1>Useful Links</h1>
<ul>
<li><strong>Doc</strong> &#8211; <a href="http://jquerymobile.com/test/index.html">http://jquerymobile.com/test/index.html</a>
<li><strong>ThemeRoller</strong> &#8211; <a href="http://jquerymobile.com/themeroller/">http://jquerymobile.com/themeroller/</a>
<li><strong>List Content formatting</strong> &#8211; <a href="http://jquerymobile.com/test/docs/lists/lists-formatting.html">http://jquerymobile.com/test/docs/lists/lists-formatting.html</a>
</ul>
<h1>What styles apply to a list?</h1>
<p>Here&#8217;s my first attempt at styling a DataTables table using JQuery-Mobile styles<br />
<img src="http://www.peterclemons.org/blog/wp-content/uploads/2012/07/DataTables-Theming-Just-Learning.jpg"></p>
<p>Ignore how ugly it looks &#8230;I&#8217;m just learning about JQuery-Mobile styles, and I&#8217;m trying lots of different things in this image all at once.</p>
<blockquote><p><strong>NOTE 1:</strong> I have not yet redefined the style definitions in my Theme-Roller produced stylesheet.  That&#8217;s why it looks so ugly.</p></blockquote>
<blockquote><p><strong>NOTE 2:</strong> I tried letting JQuery-Mobile apply its styles based on the data-role type attributes &#8230;but you&#8217;ll note that doesn&#8217;t seem to work for a dynamically-produced table</p></blockquote>
<blockquote><p><strong>NOTE 3:</strong> For now, I&#8217;m using swatch &#8220;A&#8221; from my stylesheet.  Not quite sure yet if I&#8217;ll want to create a swatch just for tables or not.  For now, I&#8217;m thinking no &#8230;each swatch could redefine the table&#8217;s appearance.</p></blockquote>
<h1>Here&#8217;s what I learned</h1>
<h2>JQuery Mobile &#8211; Applying the correct List styles</h2>
<ul>
<li>For now anyways, the closest thing to tables JQuery-Mobile has support for is &#8220;lists&#8221;
<li>Therefore, I applied the following styles which are the same styles JQuery-Mobile lists use:
<ul>
<li><strong>table headings</strong> &#8211; ui-li ui-bar-a
<li><strong>rows (&lt;tr&gt;)</strong> &#8211; ui-li ui-btn ui-btn-up-a
<li><strong>row hovers</strong> &#8211; ui-btn-hover-a
<li><strong>Heading data in cells</strong> &#8211; ui-li-heading
<li><strong>Normal text in cells</strong> &#8211; ui-li-desc
<li><strong>Bolded data in cells</strong> &#8211; just use &lt;strong&gt; around text within the ui-li-desc div
<li>I still need to style the pagination control.  I will probably use DataTable&#8217;s various $.fn.dataTableExt.oStdClasses.* variables to do that.
<ul>
<li>I guess on that note, you&#8217;ll find that I set the &#8220;bJQueryUI&#8221; flag to false
<li>JQuery UI&#8217;s styles just conflict too much with JQuery-Mobile&#8217;s styles
      </ul>
</ul>
</li>
</ul>
<h2>Making Changes to the List style definitions</h2>
<ul>
<li>I also updated some of the styles in my ThemeRoller-produced style sheet
<ul>
<li>added ui-bar-a:hover &#8211; to give a hover effect on the column headers
   </ul>
</li>
</ul>
<h2>JQuery Mobile &#8211; &#8220;Data-Role&#8221; Attributes</h2>
<ul>
<li>I also had to mess around with a few other things to get it to behave properly within a JQuery-Mobile environment
<ul>
<li>just to be proper, I added the &#8220;ui-listview&#8221; style to the DataTables table object
<li>likewise, I added the data-role of &#8220;listview&#8221;
<li>I had to redefine the display attribute for rows to table-row
<li>and did the same thing for header rows:  display:table-row;
   </ul>
</li>
<li>Note the <strong>data-icon=&#8217;arrow-r&#8217;</strong> text in the bar above the table.  See the little &#8220;right arrow&#8221; icon at the far-right of the bar.  Seems to work fine.
<ul>
<li>Now take a look at the same text in each row&#8217;s &#8220;Name&#8221; column.  The text is there, but the actual icon isn&#8217;t.
<li>In other words, I can&#8217;t seem to get JQuery-Mobile to dynamically render my styles within the table.  More on this in a future post I suspect <img src="http://www.peterclemons.org/blog/wp-includes/images/smilies/icon_smile.gif" alt=":-)" class="wp-smiley" />
   </ul>
</li>
</ul>
<h1>DataTables &#8211; sDOM &#8211; moving things around</h1>
<ul>
<li>Take a look at the navigation and search bars &#8230;they&#8217;re way at the top of the screen
<ul>
<li>That&#8217;s because I created my own &lt;div&gt;s and wanted to move these controls elsewhere in the document
<ul>
<li> var search = $(&#8216;.dataTables_filter&#8217;); $(&#8216;#search&#8217;).append ( search );
<li> var navBar = $(&#8216;.dataTables_paginate&#8217;); $(&#8216;#page_nav_bar&#8217;).append ( navBar );
      </ul>
</li>
<li>Why didn&#8217;t I just use sDOM to move things around?
<ul>
<li> Because sDOM can only create the various DataTable controls above or below the table (even both).
<li> But it cannot create them disconnected from the table.  In my case, I will have other controls between the table&#8217;s search box and the table itself.
<li> I think using JQuery&#8217;s append() method to move things around is quite nice &#8230;except it does this after the items are already attached to the DOM &#8230;this might be a flicker or speed issue.  More on this later&#8230;
      </ul>
</ul>
</li>
</ul>
<p></blog></p>
]]></content:encoded>
			<wfw:commentRss>http://www.peterclemons.org/blog/?feed=rss2&#038;p=95</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>SlickGrid Evaluation</title>
		<link>http://www.peterclemons.org/blog/?p=161</link>
		<comments>http://www.peterclemons.org/blog/?p=161#comments</comments>
		<pubDate>Fri, 06 Jul 2012 04:44:13 +0000</pubDate>
		<dc:creator><![CDATA[peter]]></dc:creator>
				<category><![CDATA[JavaScript Table Widgets]]></category>

		<guid isPermaLink="false">http://www.peterclemons.org/blog/?p=161</guid>
		<description><![CDATA[SlickGrid Links - Home: https://github.com/mleibman/SlickGrid/wiki - Examples: https://github.com/mleibman/SlickGrid/wiki/Examples - AJAX paging: http://mleibman.github.com/SlickGrid/examples/example6-ajax-loading.html - Used By: https://github.com/mleibman/SlickGrid/wiki/Used-by NOTE A full evaluation of this product was not performed. Although I spent as much time in the evaluation as the other tables, I &#8230; <a href="http://www.peterclemons.org/blog/?p=161">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<style>
DIV.blog>ul>li {margin-left:0px;}
DIV.blog>ul>li:first-child {margin-top:-20px;}
DIV.blog>ul>li blockquote {line-height:105%; font-size:95%; margin-top:0px; margin-left:0px; margin-bottom:-17px;}
DIV.blog blockquote {line-height:105%; font-size:95%; margin-top:-20px; margin-left:0px; margin-bottom:0px; padding-bottom:3px;}
</style>
<div class="blog">
<h1>SlickGrid Links</h1>
<p>- Home: <a href="https://github.com/mleibman/SlickGrid/wiki">https://github.com/mleibman/SlickGrid/wiki</a><br />
- Examples: <a href="https://github.com/mleibman/SlickGrid/wiki/Examples">https://github.com/mleibman/SlickGrid/wiki/Examples</a><br />
- AJAX paging: <a href="http://mleibman.github.com/SlickGrid/examples/example6-ajax-loading.html">http://mleibman.github.com/SlickGrid/examples/example6-ajax-loading.html</a><br />
- Used By: <a href="https://github.com/mleibman/SlickGrid/wiki/Used-by">https://github.com/mleibman/SlickGrid/wiki/Used-by</a></p>
<h1>NOTE</h1>
<p>A full evaluation of this product was not performed.  Although I spent as much time in the evaluation as the other tables, I determined that SlickGrid is no longer a candidate for our use.</p>
<h1>Here&#8217;s what I learned:</h1>
<p>1) SlickGrid is primarily designed around the &#8220;paging via scroll bar&#8221; mechanism.  Actually, to be even more precise, it&#8217;s really &#8220;rendering via scroll bar&#8221;.  SlickGrid primarily attempts to load all records into JavaScript, then defers rendering of those records until they&#8217;re scrolled into view.</p>
<p>2) SlickGrid does have a remote paging capability as seen in <a href="http://mleibman.github.com/SlickGrid/examples/example6-ajax-loading.html">Example 6</a>.  However, almost all of its examples, and most of its add-ons, are geared around the concept that everything&#8217;s already loaded into Javascript variables.  When using server-side paging, it does offload the filtering and sorting to the server.</p>
<p>3) <a href="http://mleibman.github.com/SlickGrid/examples/example4-model.html">Example 4</a>, the <a href="http://mleibman.github.com/SlickGrid/examples/example-grouping">Grouping Example</a>, and the <a href="http://mleibman.github.com/SlickGrid/examples/example-optimizing-dataview.html">Optimized DataView Example</a> show a paging navigator control (enabled via the small icon at bottom-right).  However, examples do not exist for server-side paged data.</p>
<ul>
<li> The current Slick.Controls.Pager widget (which produces the nav bar) was intended for use with the DataView class.  The DataView class, in turn, was designed to work with fully-loaded data.  Hence, the navigation bar cannot at this time be used with AJAX- loaded data.  There are people who have gotten it to work with various hacks, but this is not yet part of this library.
</ul>
<p>4) SlickGrid does NOT use &lt;table&gt;&lt;tr&gt;&lt;td&gt; codes.  Instead, it uses a series of div&#8217;s<br />
5) SlickGrid is not as mature, well supported, or well documented as jqGrid or DataTables</p>
<p>============================================================</p>
<h1>Evaluation</h1>
<p>In order to properly evaluate jqGrid, DataTables, and SlickGrid against our &#8220;good enough&#8221; criteria, I set up a test REST server that returns &#8220;real&#8221; JSON data.  The server contains a list of over 10,000 objects.</p>
<p>While the data is real, the response time is not.  The test REST server pre-fetches all real data from back-end services, then cache&#8217;s that data internally in order to eliminate server response time in the evaluation.  While real server calls are measured in 10ths of seconds, my test REST server&#8217;s average response time is 3ms for any given page of 50 objects.</p>
<p>I had to create unique REST end-points for each of my tables in this evaluation because each uses different parameters to control the list behavior.  They all pull from the same list of cached objects.</p>
<p>I created a test html file &#8212; /SlickGrid/slickgrid.html &#8212; which creates a SlickGrid table and loads Users (50 at a time from a set of 10,000) from a SlickGrid-specific REST end-point.</p>
<p>1) Performance is #1</p>
<ul>
<li> performance of fetching remote data is outstanding &#8230;just like the other table controls
<li> 50 records:  desktop, round-trip is 3ms, iPad3 it&#8217;s about .3s &#8211; .5s
<li> 500 records:  <not tested>
<li> SlickGrid implements Virtual Rendering preventing the drawing of a given row until it is scrolled into view
<li> SlickGrid is capable of post-rendering work.  For example, filling a given cell with a value from the server even after the row&#8217;s been scrolled into view.  Here&#8217;s an example. Post-rendering takes place only when the UI is idle.  Rows are processed 1-by-1.
</ul>
<p>2) Device requirements: performance and functionality will be determined by ICS-based tablets, not older Honeycomb devices, not smart phones</p>
<ul>
<li> As noted above, performance on an iPad3 is outstanding
</ul>
<p>3) Table paging and navigation will be performed by next, prev, first, last, and #&#8217;s links</p>
<ul>
<li> SlickGrid does not provide a navigation control for ajax-loaded data since it is primarily a page-via-scrollbar solution
<li> Turns out the current Slick.Controls.Pager widget (which produces the nav bar) was intended for  use with the DataView class.  The DataView class, in turn, was designed to work with fully-loaded data.  Hence, the navigation bar cannot at this time be used with AJAX-loaded data.  There are people who have gotten it to work with various hacks, but this is not yet part of this library.
</ul>
<p>4) The table will load 1 &#8220;page&#8221; of data at a time, if the rows don&#8217;t &#8220;fit&#8221; the vertical table size, users may scroll to see the rest of the page</p>
<ul>
<li> SlickGrid&#8217;s loads 1 &#8220;page&#8221; of data at a time.  Previously loaded data is cached.
<li> However, it does not provide a navigation control.  Hence, the only pagination is via the scroll bar.
<li> If the fetched rows don&#8217;t &#8220;fit&#8221; the vertical table size, users may scroll to see the rest of the page
<li> The table can be sized such that it grows as needed to accommodate all rows
</ul>
<p>5) The table will not cache previous requests (to protect mobile devices; and if #1 is met, no need)</p>
<ul>
<li> SlickGrid by default CACHE&#8217;s previous requests
<li> Uncertain if this can be turned off
</ul>
<p>6) All paging, filtering, sorting will be performed by the back-end; none in the client</p>
<ul>
<li> SlickGrid can be set up to paging, filtering, and sorting in both the UI and the back-end
<li> However, SlickGrid&#8217;s DataView (required for using the navigation widget) is only available for fully-loaded data (not AJAX data)
<li> When loading AJAX data, SlickGrid performs paging, filtering, and sorting by the back-end
</ul>
<p>7) We will filter on only string data originating from the server for now</p>
<ul>
<li> Unexamined
</ul>
<p>8) Code size should not exceed 200K (minified and gzip&#8217;d); the smaller the better</p>
<ul>
<li> Unexamined
</ul>
<p>9) We will only select a mature, well supported Table widget. We will not make our own.</p>
<ul>
<li> Current version: 2.0.1, actively developed
<li> This product does not appear to be as mature, as well supported, or as well documented as jqGrid or DataTables
</ul>
<p>10) Theming Support :</p>
<ul>
<li> Unexamined
</ul>
<p>11) Table must by stylable as in our mockups</p>
<ul>
<li> Unexamined
<li> Every cell can be given a specific style name.  Hence, I believe the table is stylable
<li> <a href="http://mleibman.github.com/SlickGrid/examples/example8-alternative-display.html">SlickGrid</a> is able to use <a href="http://ejohn.org/blog/javascript-micro-templating/">John Resig&#8217;s micro-templates</a> while still using SlickGrid&#8217;s virtual rendering technology
</ul>
<p>12) Single select for Marketplace; likely multi-select for future</p>
<ul>
<li> SlickGrid supports single selection via row-selection or checkboxes
<li> multi-select with checkboxes &#8230;but mostly unexamined
</ul>
<p>13) In-row actions for Marketplace; likely top-of list actions for future</p>
<ul>
<li> SlickGrid supports any buttons we&#8217;d like to place in a row
<li> SlickGrid is capable of post-rendering work.  For example, filling a given cell with a value from the server even after the row&#8217;s been scrolled into view.  Here&#8217;s an example. Post-rendering takes place only when the UI is idle.  Rows are processed 1-by-1.
</ul>
<p>14) No in-cell editing for now</p>
<ul>
<li> SlickGrid does support in-cell editing, however this can easily be turned off
</ul>
<p>15) No &#8220;View As&#8230;&#8221; alternate views for now</p>
<ul>
<li> SlickGrid does not directly support alternate views for its tables
</ul>
<p>16) No conclusion on table width handling. However, the survey says most people would like to see columns shrink until it&#8217;s ridiculous, then hide low-priority columns altogether</p>
<ul>
<li> Columns can be fixed or proportionally sized
<li> Data within the cells shows ellipses if cell contents exceed cell size
</ul>
<p>17) The table needs to support a distribution-friendly license</p>
<ul>
<li> SlickGrid is licensed under the MIT
</ul>
<p></blog></p>
]]></content:encoded>
			<wfw:commentRss>http://www.peterclemons.org/blog/?feed=rss2&#038;p=161</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jqGrid Evaluation</title>
		<link>http://www.peterclemons.org/blog/?p=121</link>
		<comments>http://www.peterclemons.org/blog/?p=121#comments</comments>
		<pubDate>Thu, 05 Jul 2012 01:47:55 +0000</pubDate>
		<dc:creator><![CDATA[peter]]></dc:creator>
				<category><![CDATA[JavaScript Table Widgets]]></category>

		<guid isPermaLink="false">http://www.peterclemons.org/blog/?p=121</guid>
		<description><![CDATA[Test REST Server In order to properly evaluate jqGrid, DataTables, and SlickGrid against our &#8220;good enough&#8221; criteria, I set up a test REST server that returns &#8220;real&#8221; JSON data. The server contains a list of over 10,000 objects. While the &#8230; <a href="http://www.peterclemons.org/blog/?p=121">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<style>
DIV.blog>ul>li {margin-left:0px;}
DIV.blog>ul>li:first-child {margin-top:-20px;}
DIV.blog>ul>li blockquote {line-height:105%; font-size:95%; margin-top:0px; margin-left:0px; margin-bottom:-17px;}
DIV.blog blockquote {line-height:105%; font-size:95%; margin-top:-20px; margin-left:0px; margin-bottom:0px; padding-bottom:3px;}
</style>
<div class="blog">
<p><strong>Test REST Server</strong><br />
In order to properly evaluate jqGrid, DataTables, and SlickGrid against our &#8220;good enough&#8221; criteria, I set up a test REST server that returns &#8220;real&#8221; JSON data.  The server contains a list of over 10,000 objects.</p>
<p>While the data is real, the response time is not.  The test REST server pre-fetches all real data from back-end services, then cache&#8217;s that data internally in order to eliminate server response time in the evaluation.  While real server calls are measured in 10ths of seconds, my test REST server&#8217;s average response time is 3ms for any given page of 50 objects.</p>
<p>I had to create unique REST end-points for each of my tables in this evaluation because each uses different parameters to control the list behavior.  They all pull from the same list of cached objects.</p>
<h1>jqGrid Links</h1>
<p>- Home: <a href="http://www.trirand.com/blog/">http://www.trirand.com/blog/</a><br />
- Wiki: <a href="http://www.trirand.com/jqgridwiki/doku.php">http://www.trirand.com/jqgridwiki/doku.php</a><br />
- Examples: <a href="http://www.trirand.com/blog/jqgrid/jqgrid.html">http://www.trirand.com/blog/jqgrid/jqgrid.html</a><br />
- Addl Examples: <a href="http://www.trirand.net/demo.aspx">http://www.trirand.net/demo.aspx</a><br />
- Code: <a href="http://www.trirand.com/blog/jqgrid/downloads/jqgrid_demo38.zip">http://www.trirand.com/blog/jqgrid/downloads/jqgrid_demo38.zip</a><br />
- Column Model: <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options</a><br />
- Params: <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options</a><br />
- Themes: <strong>NOTE:</strong> jqGrid uses <a href="http://jqueryui.com/themeroller/">jQuery UI &#8211; ThemeRoller</a> to style its table.  This could be a problem for us because JQuery UI and JQuery-Mobile don&#8217;t play well together.  We&#8217;ll see&#8230;<br />
- Commercial Web Site: <a href="http://www.trirand.net/">http://www.trirand.net/</a></p>
<h1>Evaluation</h1>
<p>I created a test html file which creates a jqGrid table and loads 50 objects at a time from the REST end-point mentioned above. Remember, it&#8217;s a cache&#8217;d list.</p>
<p>1) Performance is #1</p>
<ul>
<li>Like DataTables, performance is outstanding &#8230;actually, when fetching records, it&#8217;s identical because it&#8217;s the same back-end
<li>50 records:  desktop, round-trip is 3ms, iPad3 is about .3s &#8211; .5s
<li>500 records:  desktop, round-trip is 15ms, iPad3 is about 1s
<li>Unlike SlikGrid and DataTables, jqGrid does not implement Virtual Rendering.  As far as I can tell, it renders the full result set as soon as it&#8217;s received.  Don&#8217;t know how much of a performance hit this is, but it could be a big deal depending on what you put in your cells.
<li>However, with jqGrid&#8217;s gridview parameter, it is able to &#8220;append&#8221; all the rows with a single call &#8230;making it a very fast operation.  Note that this choice comes with some limitations:  for example, no afterInsertRow event, etc.
<li>I do not like how jqGrid handles the scroll bar on an iPad3.  While it appropriately hides the scroll bar, the table does NOT take over the available space.  Further, when scrolling, it does not use the iPad3&#8242;s &#8220;thin&#8221; scroll bar.  Finally, when fast swiping, it stops scrolling immediately after you&#8217;ve quit touching &#8230;to smooth scroll stop like you&#8217;d expect.
</ul>
<p>2) Device requirements: performance and functionality will be determined by low-powered, ICS-based tablets, not older Honeycomb devices, nor smart phones</p>
<ul>
<li>As noted above, performance on an iPad3 is outstanding
<li>Performance on a Honeycomb smart phone (Galaxy S2 on T-Mobile) is acceptable (but not part of our required criteria)
</ul>
<p>3) Table paging and navigation will be performed by next, prev, first, last, and #&#8217;s links</p>
<ul>
<li>jqGrid supports both paging-via-navigation-controls and paging-via-scrollbar
<li>Here&#8217;s an example: Can do this: <a href="http://trirand.com/blog/jqgrid/jqgrid.html">http://trirand.com/blog/jqgrid/jqgrid.html</a> look at Advanced/Master Detail
</ul>
<p>4) The table will load 1 &#8220;page&#8221; of data at a time, if the rows don&#8217;t &#8220;fit&#8221; the vertical table size, users may scroll to see the rest of the page</p>
<ul>
<li>jqGrid will load 1 &#8220;page&#8221; of data at a time
<li>If the fetched rows don&#8217;t &#8220;fit&#8221; the vertical table size, users may scroll to see the rest of the page.  Note my &#8220;scrolling&#8221; comments in the Performance section above.
<li>The table can be sized such that it grows as needed to accommodate all rows
</ul>
<p>5) The table will <strong>not</strong> cache previous requests (to protect mobile devices; and if #1 is met, no need)</p>
<ul>
<li>jqGrid by default does not cache previous requests
<li>I am uncertain if jqGrid can be set up to pre-fetch addl pages or not ??????
</ul>
<p>6) All paging, filtering, sorting will be performed by the back-end; none in the client</p>
<ul>
<li>jqGrid supports paging, filtering, and sorting in both the UI and the back-end
</ul>
<p>7) We will filter on only string data originating from the server for now</p>
<ul>
<li>According to its doc, developers can specify sorting for various types including string, number, boolean, link, select and percent.  However, I believe this is for client-side processing only, and is not part of ajax-based solutions.
</ul>
<p>8) Code size should not exceed 200K (minified and gzip&#8217;d); the smaller the better</p>
<ul>
<li>File size: File size: CSS: 12K;  JS 430K raw / 270K minified / 68K  gzip&#8217;d;
<li>3 times larger than DataTables
</ul>
<p>9) We will only select a mature, well supported Table widget. We will not make our own.</p>
<ul>
<li>jqGrid is currently in version 4.4.0 (released in June 2012)
<li>and has been developed now for at least 3 years, since 2009 &#8230;but I actually suspect much longer since that was version 3.5.x
<li>has over 8,500 threads (27,000 posts) in its on-line forums
<li>Unknown number of unit tests &#8230;I&#8217;m uncertain how rock-solid this product is.  Probably pretty good.
<li>It does not provide very many pre-built examples &#8230;but the ones that are there suffice
</ul>
<p>10) Theming Support :</p>
<ul>
<li>DataTables supports ONLY JQuery UI ThemeRoller classes
<li>However, with the rich set of overridable events, I believe we could add/remove any styles we want &#8230;just like DataTables
</ul>
<p>11) Table must by stylable to may our particular look and feel</p>
<ul>
<li>jqGrid does not specifically provide APIs to apply the styles we want throughout the table.  However, with the rich set of overridable events, I believe it can be styled to match our needs &#8230;just like DataTables.
<li>jqGrid provides a very rich Column Renderer which is passed the backing row Object and the property value &#8230;giving the renderer the opportunity to display addl fields in each cell
<li>jqGrid does not really permit row expansion showing more details about a row Object.  Any examples I&#8217;ve seen add additional rows &#8230;kinda klunky.
</ul>
<p>12) Row selection (single select for now; multi-select for future)</p>
<ul>
<li>jqGrid supports single selection via row-selection or checkboxes
<li>I do not believe jqGrid supports multi-select across page boundries like DataTables does.  Not sure I care though either
</ul>
<p>13) Links / Actions &#8211; in-row actions for now; likely top-of list actions for future</p>
<ul>
<li>With its column renderers, jqGrid supports placing any data into a cell, including buttons/actions
<li>jqGrid will use any specified Object value (for example: id) as the row&#8217;s ID attribute
<li>jqGrid supports a very rich set of custom events which code can bind to
</ul>
<p>14) Editing: no in-cell editing for now</p>
<ul>
<li>jqGrid supports in-cell / in-row editing
<li>2 method exist: see &#8220;Row Editing -> In-Line Navigator&#8221; and &#8220;Live Data Manipulation -> Navigator&#8221; examples
</ul>
<p>15) Alternate Views: no &#8220;View As&#8230;&#8221; alternate views for now</p>
<ul>
<li>jqGrid does not directly support alternate views for its tables
</ul>
<p>16) No conclusion on table width handling. However, most people would like to see columns shrink until it&#8217;s ridiculous, then hide low-priority columns altogether</p>
<ul>
<li>A jqGrid table normally sizes to the combined widths of its visible columns
<li>However, you can also set the grid width, and the columns will adjust accordingly
<li>I have not seen any example where the table&#8217;s width sizes dynamically.  Seems to always be based on the grid&#8217;s &#8220;set Width&#8221;
<li>Data within a jqGrid cell by default does NOT wraps unto addl lines (However, I&#8217;m sure we could easily change this with the CSS whitespace property).  By default, when a cell&#8217;s data exceeds the cell bounds, ellipses show&#8230;
<li>Uncertain if jqGrid could auto-show/hide low priority columns based on table width
</ul>
<p>17) The table needs to support a distribution-friendly license</p>
<ul>
<li>jqGrid is licensed under the free MIT license
<li>However, they have also launched an official commercial website <a href="http://www.trirand.net">http://www.trirand.net</a>
</ul>
<h1>Special Notes</h1>
<ul>
<li> jqGrid supports a truly awesome Column Model
<li> I&#8217;m not too impressed with its &#8220;row&#8221; editor &#8230;adequate, but not beautiful.  Of course, we can style any way we want.
<li> I don&#8217;t know why jqGrid&#8217;s &#8220;row expansion&#8221; feature simply adds more rows.  In my testing, I learned that I can place any amount of data into each cell, independent of the other cells.  In other words, rows can have variable row height, and I could auto-expand the current row if I wanted to. I think they should specifically make an &#8220;expand&#8221; feature for rows to show addl detail.
<li> jqGrid supports a grid within a grid!
<li> jqGrid support a &#8220;tree&#8221; control by adding additional rows with indented values.  Kinda cool!.  Check out the &#8220;simple&#8221; example at: <a href="http://www.trirand.net/demotreephp.aspx">http://www.trirand.net/demotreephp.aspx</a>
<li> jqGrid has launched an official commercial website <a href="http://www.trirand.net">http://www.trirand.net</a>.  Check it out; there are some impressive demos there.  You&#8217;ll note that they&#8217;ve spent considerable time trying to make a list and tree out of the same control.  IOW, if you need a tree control, this is one is pretty good.
</ul>
<h1>Notable Params</h1>
<p>- 100 params<br />
- 20 Events<br />
- over 50 Triggered Events !!</p>
<pre>
ajaxGridOptions  - override all AJAX parameters including: error, complete, and beforesend events
altclass         - specify the class you want for the "alternate/zebra" rows.  Hmmm ...do they have this for all styles?
autowidth        - table auto-sizes (width) according to the size of its parent div
cellEdit         - enable editing
cellsubmit       - when editing, determine where the edits are saved (remote or clientArray/local)
colModel         - array which describes the parameters of the columns
deepempty        - uses JQuery to empty a row; prevents memory leaks
direction        - good support for Right-to-Left and Left-to-Right languages
forceFit         - all columns will always consume 100% of the table width (adjacent columns adjust as needed)
hoverrows        - enable row hover effects
idPrefix         - add a prefix to a row's ID
loadui           - control what to do while loading: disabale, enable, block
mtype            - HTTP GET or POST
pager            - enable paging controls.  <strong>NOTE:</strong> this also controls into what HTML div to place the pager
pgtext           - show details about the current list
prmNames         - controls the names of all the parameters sent to the server
scroll           - tells jqGrid to disable paging controls and to enable paging-via-scrollbar
shrinkToFit      - recalculate column widths as the table shrinks
sortable         - uses JQuery UI to permit reordering of the columns.  Since we're trying to be JQuery Mobile compliant, we do not want this.
toolbar          - defines the tools available in the toolbar
treeGrid         - enable the "tree" aspects of the grid control
url              - the source of the ajax data
userData         - addl data to make part of the request
afterInsertRow   - method gets called after a row is created
beforeRequest    - before a request is made
beforeProcessing - after a response is received (but before doing anything with it)
gridComplete     - after all received data is fully processed
onPaging         - after selecting a paging options, but before processing the data
resizeStop       - fires after resizing event has taken place (resizeStart also)
tons and tons of other options and events
</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.peterclemons.org/blog/?feed=rss2&#038;p=121</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>DataTables Evaluation</title>
		<link>http://www.peterclemons.org/blog/?p=70</link>
		<comments>http://www.peterclemons.org/blog/?p=70#comments</comments>
		<pubDate>Sun, 01 Jul 2012 06:56:52 +0000</pubDate>
		<dc:creator><![CDATA[peter]]></dc:creator>
				<category><![CDATA[JavaScript Table Widgets]]></category>

		<guid isPermaLink="false">http://www.peterclemons.org/blog/?p=70</guid>
		<description><![CDATA[Test REST Server In order to properly evaluate DataTables against our &#8220;good enough&#8221; criteria, I set up a test REST server that returned &#8220;real&#8221; JSON data. The server contains a list of over 10,000 objects. While the data is real, &#8230; <a href="http://www.peterclemons.org/blog/?p=70">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<style>
DIV.blog>ul>li {margin-left:0px;}
DIV.blog>ul>li:first-child {margin-top:-20px;}
DIV.blog>ul>li blockquote {line-height:105%; font-size:95%; margin-top:0px; margin-left:0px; margin-bottom:-20px;}
DIV.blog blockquote {line-height:105%; font-size:95%; margin-top:-20px; margin-left:0px; margin-bottom:0px;}
</style>
<div class="blog">
<strong>Test REST Server</strong><br />
In order to properly evaluate DataTables against our &#8220;good enough&#8221; criteria, I set up a test REST server that returned &#8220;real&#8221; JSON data.  The server contains a list of over 10,000 objects.</p>
<p>While the data is real, the response time is not.  The test REST server pre-fetches all real data from back-end services, then cache&#8217;s that data internally in order to eliminate server response time in the evaluation.  While real server calls are measured in 10ths of seconds, my test REST server&#8217;s average response time is 3ms for any given page of 50 objects.</p>
<p><strong>DataTables</strong><br />
- Home: <a href="http://datatables.net/">http://datatables.net/</a><br />
- Examples: <a href="http://www.datatables.net/examples/">http://www.datatables.net/examples/</a><br />
- Tests: <a href="https://github.com/DataTables/DataTables/tree/master/media/unit_testing">https://github.com/DataTables/DataTables/tree/master/media/unit_testing</a><br />
- Params: <a href="http://datatables.net/ref">http://datatables.net/ref</a> (125 params supported)<br />
- Themes: <a href="http://datatables.net/styling/themes/ui-darkness">http://datatables.net/styling/themes/ui-darkness<br />
</a></p>
<p>I created a test html file which creates a DataTables table and loads 50 objects at a time from the REST end-point mentioned above. Remember, it&#8217;s a cache&#8217;d list.</p>
<p>1) Performance is #1</p>
<ul>
<li>performance is outstanding
<li>50 records:  desktop, round-trip is 3ms, iPad3 is about .3s &#8211; .5s
<li>500 records:  desktop, round-trip is 15ms, iPad3 is about 1s
<li>Like SlikGrid, DataTables implements Virtual Rendering with its bDeferRender parameter Rendered rows/cells are retained for 1-page scrolling
<li>I like how it handles the scroll bar on an iPad3.  With no addl coding, it auto hides the bar, and lets the table take over the available space.  Further, when scrolling, I like how it uses the iPad3&#8242;s &#8220;thin&#8221; scroll bar.  Finally, it uses the device&#8217;s fast swipe gesture to continue to scroll the list even after you&#8217;ve quit touching; obviously it stops after a second or two &#8230;just as you&#8217;d expect.
</ul>
<p>2) Device requirements: performance and functionality will be determined by low-powered, ICS-based tablets, not older Honeycomb devices, nor smart phones</p>
<ul>
<li>As noted above, performance on an iPad3 is outstanding
<li>Performance on a Honeycomb smart phone (Galaxy S2 on T-Mobile) is acceptable (but not part of our required criteria)
</ul>
<p>3) Table paging and navigation will be performed by next, prev, first, last, and #&#8217;s links</p>
<ul>
<li>DataTables supports both paging-via-navigation-controls, and paging-via-scrollbar
</ul>
<p>4) The table will load 1 &#8220;page&#8221; of data at a time, if the rows don&#8217;t &#8220;fit&#8221; the vertical table size, users may scroll to see the rest of the page</p>
<ul>
<li>DataTables will load 1 &#8220;page&#8221; of data at a time
<li>If the fetched rows don&#8217;t &#8220;fit&#8221; the vertical table size, users may scroll to see the rest of the page
<li>The table can be sized such that it grows as needed to accommodate all rows
</ul>
<p>5) The table will <strong>not</strong> cache previous requests (to protect mobile devices; and if #1 is met, no need)</p>
<ul>
<li>DataTables by default does not cache previous requests
<li>DataTables can be set up to pre-fetch addl pages as needed
</ul>
<p>6) All paging, filtering, sorting will be performed by the back-end; none in the client</p>
<ul>
<li>DataTables supports paging, filtering, and sorting in both the UI and the back-end
</ul>
<p>7) We will filter on only string data originating from the server for now</p>
<ul>
<li>DataTables has made some effort to support sorting and filtering on representations of the data other than what&#8217;s displayed (Enums vs their string implementation; dates; etc.) However, I believe this is for client-side processing only, and is not part of ajax-based solutions.
</ul>
<p>8) Code size should not exceed 200K (minified and gzip&#8217;d); the smaller the better</p>
<ul>
<li>File size: 68K minified / 20K gzip&#8217;d.  This is outstanding !!
<li>With addl plugins (FixedColumns, Scroller, etc.), +  20K minified / 6K gzip&#8217;d
</ul>
<p>9) We will only select a mature, well supported Table widget. We will not make our own.</p>
<ul>
<li>DataTables is currently in version 1.9.2
<li>and has been developed now for 4 years, since 2008
<li>has over 10,000 threads in its on-line forums
<li>backed by a suite of 2800 unit tests
<li>provides over 130 pre-built examples
</ul>
<p>10) Theming Support :</p>
<ul>
<li>DataTables supports JQuery ThemeRoller classes
<li>DataTables allows users to specify what class names to associate with HTML elements
<li>DataTables can render its add-on widgets (nav bar, search field, etc.) in HTML-provided div&#8217;s
</ul>
<p>11) Table must by stylable to may our particular look and feel</p>
<ul>
<li>With DataTables liberal handling of class names (user-definable globals hold class names), I believe it can be styled to match our needs
<li>DataTables provides a Column Renderer which is passed the backing row Object and the property value &#8230;giving the renderer the opportunity to display addl fields in each cell
<li>DataTables permits row expansion showing more details about a row Object
</ul>
<p>12) Row selection (single select for now; multi-select for future)</p>
<ul>
<li>DataTables supports single selection via row-selection or checkboxes
<li>DataTables supports multi-select across page boundries (sending selections to server)
</ul>
<p>13) Links / Actions &#8211; in-row actions for now; likely top-of list actions for future</p>
<ul>
<li>DataTables supports any buttons you need to place in a row
<li>If requested, DataTables will add unique IDs to each row in a paged table
<li>DataTables also supports custom events which code can bind to
</ul>
<p>14) Editing: no in-cell editing for now</p>
<ul>
<li>With its Editor plugin, DataTables does support in-cell editing if desired
</ul>
<p>15) Alternate Views: no &#8220;View As&#8230;&#8221; alternate views for now</p>
<ul>
<li>DataTables does not directly support alternate views for its tables
</ul>
<p>16) No conclusion on table width handling. However, most people would like to see columns shrink until it&#8217;s ridiculous, then hide low-priority columns altogether</p>
<ul>
<li>DataTables supports a dynamic width for its tables
<li>Columns resize when the table resizes
<li>Data within the cells re-wraps unto addl lines as needed (IOW, <strong>row height is not fixed</strong> when paginating via the navigation bar)
<li>Uncertain if DataTables could auto-show/hide low priority columns based on table width
</ul>
<p>17) The table needs to support a distribution-friendly license</p>
<ul>
<li>DataTables is dual licensed under the GPL v2 license or a BSD (3-point) license
<li>I&#8217;m no lawyer, but I suspect the BSD license is sufficient
</ul>
<p>Notable Params &#8212; 125 params exist!!</p>
<pre>
sServerMethod    - HTTP method to use GET | POST
bAutoWidth       - enable auto col width calculation; disable if col widths are in aoColumns
bProcessing      - show a "processing request" message
bPaginate        - enable pagination
sPaginationType  - style of pagination buttons/links; two_buttons
bLengthChange    - show the page size combo; requires bPaginate
aLengthMenu      - [[values], [display]]: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
iDisplayLength   - size of a page
bFilter          - show the search box; to remove box but keep filter ability, use sDom
bRegEx           - interpret search string as a regEx expression
bSmart           - use DataTable's smart filtering methods to match words at any point in the data
bJQueryUI        - enable JQuery UI ThemeRoller support; affects visibility of prev/next links
bInfo            - Show status bar details about the current table data; 1 to 10 of 100 (# filtered)
bScrollInfinite  - Pagination by using only the scroll bar
iScrollLoadGap   - Amount of scrolling left to go before pre-fetching the next page
bScrollCollapse  - Controls if the table's viewport should be shrunk on the last page
sScrollX         - Specify horizontal scrolling; blank = disabled
sScrollY         - Specify vertical scrolling
bSort            - Enable sorting; individual cols can be disabled /w bSortable option on each col "bSortClasses"
bStateSave       - Enable state saving; uses cookies
bDeferRender     - Only draw those rows that are visible; draw addl as needed
bServerSide      - filter, sort, page on server; must be used with sAjaxSource
sAjaxSource      - URL: /rest/service/endpoint
aoColumns        - Define column model
fnServerParams   - Define any addl data to send with page request
sDom             - Tell DataTables in what div's to render it search, msgs, &#038; nav bar widgets
fnRender         - Rendering function used to draw cell contents
</pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.peterclemons.org/blog/?feed=rss2&#038;p=70</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>What&#8217;s Good Enough?</title>
		<link>http://www.peterclemons.org/blog/?p=82</link>
		<comments>http://www.peterclemons.org/blog/?p=82#comments</comments>
		<pubDate>Sun, 01 Jul 2012 06:54:51 +0000</pubDate>
		<dc:creator><![CDATA[peter]]></dc:creator>
				<category><![CDATA[JavaScript Table Widgets]]></category>

		<guid isPermaLink="false">http://www.peterclemons.org/blog/?p=82</guid>
		<description><![CDATA[Based on survey results and subsequent discussions, here&#8217;s what we decided for a table widget: Performance is #1 Device requirements: performance and functionality will be determined by low-powered, ICS-based tablets, not older Honeycomb devices, not smart phones Table paging and &#8230; <a href="http://www.peterclemons.org/blog/?p=82">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<p>Based on survey results and subsequent discussions, here&#8217;s what we decided for a table widget:</p>
<ol>
<li>Performance is #1
<li>Device requirements: performance and functionality will be determined by low-powered, ICS-based tablets, not older Honeycomb devices, not smart phones
<li>Table paging and navigation will be performed by next, prev, first, last, and #&#8217;s links
<li>The table will load 1 &#8220;page&#8221; of data at a time, if the rows don&#8217;t &#8220;fit&#8221; the vertical table size, users may scroll to see the rest of the page
<li>The table will not cache previous requests (to protect mobile devices; and if #1 is met, no need)
<li>All paging, filtering, sorting will be performed by the back-end; none in the client
<li>We will filter on only string data originating from the server for now.  Filters on dates, UI-localized strings, enums, etc. will not function in the first release
<li>Code size should not exceed 200K (minified and gzip&#8217;d); the smaller the better
<li>We will only select a mature, well supported Table widget. We will not make our own.
<li>We would prefer a Theming model based on<br />
       &nbsp;&nbsp;- ThemeRoller for JQuery-Mobile<br />
       &nbsp;&nbsp;- if not ThemeRoller for JQuery<br />
       &nbsp;&nbsp;- if not code-specified style names<br />
       &nbsp;&nbsp;- anything goes</p>
<li>Table must by stylable as in our mockups
<li>Single select for now; likely multi-select for future
<li>In-row links / actions for now; likely top-of list actions for future
<li>No in-cell editing for now
<li>No &#8220;View As&#8230;&#8221; alternate views for now
<li>No conclusion on table width handling.  However, most people would like to see columns shrink until it&#8217;s ridiculous, then hide low-priority columns altogether
<li>The table needs to support a distribution-friendly license
</ol>
<p><strong>Next Steps</strong> &#8211; evaluate table controls along these criteria<br />
- Those table controls that are still in the running after this analysis will be wired up against live / real data<br />
- However, the data will be cached in the server in order to eliminate the server portion of the performance analysis (we want to see how well the grids perform &#8230;not how long the server takes to fulfill a request)<br />
- We have narrowed the list to DataTables, jqGrid, and SlickGrid &#8230;and a quick peek at JQuery</p>
<p>- DataTables</p>
<ul>
<li>Home: <a href="http://datatables.net/">http://datatables.net/</a>
<li>Examples: <a href="http://www.datatables.net/examples/">http://www.datatables.net/examples/</a>
<li>Tests: <a href="https://github.com/DataTables/DataTables/tree/master/media/unit_testing">https://github.com/DataTables/DataTables/tree/master/media/unit_testing</a>
<li>License: BSD or GPLv2
<li>Most notable features: 20K gzip&#8217;d, plugins for addl features; 2800 unit tests; 130 examples
</ul>
<p>- SlickGrid</p>
<ul>
<li>Home: <a href="https://github.com/mleibman/SlickGrid/wiki">https://github.com/mleibman/SlickGrid/wiki</a>
<li>Examples: <a href="https://github.com/mleibman/SlickGrid/wiki/Examples">https://github.com/mleibman/SlickGrid/wiki/Examples</a>
<li>Used By: <a href="https://github.com/mleibman/SlickGrid/wiki/Used-by">https://github.com/mleibman/SlickGrid/wiki/Used-by</a>
<li>License: MIT
<li>Current version: 2.0.1, actively developed
<li>Most notable features: speed, virtual rendering
</ul>
<p>- jqGrid</p>
<ul>
<li>Current version: 4.4.0, actively developed
<li>Home: <a href="http://www.trirand.com/blog/">http://www.trirand.com/blog/</a>
<li>Examples: <a href="http://www.trirand.com/blog/jqgrid/jqgrid.html">http://www.trirand.com/blog/jqgrid/jqgrid.html</a>
<li>Demos: <a href="http://www.trirand.com/blog/jqgrid/downloads/jqgrid_demo38.zip">http://www.trirand.com/blog/jqgrid/downloads/jqgrid_demo38.zip</a>
<li>License: MIT or GPL
<li>Most notable features: ?
</ul>
<p>- JQuery UI Grid &#8211; not really a candidate since it appears this component is currently on hold</p>
<ul>
<li>Home: <a href="http://wiki.jqueryui.com/w/page/34246941/Grid#jQueryUIGridProject">http://wiki.jqueryui.com/w/page/34246941/Grid#jQueryUIGridProject</a>
<li>Due to its development timeframe, it is unlikely we will use this widget.
<li>But since it&#8217;s part of the JQuery project, it would be good to learn more about it.
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.peterclemons.org/blog/?feed=rss2&#038;p=82</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Selecting a Table Widget</title>
		<link>http://www.peterclemons.org/blog/?p=13</link>
		<comments>http://www.peterclemons.org/blog/?p=13#comments</comments>
		<pubDate>Sat, 30 Jun 2012 04:51:49 +0000</pubDate>
		<dc:creator><![CDATA[peter]]></dc:creator>
				<category><![CDATA[JavaScript Table Widgets]]></category>

		<guid isPermaLink="false">http://www.peterclemons.org/blog/?p=13</guid>
		<description><![CDATA[Here are some criteria you might consider as you select a Table control: 1) Table Format is the resultant HTML formatting important. For example, do you want the resultant HTML to be a bunch of div&#8217;s or table tags 2) &#8230; <a href="http://www.peterclemons.org/blog/?p=13">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<style>
DIV.blog>ul>li {margin-left:0px;}
DIV.blog>ul>li:first-child {margin-top:-20px;}
DIV.blog>ul>li blockquote {line-height:105%; font-size:95%; margin-top:0px; margin-left:0px; margin-bottom:-20px;}
DIV.blog blockquote {line-height:105%; font-size:95%; margin-top:-20px; margin-left:0px; margin-bottom:0px;}
</style>
<div class="blog">
Here are some criteria you might consider as you select a Table control:</p>
<p>1) Table Format</p>
<ul>
<li>is the resultant HTML formatting important. For example, do you want the resultant HTML to be a bunch of div&#8217;s or table tags
</ul>
<p>2) Performance</p>
<ul>
<li>what level of performance is acceptable (data retrieval, rendering, paging, filtering, etc.)
<li>does the table have to be performant on tablet devices, how about smart phones
<li>does it have to be performant on older devices or the latest browsers, IOS, and Android releases
</ul>
<p>3) Browser Support</p>
<ul>
<li>IE
<li>FF
<li>Chrome
<li>Safari
<li>Opera
<li>Tablet devices
<li>Smart phones
</ul>
<p>4) As a Table changes size, what should happen to the table width, scroll bars, and columns?</p>
<ul>
<li>table has fixed width, potentially requiring horizontal scrolling
<li>table has fixed width with internal table scrolling
<li>table has a dynamic width, where columns shrink/expand as necessary
<li>table has a dynamic width, where columns are added/removed as necessary<br />
<blockquote><p>if a table is defined with 5 columns in full width mode, as the dimensions of the display get smaller, perhaps from landscape to portrait display, or from being viewed on a smaller device, some of the columns might simply be removed, leaving only the most important ones to take up the remaining limited display.</p></blockquote>
<li>table has a dynamic width, where column widths shrink proportionally until it becomes ridiculous, then low priority columns hide altogether
</ul>
<p>5) What type of row height control is sufficient?</p>
<ul>
<li>table must support variable rows height
<li>rows must be fixed height, but each table can be defined to have its own row height
<li>rows must be fixed height, and all tables must support that one height
</ul>
<p>6) What level of support should the table widget provide for expanding or collapsing a row to show additional details?</p>
<blockquote><p><b>NOTE:</b> in answering this question, consider tooltips, in-line text, help systems, object view dialogs, multi-line cells, etc.</p></blockquote>
<p>7) Column Widths</p>
<ul>
<li>should columns be user sizeable
<li>should columns be code sizeable
<li>fixed-width columns (may not fully fill table width, or may exceed it)
<li>%-width columns (all columns together fill the table width)
<li>both fixed width, and %-width columns
</ul>
<p>8) What properties of the row object should the Column Model support for display purposes?</p>
<ul>
<li>Should it show all properties automatically (do you intend to give it an array of properties)
<li>Should the column model allow the programmer to select a sub-set (most likely used with an Object type)
</ul>
<p>9) Similar to question #8, what properties of the row object should the remote call fetch?</p>
<ul>
<li>return only specified properties
<li>return all object properties
<li>return all object properties and a set of other details needed by the UI
</ul>
<p>10) Should the column model be type aware (numbers, text, dates, enums, localization, etc.) ?</p>
<p>11) Should the column model support hidden columns?</p>
<ul>
<li>hidden columns might permit the user to show addl fields as needed
<li>hidden columns require more time to fetch and render
</ul>
<p>12) How much data can a single cell contain/show?</p>
<ul>
<li>each cell represents 1 property from backing object
<li>each cell can contain any number of properties from the backing object
<li>cells can contain no properties at all from the backing object.  Rather, buttons, images, addl non-object data
</ul>
<p>13) From where does a table get its data?</p>
<ul>
<li>table can be created using a local data source (internal javascript array)
<li>table can be created using a remote data source (REST or RPC call)
<li>perhaps the table contains both remote data and subsequently UI-added data
</ul>
<p>14) What type of paging should the table employ?</p>
<ul>
<li>list is fully loaded into a single table; the table is fully shown; lots of scrolling
<li>list is fully loaded into a single table; but the table is shown as paginated with limited scrolling. No addl calls are made to the back-end
<li>list loads one page at a time; moving from one page to another flushes prior pages to preserve memory; returning to a page refetches from the back-end.
<li>list loads one page at a time; pages are cached; moving from one page to another reuses cached pages w/o making new calls to the backend.
</ul>
<p>15) When, if ever, should the table should show scroll bars?</p>
<ul>
<li>table has unlimited height; no table scroll bar; page has a large vertical scroll bar as needed.
<li>table has a fixed height; but only allows scrolling one page at a time (you can see 25 items; but can scroll the current page: 1 to 100)
<li>table has a fixed height; and allows scrolling of the entire list; the scrolling action itself loads the pages as needed.
</ul>
<p>16) What is the best method for a user to move from one page to another?</p>
<ul>
<li>No need for any navigation control since the best choice is for the list to fully load
<li>table has a navigational tool bar at top or bottom of the list showing next, previous, top, bottom, page #, etc. controls
<li>table has no need for a navigational tool bar; The scroll bar is all you need
</ul>
<p>17) On what data should sorting be allowed?</p>
<ul>
<li>table cannot be sorted:
<li>table can be sorted one column
<li>table can be sorted on any property (even if not in a column)
<li>table can be sorted on multiple columns
<li>table can be sorted on multiple properties (whether in, or not within, a column definition)
</ul>
<p>18) Which component performs the sort?</p>
<ul>
<li>all sorting is handled by the server
<li>if paging via nav bar, sorting is handled locally on the currently showing page
<li>if paging via scroll bar, sorting is handled by the server until all pages have been loaded, then sorted locally w/o making addl calls
</ul>
<p>19) How should sorting be handled for special data types? enums, dates, dev strings, numbers, etc.</p>
<blockquote><p>For example, for an Enum type (ENUMType.BS), should the sort be on the raw Enum or the visual text for that Enum (&#8220;Business<br />
Service&#8221;)</p></blockquote>
<ul>
<li>sorting is performed on the raw data type.  This could cause some unusual sorting, but related items would be grouped together.
<li>sorting is performed based on what the user &#8220;sees&#8221; rather than data type.  While very natural for the user, this is very difficult to implement when sorting on the server.
</ul>
<p>20) How should the sorting of words with numbers be handled?</p>
<ul>
<li>sorting is alphabetic/ASCII-based (1, 10, 100, 2, 3)
<li>sorting is alphanumeric ( 1,2, 3, &#8230;10, 100)
</ul>
<p>21) How should the sorting of null or empty values be handled?</p>
<ul>
<li>sorting places null or empty values before &#8220;A&#8221;
<li>sorting places null or empty values after &#8220;Z&#8221;
<li>sorting of null or empty values should remove those items from the list
</ul>
<p>22) How should character case affect sorting?</p>
<ul>
<li>sorting is case sensitive (A-Z, a-z)
<li>sorting is case insensitive (Aa, Zz)
</ul>
<p>23) What level of support should the table provide for &#8220;filtered&#8221; results?</p>
<blockquote><p>Keep in mind that some cells in a table may show multiple properties/fields.</p></blockquote>
<ul>
<li>table cannot be filtered
<li>table can be filtered on 1 column at a time
<li>table can be filtered on any set of specified columns
<li>table can be filtered on any set of specified fields if columns supports showing multiple fields in a single cell
</ul>
<p>24) How should the table &#8220;filter&#8221; special types of data? Enums, Dates, Numbers, localized strings, etc.</p>
<blockquote><p>For example, for an Enum type (ENUMType.BS), should users enter the raw Enum or the visual text for that Enum (&#8220;Business Service&#8221;)</p></blockquote>
<blockquote><p>Consider this question in isolation of the similar sorting question</p></blockquote>
<ul>
<li>filtering is performed on raw data type (enum, date, dev strings, etc.)
<li>filtering is performed based on what the user &#8220;sees&#8221; rather than data type (&#8220;Business Service&#8221; instead of ENUMType.BS). The UI  will have to convert user-entered localized strings into DB types, or the DB will have to include all localized strings for all enums.
</ul>
<p>25) Which component performs the filtering?</p>
<ul>
<li>all filtering is handled by the server
<li>if paging via nav bar, filtering is handled locally on the currently showing page
<li>if paging via scroll bar, filtering is handled by the server until all pages have been loaded, then filtered locally w/o addl  calls
</ul>
<p>26) What level of support should the table widget provide for &#8220;searching&#8221;?</p>
<blockquote><p>Searching is similar to &#8220;filtering&#8221;. While &#8220;filtering&#8221; removes all unwanted items except those that match the search criteria, &#8220;Searching&#8221; keeps all the records as is, but simply highlights/selects those that match the search criteria.</p></blockquote>
<blockquote><p>Same questions for Searching as for Sorting&#8230;</p></blockquote>
<ul>
<li>
</ul>
<p>27) What level of support should the table widget provide for rendering the data?</p>
<ul>
<li>cells are rendered using ONLY the text from the provided property
<li>cells are rendered with a method per column definition potentially allowing the override/conversion of a property value
<li>cells are rendered using templates (preferably pre-compiled templates)
<li>cells are rendered using all 3 methods above
</ul>
<p>28) How will the user perform actions on the given row object?</p>
<ul>
<li>Actions should appear at the top of the list. Users should select one or more rows, then select an action.
<li>Actions should appear on each row on hover (desktop) or on selection (mobile). The row actions affect only the current row object.
<li>Actions should appear only when drilling into a row object, on the object viewer.
</ul>
<p>29) Table Communications Architecture</p>
<ul>
<li>The table is provided with raw HTML which quickly builds each page of data (lightening fast!)
<li>The table is provided with an array of arrays (raw list of unnamed properties)
<li>The table is provided with an array of objects (self describing format)
</ul>
<p>30) What level of support should the table widget provide for theming?</p>
<ul>
<li>table uses its own built-in styling
<li>table exposes its style sheet which can be modified
<li>table permits specifying what styles to use for each element
<li>table supports JQuery&#8217;s ThemeRoller
<li>table supports JQuery Mobile&#8217;s ThemeRoller
</ul>
<p>31) How many rows are selectable?</p>
<ul>
<li>table does not need to support row selection
<li>only 1 row should be selectable at a time
<li>multiple rows can be selected at a time
<li>1 page of rows may be selected at a time
<li>table supports &#8220;select all&#8221;
</ul>
<p>32) How does a user &#8220;select&#8221; a row?</p>
<ul>
<li>table permits row selection by clicking/pressing on a row
<li>table permits row selection by double-clicking on a row
<li>table permits row selection by long-pressing on a row
<li>table permits row selection by clicking a checkbox (clicking on row elsewhere drills into row object viewer)
<li>table permits row selection by first enabling the &#8220;selection&#8221; mode, then clicking on the row/checkbox
</ul>
<p>33) What level of support should the table widget have for JQuery?</p>
<ul>
<li>JQuery support is not required for the table widget
<li>table must be a JQuery plugin
<li>table must be a JQuery Mobile plugin
</ul>
<p>34) How important is it who created the table widget?</p>
<ul>
<li>table must be part of a well established library
<li>table must be proven technology, but not part of a library
<li>table should be created, well documented, and actively supported by someone else
<li>table can be home-grown
</ul>
<p>35) Should the table widget provide support for in-table/row/cell editing?</p>
<p>36) Should the table widget provide cursor support (the ability to focus and move between individual cells with the keyboard)?</p>
<p>37) Should the table widget provide an export feature?  In what formats?</p>
<p>38) When should a table edits be committed?</p>
<ul>
<li>Stored locally vs stored remotely
<li>Committed immediately after editing vs. a formal commit phase
<li>Should &#8220;undo&#8221; support be provided for table edits?
</ul>
<p>39) In what format should the table&#8217;s CSS and JS be delivered to the client?</p>
<ul>
<li>Uncompressed
<li>Minified
<li>GZip&#8217;d
<li>All of the above
</ul>
<p>40) How important is the size of the table widget&#8217;s code? The size includes any HTML, CSS, and JavaScript required to use the table<br />
widget.</p>
<blockquote><p>Consider your answer in the previous question as you consider the size for this question.</p></blockquote>
<blockquote><p>Consider that web apps for mobile devices can be dynamically downloaded using normal Web protocols or can be part of the normal app install process</p></blockquote>
<ul>
<li>Code size does not matter
<li>30K
<li>200K
<li>1MB
</ul>
<p>41) What level of support should this table widget provide for alternative views?</p>
<blockquote><p>For example: List, Details, Large Icon, Icon, Dots, etc.</p></blockquote>
<ul>
<li>the table does not need to support alternate views
<li>the table should support 1 list and 1 iconic view
<li>the table should support multiple views of the backing list data
</ul>
<p>42) Consider the relative importance of various features? </p>
<ul>
<li>Performance
<li>Sorting
<li>Filtering
<li>Searching
<li>Device Support
<li>JQuery Support
<li>In-Row Editing
<li>Who created it
<li>Paging
<li>Scrolling
<li>Navigation
<li>Selection
<li>View As&#8230;
<li>Column Model
<li>Established Library
<li>Code Size
<li>Theming
<li>Row expansion
<li>Data export
</ul>
<p>43) What&#8217;s &#8220;good enough&#8221;?</p>
<p>44) What other feature should a table widget provide?</p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.peterclemons.org/blog/?feed=rss2&#038;p=13</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JavaScript Table Widgets</title>
		<link>http://www.peterclemons.org/blog/?p=4</link>
		<comments>http://www.peterclemons.org/blog/?p=4#comments</comments>
		<pubDate>Sat, 30 Jun 2012 01:22:44 +0000</pubDate>
		<dc:creator><![CDATA[peter]]></dc:creator>
				<category><![CDATA[JavaScript Table Widgets]]></category>

		<guid isPermaLink="false">http://www.peterclemons.org/blog/?p=4</guid>
		<description><![CDATA[I need to find a JavaScript Table Widget for a new project I&#8217;m about to begin. Here&#8217;s a list of candidates:  (I am intentionally NOT listing pros and cons at this time).  If you have any input on any of &#8230; <a href="http://www.peterclemons.org/blog/?p=4">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<p>I need to find a JavaScript Table Widget for a new project I&#8217;m about to begin.</p>
<p>Here&#8217;s a list of candidates:  (I am intentionally NOT listing pros and cons at this time).  If you have any input on any of these, please let me know.</p>
<p><strong>TableSorter</strong><br />
- <a href="http://tablesorter.com/docs/example-pager.html">http://tablesorter.com/docs/example-pager.html</a></p>
<p><strong>JQuery Grid</strong><br />
- <a href="http://wiki.jqueryui.com/w/page/34246941/Grid#jQueryUIGridProject">http://wiki.jqueryui.com/w/page/34246941/Grid#jQueryUIGridProject</a><br />
- <a href="http://blog.jqueryui.com/?s=grid">http://blog.jqueryui.com/?s=grid</a><br />
- <a href="http://view.jqueryui.com/grid/grid-spf/">http://view.jqueryui.com/grid/grid-spf/</a></p>
<p><strong>jQuery Pagination</strong><br />
- <a href="http://archive.plugins.jquery.com/project/pagination">http://archive.plugins.jquery.com/project/pagination</a></p>
<p><strong>DataTables</strong><br />
- <a href="http://datatables.net/">http://datatables.net/</a><br />
- <a href="http://www.datatables.net/development/roadmap">http://www.datatables.net/development/roadmap</a></p>
<p><strong>FlexiGrid</strong><br />
- <a href="http://flexigrid.info/">http://flexigrid.info/</a></p>
<p><strong>SlickGrid</strong><br />
- <a href="https://github.com/mleibman/SlickGrid/wiki">https://github.com/mleibman/SlickGrid/wiki</a><br />
- <a href="https://github.com/mleibman/SlickGrid/wiki/Examples">https://github.com/mleibman/SlickGrid/wiki/Examples</a></p>
<p><strong>Ingrid</strong><br />
- <a href="http://reconstrukt.com/ingrid/">http://reconstrukt.com/ingrid/</a></p>
<p><strong>JQuery Grid &#8211; jqGrid</strong><br />
- <a href="http://www.trirand.com/blog/">http://www.trirand.com/blog/</a></p>
<p><strong>jQuery Mobile &#8211; Lists</strong><br />
- <a href="http://jquerymobile.com/demos/1.0a4.1/docs/lists/index.html">http://jquerymobile.com/demos/1.0a4.1/docs/lists/index.html</a></p>
<p><strong>TableView</strong><br />
- <a href="http://www.stokkers.mobi/jqm/tableview/demo.html">http://www.stokkers.mobi/jqm/tableview/demo.html</a></p>
<p><strong>Google GWT &#8211; FlexTable, Grid, and CellTable</strong><br />
- <a href="https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCellWidgets">https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCellWidgets</a><br />
- <a href="http://gwt.google.com/samples/Showcase/Showcase.html#%21CwCellTable">http://gwt.google.com/samples/Showcase/Showcase.html#!CwCellTable</a><br />
- <a href="http://gwt.google.com/samples/Showcase/Showcase.html#%21CwDataGrid">http://gwt.google.com/samples/Showcase/Showcase.html#!CwDataGrid</a></p>
<p><strong>Create your own</strong><br />
- exactly as you want<br />
- and incrementally as you need new features</p>
]]></content:encoded>
			<wfw:commentRss>http://www.peterclemons.org/blog/?feed=rss2&#038;p=4</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
