Adding require(*) in the required field's label in inline add and edit form.
Hello I am using syncfusion grid.
I have a requirement where i want to add require(*) symbol in the grid with red colour beside input field's form.
https://stackoverflow.com/questions/32075600/i-want-to-add-required-with-every-required-label
I am looking for this kind of * in the fields as shown in link above. do you know how to achieve this?
Below is my code for the View
@(Html.EJ().Grid<AssignedProductMaterialViewModel>("GridProductMaterials")
.Datasource(datasource => datasource.Json((IEnumerable<AssignedProductMaterialViewModel>
)Model.ProductMaterials).UpdateURL(@Url.Action("UpdateProductMaterial")).InsertURL(@Url.Action("CreateProductMaterial")).RemoveURL(@Url.Action("RemoveProductMaterial")).Adaptor(AdaptorType.RemoteSaveAdaptor))
.EditSettings(edit => { edit.AllowAdding().AllowEditing().AllowEditOnDblClick(false).EditMode(EditMode.InlineForm).ShowConfirmDialog(true).TitleColumn("Description"); })
.Query("new ej.Query().addParams('ProductId', " +Model.Id +")")
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
});
})
.AllowResizing(true).AllowRowDragAndDrop(true).SelectionType(SelectionType.Single)
.EnableAltRow().AllowResizeToFit(true)
.EnableHeaderHover()
.Columns(col =>
{
col.HeaderText(" ")
.Template("<span class='glyphicon glyphicon-sort'></span>")
.Width(20)
.Add();
col.Field(x => x.UnitQty)
.TextAlign(TextAlign.Center).EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })
.Width(45)
.Add();
col.Field(x => x.Id)
.HeaderText("Id")
.TextAlign(TextAlign.Left).IsPrimaryKey(true).IsIdentity(true).AllowEditing(false).Visible(false)
.Width(100)
.Add();
col.Field(x => x.Description)
.TextAlign(TextAlign.Left).EditType(EditingType.StringEdit)
.Width(110)
.Add();
col.Field(x => x.BeamLength)
.TextAlign(TextAlign.Left)
.EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })
.Width(60)
.Add();
col.Field(x => x.SawDepth)
.TextAlign(TextAlign.Left)
.EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })
.Width(60)
.Add();
col.Field(x => x.Thickness)
.TextAlign(TextAlign.Left)
.EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })
.Width(50)
.Add();
col.Field(x => x.Machine)
.TextAlign(TextAlign.Left).EditType(EditingType.StringEdit)
.Width(40)
.Add();
col.Field(x => x.Edge)
.TextAlign(TextAlign.Left)
.Width(40)
.Add();
col.Field(x => x.TapeThickness)
.TextAlign(TextAlign.Left)
.EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })
.Width(32)
.Add();
col.Field(x => x.WorkInstruction)
.TextAlign(TextAlign.Left).EditType(EditingType.StringEdit)
.Width(40)
.Add();
col.Field(x => x.FinishedLength)
.TextAlign(TextAlign.Left)
.EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })
.Width(35)
.Add();
col.Field(x => x.SizeDepth)
.TextAlign(TextAlign.Left)
.EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })
.Width(60)
.Add();
col.HeaderText("Actions")
.Template(
"<a rel='nofollow' href='javascript:void(0)' data-productmaterial-id='{{:Id}}' class='btn-black btn btn-xs edit-data productmaterial-update-button'>Edit</a>  " +
"<a rel='nofollow' href='javascript:void(0)' data-productmaterial-id='{{:Id}}' class='btn-black btn btn-xs edit-data productmaterial-delete-button'>Delete</a>"
).AllowEditing(false)
.TextAlign(TextAlign.Center)
.Width(70).
Add();
})
.ClientSideEvents(events =>
{
events.ActionFailure("mrp.productDetails.productMaterialActionFailure");
events.ActionComplete("mrp.productDetails.productMaterialActionComplete");
events.RowDrop("mrp.productDetails.productMaterialsRowDrop");
})
)
And my Model
public class AssignedProductMaterialViewModel
{
[Key]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public int Id { get; set; }
[ScaffoldColumn(false)]
public int ProductId { get; set; }
public int OrderId { get; set; }
[Required(ErrorMessage = "Unit Qty is Required")]
[Display(Name = "Unit Qty")]
public int UnitQty { get; set; }
[Required]
[MaxLength(255)]
public string Description { get; set; }
[Required]
[Display(Name = "Beam Length")]
public int BeamLength { get; set; }
[Required]
[Display(Name = "Saw Depth")]
public int SawDepth { get; set; }
[Required]
public int Thickness { get; set; }
[MaxLength(255)]
public string Machine { get; set; }
[MaxLength(255)]
public string Edge { get; set; }
[Required]
[Display(Name = "Tape<br>Thick")]
public int TapeThickness { get; set; }
[MaxLength(255)]
[Display(Name = "Work<br>Instr")]
public string WorkInstruction { get; set; }
[Required]
[Display(Name = "Finish<br>Length")]
public int FinishedLength { get; set; }
[Required]
[Display(Name = "Size Depth")]
public int SizeDepth { get; set; }
}
I wanted to do a dynamic logic for the textbox, numeric fields and also for dropdown so that when i set require in the model it should automatically show * in the add and edit form of grid.
SIGN IN To post a reply.
7 Replies
Hi Sandip,
Thanks for using Syncfusion products.
Query: “I have a requirement where i want to add require(*) symbol in the grid with red colour beside input field's form.”
As per your requirement we have inserted the ( * ) symbol for input field. We have achieved your requirement using InlineFormTemplate editMode of ejGrid. Refer the below code example
|
<style type="text/css">
.required::after {
content: '*';
margin-right: 4px;
color: red;
}
</style>
@(Html.EJ().Grid<object>("Editing")
.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("InlineUpdate").InsertURL("InlineInsert").RemoveURL("InlineDelete").Adaptor(AdaptorType.RemoteSaveAdaptor))
.EnableAltRow()
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineFormTemplate).InlineFormTemplateID("#template"); })
.AllowPaging()
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.Columns(col =>
{
. . . . . .
})
.ClientSideEvents(eve => { eve.ActionComplete("complete"); })
)
<script id="template" type="text/template">
<b>Order Details</b>
<table cellspacing="10">
<tr>
<td class="required" style="text-align: right;">
Order ID
</td>
<td style="text-align: left">
<input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable"
style="text-align: right; width: 116px; height: 28px" />
</td>
<td class="required" style="text-align: right;">
Customer ID
</td>
<td style="text-align: left">
<input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext valid"
style="width: 116px; height: 28px" />
</td>
</tr>
<tr>
<td class="required" style="text-align: right;">
Freight
</td>
<td style="text-align: left">
<input type="text" id="Freight" name="Freight" value="{{:Freight}}" />
</td>
<td class="required" style="text-align: right;">
Ship Country
</td>
<td style="text-align: left">
<select id="ShipCountry" name="ShipCountry">
<option value="Argentina">Argentina</option>
<option value="Austria">Austria</option>
<option value="Belgium">Belgium</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="Denmark">Denmark</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Ireland">Ireland</option>
<option value="Italy">Italy</option>
<option value="Mexico">Mexico</option>
<option value="Norway">Norway</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Spain">Spain</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="UK">UK</option>
<option value="USA">USA</option>
<option value="Venezuela">Venezuela</option>
</select>
</td>
</tr>
<tr>
<td class="required" style="text-align: right;">
Ship City
</td>
<td style="text-align: left">
<input id="ShipCity" name="ShipCity" value="{{: ShipCity}}" class="e-field e-ejinputtext valid"
style="width: 116px; height: 28px" />
</td>
<td style="text-align: right;">
Ship Name
</td>
<td class="required" style="text-align: left">
<input id="ShipName" name="ShipName" value="{{: ShipName}}" class="e-field e-ejinputtext valid"
style="width: 116px; height: 28px" />
</td>
</tr>
<tr>
<td class="required" style="text-align: right;">
Ship Address
</td>
<td style="text-align: left">
<textarea id="ShipAddress" name="ShipAddress" class="e-ejinputtext" value="{{: ShipAddress}}">{{: ShipAddress}}</textarea>
</td>
</tr>
</table>
</script> |
Refer the below screenshot for the output
 |
For your convenience we have prepared a sample which can be downloaded from below link
Sample: http://www.syncfusion.com/downloads/support/forum/141060/ze/SyncfusionMvcApplication40_(2)4961845
Refer our help documentation for your reference
Please get back to us if you have further queries.
Regards,
Vignesh Natarajan
Hi Sandip,
Thanks for the update.
Query: how can we identify conditionally those required fields and add the * on those respective labels?
From your query we could understand that, you want to add the required fields only for the particular column whose columns are mentioned has required fields. We have achieved your requirement by defining the required field’s using validation Rules and also we have added the required label to the required fields alone(i.e. label added for the mandatory fields).
Please refer the below code example
|
<style type="text/css">
.required::after {
content: '*';
margin-right: 4px;
color: red;
}
</style>
<div id="ControlRegion">
@(Html.EJ().Grid<object>("FlatGrid")
…….
.ClientSideEvents(e => e.ActionComplete("complete"))
………………
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(75).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).ValidationRules(v => v.AddRule("required", true)).Add();
……………….
}))
</div>
<script>
function complete(args) {
if ((args.requestType == "beginedit" || args.requestType == "add")) {
for (var i = 0; i < this.model.columns.length; i++) {
if (!ej.isNullOrUndefined(this.model.columns[i].validationRules)) {
if (this.model.columns[i].validationRules.required)
$(this.element.find("#FlatGridEditForm").find(".e-label")[i]).addClass("required"); // GridID followed with EditForm
}
}
}
}
</script>
|
Output:
For your convenience we have prepared a sample which can be downloaded from below link
Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/dataannotation-1593970382.zip
Refer our help documentation for your reference
Regards,
Vignesh Natarajan
SIGN IN To post a reply.
