Adding require(*) in the required field's label in inline add and edit form.

[Sandip]

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> &nbsp" +

        "<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. 

[Vignesh Natarajan]

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 

 

https://help.syncfusion.com/aspnetmvc/grid/editing#inline-template-form  

 

https://help.syncfusion.com/aspnetmvc/grid/editing?cs-save-lang=1&cs-lang=razor#column-validation  

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan 

[Sandip]

Hi, thanks for providing the prompt response. i don't want to use the custom template. in the normal template using jquery can't i achieve this in action begin or in action complete methods ? as i wanted a generic solution so whenever I Add require tag in model it automatically add the * in edit and add forms.

[Vignesh Natarajan]

Hi Sandip, 

 

Thanks for the update. 

 

We have achieved your requirement “adding required(*) in dynamic way without using Templates” using ActionComplete event of the Grid. In the ActionComplete event, we have find the GridForm and add the styles for required class. Please to the code example:- 

 

<style type="text/css"> 

    .required::after { 

        content: '*'; 

        margin-right: 4px; 

        color: red; 

    } 

</style> 

 

@(Html.EJ().Grid<OrdersView>("FlatGrid") 

         .Datasource((IEnumerable<object>)ViewBag.datasource) 

         .ClientSideEvents(events =>{ 

                        events.ActionComplete("complete"); 

           }) 

            .Columns(col =>{ 

                   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 

                           .   .   . 

      })) 

 

<script> 

 

    function complete(args) { 

        if ((args.requestType == "beginedit" || args.requestType == "add")) { 

            this.element.find("#GridEditForm").find(".e-label").addClass("required"); // GridID followed with EditForm 

        } 

    } 

 

</script> 

 

 

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete  

 

Please get back to us if you need any further assistance. 

 

Regards, 

Vignesh Natarajan 

 

[Sandip]

Thanks for your response.

This works but still, a small modification needed. as I don't know what will be required fields as I am setting up a required attribute from a model. how can we identify conditionally those required fields and add the * on those respective labels?

[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 

 

https://help.syncfusion.com/aspnetmvc/grid/editing#column-validation  

 

Regards, 

Vignesh Natarajan 

 

[Sandip]

Thanks,

I am able to resolve this issue now.

[Vignesh Natarajan]

Hi Sandip, 

Thanks for the update. 

We are glad to hear that your query has been resolved by our solution.  

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan