Inline editing with dropdown and enum values

[CLAUDIO RICCARDI]

Hi,

I hav defined an enum class like this:

    public enum LocationType

    {

        [Description("Description 1")]

        EST = 1,

        [Description("Description 2")]

        INTNS = 2,

        [Description("Description 3")]

        INTS = 3

    }

In the Model class I have defined the following property:

        [DisplayName("Location Type")]

        public LocationType?  LocationType { get; set; }

This property is mapped in a grid control with these settings:

@(Html.EJ().Grid<SlimHub.Models.WorkLocation>("LocationsGrid")

      .Datasource(ds => ds.Json((IEnumerable<WorkLocation>)Model.WorkLocations.ToList()).UpdateURL("../NormalLocationUpdate").InsertURL("../NormalLocationInsert").RemoveURL("../NormalLocationDelete").Adaptor(AdaptorType.RemoteSaveAdaptor))

                          .EditSettings(edit =>

                          {

                              edit.AllowAdding().AllowDeleting().AllowEditing();

                          })

                          .Locale("it-IT")

                          .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);

                              });

                          })

                          .AllowResizing()

                          .AllowSorting()

                          .SortSettings(sort => { sort.SortedColumns(col => { col.Field("AreaId").Direction(SortOrder.Ascending).Add(); col.Field("Prog").Direction(SortOrder.Ascending).Add(); }); })

                          .AllowFiltering()

                          .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

                          .AllowGrouping()

                          .GroupSettings(group => { group.GroupedColumns(col => { col.Add("AreaId"); }); })

                          .PageSettings(page => { page.PageSize(20); })

                          .AllowTextWrap(true)

                          .Columns(col =>

                          {

                              col.Field("WorkLocationId").HeaderText("ID Riga Rilevamento Lavoro").HeaderTextAlign(TextAlign.Center).IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(5).Visible(false).Add();

                              col.Field("WorkId").DefaultValue(@Model.WorkId).HeaderText("ID Lavoro").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(5).Visible(false).Add();

                              col.Field("AreaId").HeaderText("Area").ForeignKeyField("AreaIdId").ForeignKeyValue("AreaDescription").DataSource((IEnumerable<object>)ViewBag.Areas).HeaderTextAlign(TextAlign.Center).Width(30).Add();

                              col.Field("Prog").HeaderText("Num. Post.").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(10).Add();

                              col.Field("UnavailableLocation").HeaderText("Non Rev.").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(10).Add();

                              col.Field("FlagIntExt").HeaderText("Esterna").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(10).Add();

                              col.Field("LocationType").HeaderText("Posizion").HeaderTextAlign(TextAlign.Center).EditType(EditingType.Dropdown).Template("<img style='width: 24px; height: 24px' src='../../images/LocationTypes/{{:PositionType}}.png' alt='{{:PositionType}}.png' />").TextAlign(TextAlign.Center).Width(10).Add();

                              col.Field("IntVal1").HeaderText("Riscontro").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(10).Add();

                              col.Field("IntVal2").HeaderText("Catture").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(10).Add();

                              col.Field("Annotations").HeaderText("Note").HeaderTextAlign(TextAlign.Center).Width(50).Add();

                          })

                          .ClientSideEvents(eve =>

                          {

                              eve.ActionComplete("complete").ActionBegin("begin").EndEdit("endEdit").EndAdd("endAdd");

                              eve.QueryCellInfo("formattingCell");

                          })

                            )

When I try to edit the LocationType column, I would like to see the list of property descriptions in the dropdown (Description 1, Description 2, Description 3) instead of the list of values (1,2,3)

Is it possible?

Thanks in advance.

Claudio

[Jayaprakash Kamaraj]

Hi Claudio, 

 

Thank you for contacting Syncfusion support. 

 

We have achieved your requirement using EditTemplate feature. We can render any other control(dropdown/autocomplete) in grid column by using edit Template. Please refer to the below Help document and code example.   

 

https://help.syncfusion.com/api/js/ejgrid#members:columns-edittemplate 

https://help.syncfusion.com/aspnetmvc/grid/editing#cell-edit-template 

 

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

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

         .AllowPaging()    /*Paging Enabled*/ 

             .PageSettings(eve=>eve.PageSize(3)) 

    .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 

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

            { 

.. 

                col.Field("LocationType").HeaderText("LocationType").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).TextAlign(TextAlign.Right).Width(90).Add(); 

.. 

            })) 

<script type="text/javascript"> 

       function create() { 

           return $("<input>"); 

       } 

 

    function write(args) { 

        obj = $('#FlatGrid').ejGrid('instance'); 

        var data =   @(Html.Raw(Json.Encode(ViewData["EmployeeID"]))); 

        args.element.ejDropDownList({ width: "100%", dataSource: data}); 

    } 

 

    function read(args) { 

        return args.ejDropDownList("getSelectedValue"); 

    } 

    </script> 

GridController.cs 

 

public ActionResult GridFeatures() 

        { 

             

            ViewData["EmployeeID"] = EmployeeID; 

            return View(); 

        } 

 

        public List<object> EmployeeID 

        { 

 

            get 

             

            { 

                var EmployeeID = new List<object>(); 

 

                Type enumType = typeof(LocationType);     

      

    // I will get all values and iterate through them     

    var enumValues = enumType.GetEnumValues(); 

 

    foreach (LocationType value in enumValues) 

    {  

        MemberInfo memberInfo = 

            enumType.GetMember(value.ToString()).First();   

        var descriptionAttribute = 

            memberInfo.GetCustomAttribute<DescriptionAttribute>(); 

        LocationType eval2 = value; 

          int value1 = (int) eval2; 

        EmployeeID.Add(new { value = value, text = descriptionAttribute.Description }); 

 

   } 

    return EmployeeID; 

            } 

        } 

 

        public class Details 

        { 

            public int OrderID { get; set; } 

            public DateTime OrderDate { get; set; } 

            public string FirstName { get; set; } 

            public string LastName { get; set; } 

            public string Title { get; set; } 

            [DisplayName("Location Type")] 

            public LocationType? LocationType { get; set; } 

        } 

 

        public enum LocationType 

        { 

            [Description("Description 1")] 

            EST = 1, 

            [Description("Description 2")] 

            INTNS = 2, 

            [Description("Description 3")] 

            INTS = 3 

        } 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/127164/ze/SyncfusionMvcApplication22399507565 

 

Regards, 

 

Jayaprakash K. 

[Benjamín Rivero Cruz]

Hi, I implement this solution and works perfect. Currently I am trying to do 2 things:

• When the Grid is loaded in first place it would be great that the description (string) appear, instead the numbers appear, ¿How can achieve this? ¿Maybe in event create?, when I edit this row (I am using inline edit) the dropdown list appear with the values populated correctly. I use: 
  

          var selectedItem = args.rowdata.ColumnName; //this to get the value

          args.element.ejDropDownList({ width: "100%", dataSource: data, selectedIndex: selectedItem});

• The second problem is about the Filter, I am using FilterType.Excel for this Grid, I will like to show on the enum column the values (string) instead of numbers for do the filter. 
  

Thanks in advance. 

[Farveen Sulthana Thameeztheen Basha]

Hi Benjamin, 

Thanks for contacting Syncfusion Support. 

Query #1 :-It would be great that the description (string) appear, instead the numbers appear, ¿How can achieve this? ¿Maybe in event create?, 

 

We have checked your requirement and in the above given sample, the values of the dropdown list are bound with description(string) only.  Please refer to the below screenshot. 

 

 

We need some additional information to find the cause of the issue. Could you please share us the following details with us. 

1. Exact scenario you need to achieve. 

2. Do you need to bind dropdown with string value or else for Grid. 

3. Share us screenshot/Video about your requirement. 

The provided information will help us to analyze and provide you the solution as early as possible. 

 

Query #2 :- The second problem is about the Filter, I am using FilterType.Excel for this Grid, I will like to show on the enum column the values (string) instead of numbers for do the filter.  

 

In Grid, operations such as filtering/Sorting are performed based on the field name property.  So field name is necessary to perform filtering operation. Excel type of filtering takes the dataSource for the checkbox list from the corresponding field that we have bind. Even when we bound dataSource (string values) separately for the checkbox list, we cannot perform filtering operation. So could not  achieve your requirement need to bind the new dataSource other than field values while  to the checkbox list for excel filtering. 

 

Regards, 

 

 Farveen sulthana T