jqxProgressBar inside jqxGrid

[userdchParticipant]

is it possible to have a progress bar in one column of the grid ?
when refreshed, the value of progress bar will be calculated based on two other columns.
do you have example code that demonstrates this ?

[Peter StoevKeymaster]

Hi userdch,

Unfortunately, jqxGrid does not have a Progress Bar column at present. We will consider adding such in a future version.

At present, you can simulate a Progress Bar by using the “cellsrenderer” callback of the column:

Example:

cellsrenderer: function (row, colum, value) { var cell = '<div style="margin-top:5px;">'; cell += '<div style="background: #058dc7; float: left; width: ' + value + 'px; height: 16px;"></div>'; cell += '<div style="margin-left: 5px; float: left;">' + value.toString() + '%' + '</div>'; cell += '</div>'; return cell; }

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[grandehombreParticipant]

I use the following and it works ok.

I have 2 columns (CurrentTotal and TargetFunds) that I want to show the ratio of as a progress bar in a third column.

In the grid’s ‘columns’ definition, specify the following

	var columns = [
	,{text: 'Target funds', datafield: 'targetFunds', cellsformat: 'c', cellclassname: 'thTargetFunds'}
	,{text: 'Current total', datafield: 'currentTotal', cellsformat: 'c', cellclassname: 'thCurrentTotal'}
	,{text: 'Progress'
		,cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, data) {
			var cell = '<div class="thProgress"></div>';
			return cell;
		}
	}
	];

	// a few lines later. Note 'dataTable'. This is the selector that is also used further down
	$(dataTable).jqxGrid(settings);

The important things above are that the TargetFunds, CurrentTotal and Progress columns, each have a CSS class assigned to them. This will be used later on to locate those columns in the grid.
The customer cell renderer is also important!

Later on, after the grid has been populated with data, do the following

	// look for all the rows containing our 'progress bar' cell
	$('.thProgress', dataTable).each(function() {
		// we are at the 'cell' level, need to move up to the 'row' level
		var row = $(this).parent().parent();

		// now we can just search for the relevant 'column'
		var curValue = Globalize.parseFloat($('.thCurrentTotal', row).text());
		var maxValue = Globalize.parseFloat($('.thTargetFunds', row).text());
		if (curValue > maxValue) {
			curValue = maxValue;
		}

		var pct = (curValue / maxValue) * 100;
		console.debug(curValue, maxValue, pct);

		// This creates a progress bar inside the cell of the current row
		$(this).jqxProgressBar({max: 100, value: pct, showText: true});
	})

Globalize is a library I use that makes parsing of text easy. It is not important here.

I hope this helps.

It would be great if jqWidgets had something like this built into the grid

[Author]

Posts