[guyradfordMember]

Thank you for replying to my private message, I have bought it back online so others can gain…

Hi Guy,

The “bindingcomplete” event is raised correctly in the code. It is raised after the Grid’s rendering functions are called. The problem is that the execution of the rendering functions takes some time. You may add a timer in your bindingcomplete and after some small delay, call the Grid’s methods.

Best Regards,
Peter Stoev

Hi Peter

Thank you

This feels like a bit of a hack, what is the correct way to auto resize the columns upon load? I cant be the first person to want to do this and all your examples use a button.

Using a timer feels a bit hit and miss…if the browser is slow then my timer may be to short and for quick browsers the timeout will be noticeable.

I feel that there should be one of the following:
1) an even fired after rendering has completed.
2) a setting to auto resize columns to data
3) a * or auto option in the column definition

Thank you

Guy

[guyradfordMember]

Hi Peter

the colums are set via ajax via the dataAdapter object

				var url = "/ajax/loadData.php";
				// prepare the data
				var source =
				{
					data :{
						values: TableValues,
						first: true
					},
					datatype: "json",
					root: "Rows",
//					id: '__PK',
					url: url,
	                beforeprocessing: function (data) {
						//console.log(data.TotalRows);
    	                source.totalrecords = data.TotalRows;
						
						if (data.DataFields){
							source.datafields =  data.DataFields;
							source.data.first = false;
						}
//						console.log(source.data);
					},
                	sort: function () {
	                    // update the grid and send a request to the server.
    	                $("#" + tabId + ' .Grid').jqxGrid('updatebounddata');
                	}
				};
				settings = {
					processData: function(data){
						//console.log(source.data);
						//console.log(data);
						data.first = source.data.first;
						//console.log('processData');
					},
					downloadComplete: function (data, status, xhr) {
						//console.log('downloadComplete');
						if (data.Columns) $("#" + tabId + ' .Grid').jqxGrid({ columns: data.Columns });
					 },
					loadComplete: function (data) { 
						//console.log('loadComplete');
						//if (data.Columns) 
						//$("#" + tabId + ' .Grid').jqxGrid('autoresizecolumns');
					},
					loadError: function (xhr, status, error) { }				
				};
				var dataAdapter = new $.jqx.dataAdapter(source, settings);

This works perfectly, the data loads.

if you run code with alert in ‘bindingcomplete’ i see all the columns headers shown correctly, but with empty cells. the widths look correct. once you click on on the alter, the cell populate, and then resize to the small size fitting them all with in the width.

I can PM you a link to the dev site to see the code and behaviour.

Guy

[guyradfordMember]

Hi Peter

The bindingcomplete appears to fire once the grid has been build but not popuplated.

here is my code

			$("#" + tabId + ' .Grid').bind('bindingcomplete', function () {
				console.log('bindingcomplete');
				alert('bc');
				$("#" + tabId + ' .Grid').jqxGrid('autoresizecolumns', 'cells');
			});			
			
				
				
				$("#" + tabId + ' .Grid').jqxGrid(
				{
					width: '100%',
//					width:1066,
//					height: 450,
					height: '100%',
					source: dataAdapter,
					theme: theme,
					pageable: true,
					autoheight: false,
					virtualmode: true,
					sortable: true,
	                sorttogglestates: 1,					
					
					altrows: true,
//					enabletooltips: true,
					editable: false,
					columnsresize: true,
					pagesize: 50,
					pagesizeoptions: ['20', '50', '100'],
					rendergridrows: function () {
						return dataAdapter.records;
					},	
					
					showtoolbar: true,
//					selectionmode: 'multiplecellsextended',
					
					columns: [
					  { text: '', datafield: '', width: 100 }
					]
				});
				
			});

when you preview the code the alert box appears you can see the grid is empty and the headers, then once the alert os closed the cells are populated and the grid resizes to the wrong sizes.

when i page next and the next lot of data is loaded the autoresizecolumns is fired correctly

thank you

guy

[Author]

Posts