Adding new DataTable row and only save when row is populated

Webix JS
1

Hi Guys

Sorry for the 101 questions!

Does anybody have an example of a DataTable, where a row is inserted, but the row is only saved/committed when all columns have been populated? Perhaps pressing escapes undoes the insert :slight_smile:

My alternative solution is to create a form for it, on submit the values get appended to the DataTable, but I figured trying to do it via DataTable might be cleaner.

2

nm… I should read the documentation more! Example here for anybody else looking -

http://docs.webix.com/samples/15_datatable/04_editing/03_multiple_editors.html

3

Well, you can use “onBeforeEditStop” to loop the table and put some conditions which will trigger ajax call that will save your row if conditions are true.

4

Also, you can define validation rules ( row will not be saved if some of cells do not conform to validation rules )

http://docs.webix.com/desktop__data_validation.html#datavalidationforcomponents

5

Excellent, thanks guys.

For anybody else looking. I want to insert a new row for the user to populate, which I do when a button is clicked, it fires the following

		var click_add_asset = function()
		{
			var row_id = $$("asset_table").add({id: 9999});
			this.editRow(row_id);
		}

But the problem I had was the Save is being called automatically with add()… Adding in Rules does appear to have done the trick :slight_smile: I’ve got a DataTable defined as follows

		var asset_table = {
			view: "datatable",
			id: 'asset_table',
			select: true,
			scrollX: false,
			url: "asset/list",
			editable:true,
			editaction:"custom",
			save: "asset/save",
			on:{
				"onItemDblClick":function(id){
					this.editRow(id);
					this.focusEditor(id);
				}
			},
			rules:{
				"id" :webix.rules.isNotEmpty,
				"name" :webix.rules.isNotEmpty
			},
			
		};

Thanks

6

Just to add to this, when the item is saved and you want to update the DataTable with the new server-side ID. Then see the following thread

http://forum.webix.com/discussion/1711

Trick is to return the ID as json, and add the following code -

webix.dp( $$(“asset_table”) ).config.updateFromResponse = true;