Datagrid with 2000 rows

[NortT]

Hello. I have a datagrid with 2000+ rows. The problem is that Chrome loads the data about 5 minutes. Maybe I do something wrong? The code of the table is below:

Code:

	<table id="productTable" style="width:100%"  singleSelect="true" fitColumns="true">
		<thead>
			<tr> 
				<th field="name" width="23%">Наименование</th>
				<th field="articul" width="7%">Артикул</th>
				<th field="rest" width="7%">Наличие</th>
				<th field="unit" width="5%">Единица хранения</th>
				<th field="price" width="7%" editor="{type:'numberbox',options:{precision:2, readonly: true}}">Цена</th>
				<th field="volume" width="7%">Объем упаковки</th>
				<th field="amount" width="5%" editor="{type:'numberbox',options:{precision:2}}">Количество упаковок</th>
				<th field="total" width="7%" editor="{type:'numberbox',options:{precision:2, readonly: true}}">Итого</th>
				<th field="photo" width="7%">Фото</th>
				<th field="comment" width="20%" editor="text">Комментарий</th>
				<th field="rate" hidden='true'/>
				<th field="order" hidden='true'/>
				<th field="id" hidden='true'/>
				<th field="isProduct" hidden='true'/>
				<th field="action" width="80" align="center" formatter="formatAction">Изменить</th>
			</tr>
		</thead>
	</table>
//-----------
	$(function(){
		$('#productTable').datagrid({
			onBeforeEdit:function(index,row){
				$(this).datagrid('updateRow', {index:index,row:{editing:true}})
			},
			onAfterEdit:function(index,row){
				$(this).datagrid('updateRow', {index:index,row:{editing:false}})
			},
			onCancelEdit:function(index,row){
				$(this).datagrid('updateRow', {index:index,row:{editing:false}})
			},
			onBeginEdit:function(rowIndex){
				var editors = $(this).datagrid('getEditors', rowIndex);
				var n1 = $(editors[0].target);
				var n2 = $(editors[1].target);
				var n3 = $(editors[2].target);
				n1.add(n2).numberbox({
					onChange:function(){
						var cost = n1.numberbox('getValue')*n2.numberbox('getValue');
						n3.numberbox('setValue',cost);
					}
				})
			},			
			idField:'id',
			treeField:'productTable',
			nowrap:false,
			rownumbers:true
		});
	});

[stworthy]

You should assign the 'width' property for all the columns to get more performance, although it is a hidden column. If you don't wish to display a column, remove it from the column definitions. In your case, you can remove 'id','order','rate','isProduct' columns and you can still access them in the datagrid rows.
If you would like to display more rows, please try to use the scrollview instead.