Data Adapter - Documentation | www.HtmlElements.com

Data Adapter

The Smart.DataAdapter class simplifies data binding and data operations and supports binding to local and remote data. It supports the following data types: 'array' and 'json'.

const dataAdapter = new Smart.DataAdapter(settings)

settings - A set of key/value pairs that configure the Data Adapter object.
  • dataSource - the data source object - Array, JSON or XMLHttpRequest object {method, url, async, timeout).
    • method the type of request: GET or POST
    • url the server (file) location
    • async true (asynchronous) or false (synchronous)
    • timeout - Aborts the data binding on timeout. The default value is null.
  • dataSourceType - Data's type. Possible values: 'array', 'json', 'xml', 'csv', 'tsv'.
  • length - returns the length of the data items.
  • virtualDataSourceLength - the total length of items. If it is unknown, do not set this parameter.
  • virtualDataSourceCache - boolean param which determines whether to cache or not the new loaded data.
  • virtualDataSource(resultCallbackFunction, first, last) - sets a dataSource which will load data on demand.
    • resultCallbackFunction(object) - function to be called when the new data is loaded. This function should pass an object of type: {dataSource: Array}
    • first - index of first item. Infinity is passed when the index is unknown. Thishappens with inifinity scrolling mode.
    • last - index of last item. Infinity is passed when the index is unknown. Thishappens with inifinity scrolling mode.
    Example:
    	const dataAdapter = new Smart.DataAdapter(
    	{
    		virtualDataSourceLength: 1000000,
    		virtualDataSourceCache: true,
    		virtualDataSource: function(resultCallbackFunction, first, last){
    			setTimeout(function() {
    				resultCallbackFunction(
    					{
    						dataSource: GetData(first, last)
    					}
    				);
    			}, 100);
    		},
    		dataFields:
    		[
    			'id: number',
    			'firstName: string',
    			'lastName: string',
    			'productName: string',
    			'quantity: number',
    			'price: number',
    			'total: number'
    		]
    	});
    
    	
  • dataFields - An array describing the fields in a particular record. Each data field must be a name: type pair.
    • name - A string containing the data field's name.
    • type - A string containing the data field's type. Possible values: 'string', 'date', 'number', 'float', 'int' and 'bool'
  • autoBind - Automatically calls the dataBind method on initialization. The default value is true.
  • allowAdd - allows adding of items through API.
  • allowRemove - allows removing of items through API.
  • allowUpdate - allows updating of items through API.
  • The Smart.DataAdapter object has the following methods:

    • dataBind - performs data biding.
    • clear - clears the data.
    • .
    • insert(index, item) - inserts an item.
    • indexOf(item) - returns the index of an item.
    • update(index, item) - updates an item.
    • remove(index) - removes an item.
    • removeLast() - removes last item.
    • add(item) - adds an item
    • sort(dataSource, sortColumns, directions, dataTypes, customSortingCallback)
      • dataSource - two dimensional Array of items.
        Example:
        	[
        	  {firstName: "Alex", lastName: "Roberts"},
        	  {firstName: "Martin", lastName: "Green"}
        	]
        	
      • sortColumns - Array. Example: ['firstName', 'lastName']
      • directions - Array. Example: ['asc']
      • dataTypes - Array. Example: ['string', 'int']
      • customSortingCallback - function(dataSource, sortColumns, directions, compareFunctions). The parameter is optional.
    • summarize(summaryItems)
      • summaryItems - Array. Each item expects the following syntax: { dataFieldName: ['min', 'max', 'count', ....] }. The result of the function is a summary/aggregated data represented as an Array.

    Example:

    	  
    	const dataAdapter = new Smart.DataAdapter({
    		dataSource: GetData(),
    		dataFields:
    		[
    			'id: number',
    			'firstName: string',
    			'lastName: string',
    			'productName: string',
    			'quantity: number',
    			'price: number',
    			'total: number'
    		]
    	}); 
    	

    Full example with data

    	function GetData() {
    		let data = new Array();
    		let firstNames =
    		[
    			"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    		];
    		let lastNames =
    		[
    			"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    		];
    		let productNames =
    		[
    			"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    		];
    		let priceValues =
    		[
    			"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    		];
    		for (let i = 0; i < 200; i++) {
    			let row = {};
    			let productindex = Math.floor(Math.random() * productNames.length);
    			let price = parseFloat(priceValues[productindex]);
    			let quantity = 1 + Math.round(Math.random() * 10);
    			row["id"] = i;
    			row["firstName"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    			row["lastName"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    			row["productName"] = productNames[productindex];
    			row["price"] = price;
    			row["quantity"] = quantity;
    			row["total"] = price * quantity;
    			data[i] = row;
    		}
    
    		return data;
    	}
    
    
    	const dataAdapter = new Smart.DataAdapter({
    		dataSource: GetData(),
    		dataFields:
    		[
    			'id: number',
    			'firstName: string',
    			'lastName: string',
    			'productName: string',
    			'quantity: number',
    			'price: number',
    			'total: number'
    		]
    	});