Weird Rendring when Scrolling and How to force a refresh

[mrallarisParticipant]

I am having 2 problems:

1. I have a grid and as I am making selections in the grid everything looks normal (in that the row I select gets highlighted and the previously selected row is no longer highlighted. But when I scroll the grid suddenly every row I’ve clicked on all get highlighted and stay that way.

2. The grid is in a jqwindow and when I close and then open it the grid retains it’s previous state. I’ve tried the render, refreshData, dataBind functions on open but that hasn’t solved it.

I have taken a short video of the problem for you to look at: http://youtu.be/GGaqgOdY5jk

In the function that opens the jqWindow I have tried the following unsuccessfully …

$('#woWindow').jqxWindow('open');
// woDataAdapter.dataBind();
// $('#woWindow').jqxWindow('initContent');
// $("#wotable").jqxGrid('refreshdata');
// $("#wotable").jqxGrid('render');

Here is the code that creates the window and grids.

			
$(document).ready(function () {
	$('#woWindow').jqxWindow({
		width: 840, 
		height: 680, 
		resizable: false,
		isModal: true,
		autoOpen: false,
		initContent: function () {
			$("#wotable").jqxGrid({
				pageable: false,
				editable: false,
				sortable: true,
				theme: 'ui-smoothness',
				width: '100%',
				height: 350,
				selectionmode: 'row',
				source: woDataAdapter,
				columns: [
					{ text: 'WO Number', dataField: 'woNum', width: '15%', align:'center', cellsAlign: 'center' },
					{ text: 'Customer', dataField: 'custName', width: '20%', align:'left', cellsAlign: 'left' },
					{ text: 'Qty', dataField: 'qty', width: '5%', align:'center', cellsAlign: 'center' },
					{ text: 'Part Description', dataField: 'partDesc', width: '60%', align:'left', cellsAlign: 'left' }
				]
			});

			$("#bomtable").jqxGrid({
				pageable: false,
				editable: false,
				theme: 'ui-smoothness',
				width: '100%',
				height: 180,
				selectionmode: 'row',
				source: bomDataAdapter,
				columns: [
					{ text: 'Line #', dataField: 'lineNum', width: '7%', align:'center', cellsAlign: 'center' },
					{ text: 'Part Number', dataField: 'partNum', width: '20%', align:'left', cellsAlign: 'left' },
					{ text: 'Description', dataField: 'description', width: '50%', align:'left', cellsAlign: 'left' },
					{ text: 'Quantity', dataField: 'qty', width: '8%', align:'center', cellsAlign: 'center' },
					{ text: 'Est. Cost', dataField: 'estCost', width: '15%', align:'right', cellsAlign: 'right' }
				]
			});

			$("#wotable").on('rowselect', function (event) {
				bomSource.data.woID = event.args.row.woID;
				bomDataAdapter.dataBind();
			});

			$("#bomtable").on('rowselect', function (event) {
				document.getElementById('bomid-'+ selected_index).value = event.args.row.bomID;
				document.getElementById('wn-'+ selected_index).value = event.args.row.woNum + ": Line " + event.args.row.lineNum;
				document.getElementById('qty-'+ selected_index).focus();
				$('#woWindow').jqxWindow('close');
			});
		}
	});
});

Thank you very much for your help

[DimitarParticipant]

Hello mrallaris,

1. Please provide us with a JSFiddle example that demonstrates this issue. Make sure you are using the latest version of jQWidgets (3.6.0).
2. Here is what I think you need to call in the function that opens the window:

   $("#bomtable").jqxGrid({ source: woDataAdapter });

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[mrallarisParticipant]

Hi Dimitar – thank you for your response.

I figured out most of it. My first issue was caused by the selectionmode that I used = ‘row’ instead of ‘singlerow’.

Thanks

[Author]

Posts