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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Inline editing with dropdown and enum values

Thread ID:

Created:

Updated:

Platform:

Replies:

127164 Oct 31,2016 07:07 AM UTC Jul 22,2017 09:28 AM UTC ASP.NET Web Forms 3
loading
Tags: Grid
CLAUDIO RICCARDI
Asked On October 31, 2016 07:07 AM UTC

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 [Syncfusion]
Replied On November 1, 2016 11:45 AM UTC

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.   
 

 
@(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 
        } 
    } 
} 


 
Regards, 
 
Jayaprakash K. 


Benjamín Rivero Cruz
Replied On July 20, 2017 07:37 PM UTC

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 [Syncfusion]
Replied On July 22, 2017 09:28 AM UTC

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 



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.

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

;