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
close icon

In-line Grid Dropdown in edit mode

Hello,

Can you please help me map grid value with the dropdown?  When I try edit the row, the column show blank, it would not map with dropdown's value.

And how can you make the Grid's edit mode as default?

I am using the latest version of Syncfusion: 15.3450.0.29

Controller:
public class FeeScriptsController : Controller
    {
        public ActionResult Index()
        {
            List<FeeScriptModel> studentList = new List<FeeScriptModel>() {
                    new FeeScriptModel(){ DescriptionValue=1 },
                    new FeeScriptModel(){ DescriptionValue=2 },
                    new FeeScriptModel(){ DescriptionValue=3  },
                    new FeeScriptModel(){ DescriptionValue=4 },
                    new FeeScriptModel(){ DescriptionValue=5 }
                };
 
            List<dropDown> list = new List<dropDown>();
            list.Add(new dropDown(3, 1));
            list.Add(new dropDown(4, 2));
 
 
            ViewBag.dataSource = studentList;
            ViewBag.dataSource2 = list;
            return View();
        }
}

Cshtml:
@(Html.EJ().Grid<FeeScriptModel>("FlatGrid")
            .Datasource((IEnumerable<FeeScriptModel>)ViewBag.dataSource)
            .AllowPaging()
            .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("DescriptionValue")
                .HeaderText("Desc Value")                
                .Add();
                col.Field("DescriptionValue")
                    .HeaderText("dropdown")
                    .DataSource(ViewBag.dataSource2)
                    .EditType(EditingType.DropdownEdit).Add();
            })
)

Thank you.

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team September 21, 2017 04:12 PM UTC

Hi Sam, 

Thanks for contacting Syncfusion support. 
 
In this query, we suspect that you want to populate ejDropDownList in any one of Grid column. In the given code snippet you have bound a local data to DropDownlist. So, we suggest you to pass the dataSource as text and value pair to the ejDropDownList. 
 
For an example, we have done dropdown list for the column “ShipCountry”. 
 
Refer the below code example. 
 
[GridCOntroller.cs]   
 
public class GridController : Controller 
    { 
                 List<Employees> emp = new List<Employees>(); 
        public ActionResult GridSample() 
        { 
             
            --- 
 
            BindDataSource(); 
            ViewBag.dropData = emp; 
            return View(); 
        } 
        private void BindDataSource() 
        { 
            if (emp.Count == 0) 
            { 
               emp.Add(new Employees() { text = "Argentina", value = "Argentina" }); 
                emp.Add(new Employees() { text = "Austria", value = "Austria" }); 
                emp.Add(new Employees() { text = "Belgium", value = "Belgium" }); 
                emp.Add(new Employees() { text = "Brazil", value = "Brazil" }); 
                emp.Add(new Employees() { text = "Canada", value = "Canada" }); 
                 
                --- 
 
           } 
        } 
         
        public class Employees 
        { 
            public string text { get; set; } 
            public string value { get; set; } 
        } 
         
---------------------------------- 
 
[GridSample.cshtml] 
 
@(Html.EJ().Grid<object>("FlatGrid") 
         
        .AllowPaging()    /*Paging Enabled*/ 
         
        ---- 
 
       .Columns(col => 
        { 
             
        ---- 
 
col.Field("ShipCountry").HeaderText("Ship Country").EditType(EditingType.Dropdown) 
.DataSource((IEnumerable<object>)ViewBag.dropData).Width(110).Add(); 
             
        })) 
     
 
  

We have prepared a single sample and it can be downloadable from the below location. 


Refer the help documentation. 



Regards, 
Thavasianand S. 



SA Sam September 22, 2017 12:55 PM UTC

Hi,

I know how to populate data for the grid and the dropdown,  but when in edit-mode,  they are not mapped together.  I attached a screenshot shown example.

Thank a lot.


Attachment: Capture_955989b2.zip


TS Thavasianand Sankaranarayanan Syncfusion Team September 25, 2017 01:12 PM UTC

Hi Sam, 

We have analyzed your given screen shot and we suspect that you have pass the dataSource for ejGrid as text and value. But we suggest you to pass the text and value pair dataSource for that dropdown column in Grid. 

Refer the below code example. 

[GridController.cs]    
  
public class GridController : Controller  
    {  
                 List<Employees> emp = new List<Employees>();  
        public ActionResult GridSample()  
        {  
              
            var DataSource = new NorthwindDataContext().OrdersViews.ToList(); 
            ViewBag.datasource = DataSource; // dataSource for Grid 
 
            BindDataSource();  
            ViewBag.dropData = emp; // dataSource for dropdown column 
            return View();  
        }  
        private void BindDataSource() // creating dataSource for dropdown column 
        {  
            if (emp.Count == 0)  
            {  
               emp.Add(new Employees() { text = "Argentina", value = "Argentina" });  
                emp.Add(new Employees() { text = "Austria", value = "Austria" });  
                emp.Add(new Employees() { text = "Belgium", value = "Belgium" });  
                emp.Add(new Employees() { text = "Brazil", value = "Brazil" });  
                emp.Add(new Employees() { text = "Canada", value = "Canada" });  
                  
                ---  
  
           }  
        }  
          
        public class Employees  
        {  
            public string text { getset; }  
            public string value { getset; }  
        }  
          
----------------------------------  
  
[GridSample.cshtml]  
  
@(Html.EJ().Grid<object>("FlatGrid")  
         .Datasource((IEnumerable<object>)ViewBag.datasource)  // binding dataSource for Grid 
        .AllowPaging()    /*Paging Enabled*/  
          
        ----  
  
       .Columns(col =>  
        {  
              
        ----  
  
col.Field("ShipCountry").HeaderText("Ship Country").EditType(EditingType.Dropdown)  
.DataSource((IEnumerable<object>)ViewBag.dropData).Width(110).Add(); // bind those text and value pair data to the dropdown column 
              
        }))  
      
  



  
If you still face the same issue then please reproduce the issue in the following attached sample. 


Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon