1. Home
  2. Forum
  3. ASP.NET MVC
  4. How to use localized Display resources in grid

How to use localized Display resources in grid

Hello

Question 1:
I have a DTO which is annotates with localized field names like this:
        [Display(ResourceType = typeof(TO.Resources.Strings), Name = "ItemsToComplete")]
        public int ItemsToComplete { get; set; }

In my previous version of a html table I could use 
@Html.DisplayFor(model => model.ItemsToCOmplete) and @Html.DisplayNameFor(model => model.ItemsToCOmplete) to build the html table.

How do I use those localizations in Grid (essentials1). 

I of course have also enums using localizations as well, like this, and that same question applies.
    public enum CostRowType
    {
        [Display(ResourceType = typeof(TO.Resources.Strings), Name = "Costs_Lot")]
        LotCost = 0,

        [Display(ResourceType = typeof(TO.Resources.Strings), Name = "Costs_Material")]
        Material = 1,

Question2:
I have enabled filtering on table level in the EJ grid. How can I prepopulate filter fields with relevant field content? So, instead of having a text field for filtering I would like to have dropdown with (localized) content of column cells.

All the best
Olavi Laitala




1 Reply
VN Vignesh Natarajan Syncfusion Team September 28, 2018 07:01 AM UTC

Hi Olavi, 
  
Thanks for contacting Synfusion support.  
  
Query#1:- How do I use those localizations in Grid (essentials1). I of course have also enums using localizations as well, like this, and that same question applies.  
 
By default we have given support to handle Data Annotation while defining its model calls in server side. 
 
Refer the below code example for your reference 
 
[cshtml] 
 
@model IEnumerable<BooleanGrid.Controllers.GridController.Details> 
 
@(Html.EJ().Grid<BooleanGrid.Controllers.GridController.Details>("FlatGrid") 
         .Datasource(Model) 
.                 .              .         .         .  
) 
 
 [C#] 
 
public ActionResult GridFeatures { 
           
          List<Details> data = GetInversedData(); 
           return View(data); 
    } 
 
    public class DMSerial : IDataSourceSerializer 
        { 
            public string Serialize(object obj) 
            { 
                var str = Newtonsoft.Json.JsonConvert.SerializeObject(obj); 
                return str; 
            } 
        } 
 
        public static List<Details> GetInversedData() 
        { 
            List<Details> obj = new List<Details>(); 
            for (var i = 0; i < 1; i++) 
            { 
                obj.Add(new Details() { OrderID = 10001, EmployeeID = 1, FirstName = "Nancy", LastName = "Davolio", Title = "Sales Representative", Unit = UnitOfMeasure.g }); 
                 
            } 
            return obj; 
        } 
 
        public class Details 
        { 
 
            [Display(Name = "Order ID")] 
            [Required(ErrorMessage = "OrderID is must")] 
            public int OrderID 
            { 
                get; 
                set; 
            } 
 
            [Display(Name = "Emp ID")] 
            [Required(ErrorMessage = "EmployeeID is must")] 
            public int? EmployeeID 
            { 
                get; 
                set; 
            } 
 
 
            [Display(Name = "FName")] 
            public string FirstName 
            { 
                get; 
                set; 
            } 
 
 
            [Display(Name = "LName")] 
            public string LastName 
            { 
                get; 
                set; 
            } 
 
 
            [Display(Name = "Title")] 
            public string Title 
            { 
                get; 
                set; 
            } 
            [Display(Name ="un")] 
            [Newtonsoft.Json.JsonConverter(typeof(Newtonsoft.Json.Converters.StringEnumConverter))] 
            public UnitOfMeasure Unit { get; set; } 
 
        } 
 
        public enum UnitOfMeasure 
        { 
            [EnumMember(Value = "Number")] 
            Nr = 0, 
            [EnumMember(Value = "Kilogram")] 
            Kg = 1, 
            [EnumMember(Value = "Gram")] 
            g = 2, 
            [EnumMember(Value = "Liter")] 
            l = 3 
        } 
 
 
Refer the below screenshot for the output 
 
 
 
 
Refer our UG documentation for your reference  
 
 
Query# 2:- I have enabled filtering on table level in the EJ grid. How can I prepopulate filter fields with relevant field content? So, instead of having a text field for filtering I would like to have dropdown with (localized) content of column cells. 
 
From your query, we understand that you need to render the dropDownList instead of filterbar (input box). We have achieved your requirement using filterBarTemplate feature of ejGrid. Refer the below code example 
 
@(Html.EJ().Grid<BooleanGrid.Controllers.GridController.Details>("FlatGrid") 
         .Datasource(Model) 
         .AllowFiltering() 
         .AllowPaging() 
         .Columns(col => { 
             col.Field("OrderID").IsPrimaryKey(true).Width(75).Add(); 
             col.Field("EmployeeID").HeaderText("EmployeeID").FilterBarTemplate(filterbar => filterbar.Write("dropdown_write").Read("dropdown_read")).TextAlign(TextAlign.Right).Width(75).Add(); 
             col.Field("FirstName").Width(75).Add(); 
             col.Field("Unit").Width(75).Add(); 
       }) 
) 
…….. 
 
<script type="text/javascript"> 
 
    function dropdown_write(args) { 
        var data = [{ text: "clear", value: "clear" }, { text: "1", value: 1 }, { text: "2", value: 2 }, { text: "3", value: 3 }, { text: "4", value: 4 }, 
        { text: "5", value: 5 }, { text: "6", value: 6 }, { text: "7", value: 7 }, { text: "8", value: 8 }, { text: "9", value: 9 } 
        ] 
        args.element.ejDropDownList({ width: "100%", dataSource: data, change: ej.proxy(args.column.filterBarTemplate.read, this, args) }) 
    } 
    function dropdown_read(args) { 
        if (args.element.val() == "clear") { 
            this.clearFiltering(args.column.field); 
            args.element.val("") 
        } 
        this.filterColumn(args.column.field, "equal", args.element.val(), "and", true) 
    } 
 
</script> 
 
 
 
Refer the below screenshot for the output 
 
 
  
 
Ref our UG documentation for your reference   
 
 
For your convenience we have prepared a sample which can be downloaded from below link 
 
 
Regards, 
 
Vignesh Natarajan 
 


Loader.
Up arrow icon