how to render and input column cell with different types
14 Replies
Hi all,
thank you for your support, I managed the grid for editing different controls for different field types.
Then I added some logic to represent the values initially, when the grid is not yet in editing mode, using column templates and conditional expressions
Now I'm trying to add validation, still for editing mode, I continued on the same approach you suggested creating a form validator together with the control for the field, but when validate() is invoked, following error is thrown:
here are the implementation of the four editing events: create, write, read, destroy
then the cellSave event handler (which is invoked after read) where the validation is performed:
static onEditFieldCreateValue()
{
$("#divLog").append("<div>onCreateFieldValue </div>");
this._gridFieldValueInputElement = document.createElement("input");
return this._gridFieldValueInputElement;
}
static onEditFieldWriteValue(args)
{
$("#divLog").append("<div>onWriteFieldValue </div>");
var inputControl = null;
var integerValidatorIsRequired = false;
var textValidatorIsRequired = false;
switch (args.rowData.FieldType)
{
case "integer":
inputControl = new ej.inputs.NumericTextBox({
value: parseInt(args.rowData[args.column.field]),
format: "n0",
decimals: 0,
validateDecimalOnType: true,
locale: this.getGrid().locale,
});
var range = this.getRangeForFieldValue(args.rowData["Range"]);
if (range != null)
{
inputControl.min = (<any>range).min;
inputControl.max = (<any>range).max;
inputControl.strictMode = true;
}
integerValidatorIsRequired = true;
break;
case "text":
inputControl = new ej.inputs.TextBox({
value: args.rowData[args.column.field],
locale: this.getGrid().locale,
});
textValidatorIsRequired = true;
break;
case "boolean":
inputControl = new ej.buttons.CheckBox({
checked: args.rowData[args.column.field] == "true",
locale: this.getGrid().locale,
});
break;
}
if (inputControl != null)
{
this._gridFieldValueInputCtrl = inputControl;
this._gridFieldValueInputCtrl.appendTo(this._gridFieldValueInputElement);
if (integerValidatorIsRequired)
{
this._gridFieldValueInputValidator = new ej.inputs.FormValidator("#gridCfgGlobEditForm", {
rules: { "gridCfgGlobFieldValue": { required: true } }
});
}
else if (textValidatorIsRequired)
{
var validationOptions;
if (args.rowData.Regex != null)
{
validationOptions = {
rules: {
"gridCfgGlobFieldValue": {
required: true,
regex: args.rowData.Regex
}
}
}
}
else
{
validationOptions = {
rules: { "gridCfgGlobFieldValue": { required: true } }
}
}
this._gridFieldValueInputValidator = new ej.inputs.FormValidator("#gridCfgGlobEditForm", validationOptions);
}
}
}
static onEditFieldReadValue()
{
$("#divLog").append("<div>onReadFieldValue </div>");
//if (this._gridFieldValueInputCtrl.element.classList.contains("e-checkbox"))
if (this._gridFieldValueInputCtrl.checked != undefined)
return this._gridFieldValueInputCtrl.checked ? "true" : "false";
else if (this._gridFieldValueInputCtrl.step != undefined)
return this._gridFieldValueInputCtrl.value.toString();
else
return this._gridFieldValueInputCtrl.value;
}
static onEditFieldDestroyValue()
{
$("#divLog").append("<div>onDestroyFieldValue =====================</div>");
this._gridFieldValueInputCtrl.destroy();
this._gridFieldValueInputCtrl = null;
if (this._gridFieldValueInputValidator != null)
{
this._gridFieldValueInputValidator.destroy();
this._gridFieldValueInputValidator = null;
}
}
...
static onCellSave(args: CellSaveArgs)
{
$("#divLog").append("<div>onCellSave colIdx:" + args.columnObject.index + "</div>");
var cellIsValid = true;
if (ConfigGlobal._gridFieldValueInputValidator != null)
cellIsValid = ConfigGlobal._gridFieldValueInputValidator.validate();
if (!cellIsValid)
args.cancel = true;
else
{
if ((<any>args.rowData).FieldType == "integer")
args.value = parseInt(args.value).toString();
ComponentBase.addChange((<any>args.rowData).Id, args.columnName, args.previousValue, args.value);
}
}
Is my approach correct? I did not add validation rules on the entire column because again, data can be of different types and the fields can have different validators based on type and even others row data fields (regex for text fields)
Please let me know
Thank you
Hi all,
thank you for your support, and sorry for my not really well-timed feedback.
I'm not sure you addressed my problem, though; I think your suggestion would enable or disable the validation rule for all the cells of the columns but my case is different, let me give more details:
1.
I have a data table like this one:
each row represents a parameter, and each one can be of type number, text, boolean. The range applies only for numbers, while the regex only to texts, and they are both optionals. In the entity, the value is stored as a string no matter the type.
2.
in the web app that acts as HMI, I succeed to render the data in this manner, as I wished:
columns id, type, and regex are there but not visible to the user.
when the grid is in readonly mode (all columns have allowEditing=false) I render different input formats using templates.
when the grid is in editing mode (value column has allowEditing=true) I use your suggestion for batch mode cell editing lifecycle (create - write - read - destroy) and I also succeeded to create the right control on the fly just for edit the value (NumericTextBox, TextBox, CheckBox respectively) I posted my code previously.
3.
What I miss now is validation:
- numbers are required and should be in range, when specified
- texts are required and should comply with regex, when specified
- no validation for booleans
so far, I tried interacting with formValidator, which I noticed included into grid cell under editing when I just create the input control, but SyncFusion gives me the error I show you in the previous post.
How can I apply different validators for different cells in the same column, base on type which is another column of the data coming from web server? Taking into account also that validations require additional data fields base on type (range, regex, as said above).
Is my approach correct or there could be a better different one?
Please use these details with the code I posted earlier, I hope thing would become more clear
Thank you so much, please let me know your suggestions.
Hi Silvia,
Thanks for your update.
Query 1 : All columns not editable, while the edit mode is obtained simply setting value column as editable.
By default in allowEditing as false, when editing the row required column will be in non-editable state and so we didn’t consider validation for that column. For this case you can validate that required column by externally.
Query 2 : Which of the two approaches is more correct and more suitable for me?
You can use custom validator for validation based on your application. In custom validation function you can use any kind of regex or complex foe validate your required input.
Please refer the below sample for custom validation message.
For reference ,
Documentation link : https://ej2.syncfusion.com/javascript/documentation/grid/edit/?&_ga=2.11102579.610655613.1587054890-93686665.1576498953#custom-validation
Please get back to us, if you need any further assistance.
Regards,
Thiyagu S.
I already explained in previous posts, anyway if you need I'll try to explain again.
on server side, I have a datatable of entities like this one:
public class CfgEntity
{
public int Id { get; set; }
public string Name { get; set; }
public string FieldType { get; set; }
public string FieldValue { get; set; }
public string Range { get; set; }
public string Regex { get; set; }
public string ErrMsg { get; set; }
}
I render it on web appl using a syncfusion grid in asp net core razor page:
<ejs-grid id="myGrid" ...>
<e-grid-editsettings mode="Batch" allowAdding="false" allowDeleting="false" allowEditing="true"
showConfirmDialog="true" />
<e-data-manager adaptor="UrlAdaptor" url="@Url.Action("GetCfgData", "Config")"
batchUrl="@Url.Action("ExecCfgBatch", "Config")" />
...
<e-grid-columns>
<e-grid-column field="Id" visible="false" allowEditing="false" isPrimaryKey="true" />
<e-grid-column field="Name" allowEditing="false" />
<e-grid-column field="FieldType" visible="false" allowEditing="false" />
<e-grid-column field="FieldValue" />
<e-grid-column field="Range" textAlign="Right" allowEditing="false" />
</e-grid-columns>
</ejs-grid>
As you can notice, datasource is not specified because data is retrieved and saved through a dataManager with an url adaptor; editing is in batch mode.
Columns are id (primary key, not visible), Name, FieldType (not visible), FieldValue, Range; Regex and ErrMsg columns coming from server are not in the columns list of grid, but I saw in grid property dataRow also their data is accessible in javascript browser side. Only FieldValue is editable.
HMI screenshot is this one, I succeed to render and edit fieldValues with different controls based on FieldType column value.
this is where I am at this point.
Now I need a javascript validator on browser side that uses data fields in data rows to perform validation for a given cell of FieldValue column cell
validator should use value in FieldType for that row, it could be
- "integer": check that value is specified (required) and in range specified by Range column for that row
- "text": check that value matches regex specified by Regex column for that row
- in case of input error, the error message shown to user should be the one contained in ErrMsg column for that row
Have you or your team ever seen use cases like this one? Is it possible to implement?
Regards,
Silvia
SIGN IN To post a reply.
