Code:

$("#dg").datagrid({
	columns: [[{title: "name", field: "name", width: 100},
			   {title: "height(cm)", field: "height(cm)", width: 50},
			   {title: "rank", field: "rank", width: 50}]],
	data: [{name: "Alan", "height(cm)": 180, rank: 1},
		   {name: "Ben", "height(cm)": 175, rank: 2}]
});

... is rendered to

Code:

<td class="" field="height(cm)">
	<div class="datagrid-cell datagrid-cell-c2-height(cm)">
		<span>height(cm)</span>
		<span class="datagrid-sort-icon"></span>
	</div>
</td>

The class name "datagrid-cell-c2-height(cm)" is invalid, so it fails to set the width.
http://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors

Thanks, it works. Please consider if it should be the default behaviour of required validation for tagbox.

"required" is to ensure something is submitted in the form. The "inputting value" are omitted in form submission, so there is no point in validating it.

I've posted the 2nd question in the bugs forum
https://www.jeasyui.com/forum/index.php?topic=6615

This may be a duplicate of https://www.jeasyui.com/forum/index.php?topic=6400.0


Despite a tag has been added, the "required" validation fails and blocks form submission.

Code:

<form id="f" method="post">
tags: <input id="t" name="tags" type="text"><br>
<input type="submit">
</form>

$("#t").tagbox({width: 200, required: true});
$("#f").form({url: "/tags"});

Wonderful, thank you.

Another question: I would like to use tagbox in property grid. It works fine except the "required" validation. The tags are not recognized as input value.

Code:

$.extend($.fn.datagrid.defaults.editors, {
    tagbox: {
        init: function(container, options){
            var input = $('<input type="text">').appendTo(container);
            return input.tagbox(options);
        },
        destroy: function(target){
            $(target).tagbox('destroy');
        },
        getValue: function(target){
            return $(target).tagbox('getValues');
        },
        setValue: function(target, value){
            $(target).tagbox('setValues', value);
        },
        resize: function(target, width){
            $(target).tagbox('resize', width);
        }
    }
});

Code:

row.editor = {
    type: "tagbox",
    options: {required: true}
}

How to get the words that has not become a tag (i.e. not yet press enter)?


$(...).tagbox("getValues") will return "apple" and "orange"; "banana" is excluded.

Alternatively, when the tagbox lose focus, is there any way to auto forming remaining text into a tag?