We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

141060 Nov 20,2018 11:56 PM UTC Nov 27,2018 05:03 AM UTC ASP.NET MVC 7
loading
Tags: Grid
Sandip
Asked On November 20, 2018 11:56 PM UTC

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 [Syncfusion]
Replied On November 21, 2018 09:36 AM UTC

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 
 
 
Refer our help documentation for your reference 
 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan 


Sandip
Replied On November 21, 2018 09:45 AM UTC

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 [Syncfusion]
Replied On November 22, 2018 10:00 AM UTC

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 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Vignesh Natarajan 
 


Sandip
Replied On November 22, 2018 10:12 AM UTC

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 [Syncfusion]
Replied On November 26, 2018 06:03 AM UTC

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 
 
 
Refer our help documentation for your reference 
 
 
Regards, 
Vignesh Natarajan 
 


Sandip
Replied On November 26, 2018 05:10 PM UTC

Thanks,
I am able to resolve this issue now.

Vignesh Natarajan [Syncfusion]
Replied On November 27, 2018 05:03 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon