Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Bulk Editor (gallery-bulkedit) on cdn

Last Updated: 04/7/13

+ 0 -

John Lindal

YUI Contributor

See 50 more by this user.

Created: 12/13/10
Last CDN Push: 10/10/12
Build Tag: gallery-2012.10.10-19-59
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

Bulk Editor allows editing an arbitrary amount of data as an atomic operation (from the server's perspective).

This is different from YUI DataTable Quick Edit, because Quick Edit only allows editing a single page of records and Quick Edit is restricted by what YUI DataTable can display: one table row per record, where each cell contains a single value.

Bulk Editor allows any kind of presentation of the form fields, and supports pagination without having to save to the server. The default implementation uses an HTML table.

Bulk Editor allows creating records, removing records, and modifying records, so it is useful both for creating new records and editing existing records. Bulk Editor also supports both client-side and server-side pagination.

Client-side pagination is the fastest and provides the most flexibility, because it allows best-effort saving: acceptable values can be saved, acceptable insertions and removals can be processed, and then validation errors can be displayed for invalid values.

Server-side pagination must be used when it is not feasible to transfer all the data to the client. In this case, you can only save all-or-nothing because the data returned by the server must be immutable during the edit process.

One example of server-side pagination is bulk upload of data. The file is uploaded to the server, parsed (accepting any errors), and stored in a scratch space. Then Bulk Editor is invoked to allow the user to verify the data and fix the errors.

Simplest example of constructing a Y.HTMLTableBulkEditor widget.

Code Sample

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.10.10-19-59'
}).use('gallery-bulkedit', function(Y)
{
// Raw data
 
	var data =
	[
		{id:'v1', year:1946, quantity:3, title:"Slan", color:"red"},
		...
	];
 
// Field configuration
 
	var fields =
	{
		title:
		{
			type: 'textarea'
		},
		year:
		{
			validation: { css: 'yiv-integer:[1500,2100]' }
		},
		quantity:
		{
			validation: { css: 'yiv-integer:[0,]' }
		},
		color:
		{
			type: 'select',
			values:
			[
				{ value: 'red',   text: 'Red'   },
				{ value: 'green', text: 'Green' },
				{ value: 'blue',  text: 'Blue'  }
			]
		}
	};
 
// Data source
 
	var schema =
	{
		resultFields:
		[
			"id",
			{
				key: "quantity",
				comparator: 'integer'
			},
			{
				key: "year",
				comparator: 'integer'
			},
			"title",
			"color"
		]
	};
 
	var raw_ds = new Y.DataSource.Local({source: data});
	raw_ds.plug(
	{
		fn:  Y.Plugin.DataSourceArraySchema,
		cfg: {schema:schema}
	});
 
	var ds = new Y.DataSource.BulkEdit(
	{
		ds:                     raw_ds,
		uniqueIdKey:            'id',
		generateRequest:        function() { },			// local data source ignores request
		totalRecordsReturnExpr: '.meta.totalRecords',	// turns on pagination inside BulkEditDataSource
		extractTotalRecords:    function(response)
		{
			return response.meta.totalRecords;
		}
	});
 
// Column configuration
 
	var columns =
	[
		{ key: 'title', label: 'Title' },
		{ key: 'year', label: 'Year' },
		{ key: 'quantity', label: 'Quantity' },
		{ key: 'color', label: 'Color' }
	];
 
// BulkEditor
 
	var editor = new Y.HTMLTableBulkEditor(
	{
		ds:      ds,
		fields:  fields,
		columns: columns
	});
	editor.render('#edit');
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.10.10-19-59'
}).use('gallery-bulkedit', function(Y)
{
// Raw data

var data =
	[
		{id:'v1', year:1946, quantity:3, title:"Slan", color:"red"},
		...
	];

// Field configuration

var fields =
	{
		title:
		{
			type: 'textarea'
		},
		year:
		{
			validation: { css: 'yiv-integer:[1500,2100]' }
		},
		quantity:
		{
			validation: { css: 'yiv-integer:[0,]' }
		},
		color:
		{
			type: 'select',
			values:
			[
				{ value: 'red',   text: 'Red'   },
				{ value: 'green', text: 'Green' },
				{ value: 'blue',  text: 'Blue'  }
			]
		}
	};

// Data source

var schema =
	{
		resultFields:
		[
			"id",
			{
				key: "quantity",
				comparator: 'integer'
			},
			{
				key: "year",
				comparator: 'integer'
			},
			"title",
			"color"
		]
	};

var raw_ds = new Y.DataSource.Local({source: data});
	raw_ds.plug(
	{
		fn:  Y.Plugin.DataSourceArraySchema,
		cfg: {schema:schema}
	});

var ds = new Y.DataSource.BulkEdit(
	{
		ds:                     raw_ds,
		uniqueIdKey:            'id',
		generateRequest:        function() { },			// local data source ignores request
		totalRecordsReturnExpr: '.meta.totalRecords',	// turns on pagination inside BulkEditDataSource
		extractTotalRecords:    function(response)
		{
			return response.meta.totalRecords;
		}
	});

// Column configuration

var columns =
	[
		{ key: 'title', label: 'Title' },
		{ key: 'year', label: 'Year' },
		{ key: 'quantity', label: 'Quantity' },
		{ key: 'color', label: 'Color' }
	];

// BulkEditor

var editor = new Y.HTMLTableBulkEditor(
	{
		ds:      ds,
		fields:  fields,
		columns: columns
	});
	editor.render('#edit');
});