Tree Table Edit Cell Template

Webix JS
1

I have tried the edit type = date but it is inconsistant for what I need. It does not set the date properly in the tree table data object - it is always empty - I followed the basic sample online:

{ map:"(date)#due#", header:“Due”, editor:“date”, width:90}

Here is my original column def:
{ id:“due”, header:“Due”, editor:“text”, width:90}

I end up getting dates for 1917 or when I pick a date the date does not get stored in the table data object

I then tried the inline-edit with a template in the hopes I could bind a js datepicker to the input template field but it looked totally different than the grid so I abandoned that idea

So, I was wondering if there is a way for me to put a date mask in the edit field instead, ie… mm/dd/yyyy with a mask of //____
so I can ensure that I am getting a date?

Thanks for any help you can offer!

Tab

Here is the basic grid definition:

	grid = new webix.ui({
		container: gridContainer,
		id: gridId,
		view:"treetable",
		headerRowHeight:18,
		rowHeight:32,
		select:"row",
		scrollX:false,
		scrollY:false,
		editable:true,
		editaction:"dblclick",
		columns:[
			{ id:"id", header:"Id", css:{"text-align":"center"}, width:50},
			{ id:"status", header:"Status", css:{"text-align":"center"}, width:80},
			{ id:"action", header:"Action Items", editor:"text", width:475, template:"{common.space()}{common.icon()} #value#", fillspace:1},
			{ id:"due",	header:"Due", editor:"text", width:90}
		],
		autoheight:false,
		autowidth:false
	});
2

Check the updated snippet
http://webix.com/snippet/8f190f51

It uses the “map” options, same as in your original code. Behind the scene, map option uses date format from current locale to parse the string. If result is incorrect you can alter it like next

http://webix.com/snippet/58a92b01

As for date mask - there is no such option, but you can enable validation for related column

http://webix.com/snippet/bc7a1c81

3

Thanks maksim! Works like I need - I appreciate it

4

Update: Actually this does not work well in Firefox (latest version) but the biggest issue is that it does not match the date picker that my user is used to. I did add the validation and that works just fine.

So, another question? Is there a way to insert some code to display my standard datepicker during the edit process and set the value in the date field?

In other words, after OnBeginEdit (or similar function) call a function to display my datepicker and then set the value of the date cell the user is editing to the value from my function?

Thanks for any help you can offer

5

Most probably it is possible. You can obtain the html input object from onAfterEditStart event and from this point you can use the js code that you are using for other date controls in your app.

http://webix.com/snippet/3062d205