Huge combo lists - again

[devnull]

I know this topic has been visited before and suggestions made to use a datagrid / pagination, but in some cases that is just not practical in terms of available screen space.

I would also like to 'retro-fit' existing pages which have been in use for a few years with a new control that provides the ability to handle large lists without generating all of the HTML that is required to create every single list item.

There are of course 2 ways of filtering data, backend and frontend. For frontend, the problem is not so much the size of the JSON/ raw list object, but all of the html elements that are created for each item in the list.

My idea is the combobox could be configured to limit the number of list items it creates, say 50, and if the user scrolls down the new list items html would be generated, thereby reducing the initial size of the page, and only increasing it if the user does a scroll down the list.

If a user types in a value to search for, then it should search the list object, equally when a record is loaded and the value of the combo is not in the top 50 but does exist in the list object, then it's list item should also be rendered.

This would reduce memory considerably when dealing with comboboxes with thousands of items as the database grows over time as mine does.

Again, the combobox control is ideal for browsing, selecting and searching a record in a very small area of the screen, using a datagrid would not work unless it could be made to fit in the same foorprint and not consume a lot of memory itself ?!

[jarry]

The combogrid can be used to display large data. The 'scrollview' can be attached to display large rows without pagination. The 'datagrid-filter' extension can be applied to get the filter functionality. The code below shows how to display and filter large rows on a drop-down panel.

Code:

$('#cc').combogrid({
  columns: [[
    {field:'name',title:'Search',width:100}
  ]],
  view: scrollview,
  idField: 'inv',
  textField: 'name',
  pageSize: 50,
  data: rows,
  fitColumns: true,
  showFilterBar: false,
  showHeader: false,
  keyHandler: $.extend({}, $.fn.combogrid.defaults.keyHandler, {
    query: function(q){
      var dg = $(this).combogrid('grid');
      dg.datagrid('options').onLoadSuccess = function(){

      };
      dg.datagrid('addFilterRule', {
        field: 'name',
        op: 'contains',
        value: q
      }).datagrid('doFilter');
    }
  })
}).combogrid('grid').datagrid('enableFilter');