1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Fill in DropDownEdit

Fill in DropDownEdit

Hi,
I'm creating a grid in MVC.
My question is: how do I fill in the options on my "dropdownedit"column. It already does that automatically with the data present on the grid. I don't want that as if a person eliminates all rows with a specific option that option will disappear from the dropdown.
I'm trying to use the dropdown field "DataSource" but im always getting "The request Failed" inside the dropbox.

VIEW

@usingSyncfusion.EJ2;
@{
ViewBag.Title="Configuraçõesde";
ViewBag.Filter="Cotações";
Layout="~/Views/Shared/_layout.cshtml";
}
 
@sectioncss{
 
 
 
}
 
 
@sectioncontent{
 
<divclass="row">
<divclass="col-md-12grid-margin">
<divclass="card">
<divclass="card-body">
 
<divclass="row">
<divclass="col-md-12">
<h4style="padding-bottom:20px;">@ViewBag.Title@ViewBag.Filterh4>
 
 
@Html.EJS().Grid("negocios").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowExcelExport().ToolbarClick("toolbarClick").Columns(col=>
{
col.Field("Id").HeaderText("Id").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Visible(false).Add();
col.Field("Date").HeaderText("Data").EditType("datepickeredit").Width("150").Add();
@*col.Field("Date").HeaderText("Data").Width("100").ValidationRules(new{required=true}).Add();*@
col.Field("Code").HeaderText("Código").Width("70").ValidationRules(new{required=true}).Add();
col.Field("Description").HeaderText("Descrição").ValidationRules(new{required=true}).Width("150").Add();
col.Field("Group").HeaderText("Grupo").Width("60").ValidationRules(new{required=true}).Add();
col.Field("Value").HeaderText("Valor").Width("60").ValidationRules(new{required=true}).Add();
col.Field("Unit").HeaderText("Unidade").EditType("dropdownedit").DataSource(ViewBag.dropdown).Width("70").Add();
col.Field("Day").HeaderText("Dia").EditType("booleanedit").DisplayAsCheckBox(true).Type("boolean").Width("50").Add();
col.Field("Month").HeaderText("Mês").EditType("booleanedit").DisplayAsCheckBox(true).Type("boolean").Width("50").Add();
col.Field("Year").HeaderText("Ano").EditType("booleanedit").DisplayAsCheckBox(true).Type("boolean").Width("50").Add();
col.Field("Vat").HeaderText("Iva").EditType("booleanedit").DisplayAsCheckBox(true).Type("boolean").Width("50").Add();
 
}).AllowPaging().PageSettings(page=>page.PageCount(5)).AllowGrouping().AllowFiltering().AllowSorting().EditSettings(edit=>{edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).ShowConfirmDialog(true).ShowDeleteConfirmDialog(true);}).Toolbar(newList<string>(){"Add","Edit","Delete","Update","Cancel","ExcelExport"}).Render()
 
div>
div>
<divclass="button-footer">
<buttonclass="btnbtn-successmr-2"type="button"id="excell">ExportExcellbutton>}
div>
div>
div>
div>
div>

Controller :

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Mvc;
usingMainHub.Projects.CCP.WebSite.Site.Models.Configurations;
usingMainHub.Projects.CCP.WebSite.Site.Models.SearchResults;
namespaceMainHub.Projects.CCP.WebSite.Site.Controllers
{
publicclassConfigurationController:Controller
{
//GET:Configuration
publicActionResultIndex()
{
 
 
returnView();
}
 
publicViewResultConfiguration()
{
List<BusinessConfiguration>results=newList<BusinessConfiguration>()
   {
newBusinessConfiguration(){Id=1,Date=DateTime.Now.ToString("dd/MM/yyyy"),Code="Ouro",Description="ourofino",Group="ct01",Value=34.32,Unit="Euro",Day=true,Month=false,Year=false,Vat=false},
newBusinessConfiguration(){Id=2,Date=DateTime.Now.ToString("dd/MM/yyyy"),Code="Platina",Description="platina1",Group="ct02",Value=21.01,Unit="Unidade",Day=true,Month=false,Year=false,Vat=false},
newBusinessConfiguration(){Id=3,Date=DateTime.Now.ToString("dd/MM/yyyy"),Code="Prata",Description="Prata1000",Group="ct03",Value=0.40,Unit="Percentagem",Day=false,Month=true,Year=false,Vat=true},
newBusinessConfiguration(){Id=4,Date=DateTime.Now.ToString("dd/MM/yyyy"),Code="Paládio",Description="paládio",Group="ct04",Value=22.8,Unit="Percentagem",Day=false,Month=false,Year=true,Vat=false},
newBusinessConfiguration(){Id=5,Date=DateTime.Now.ToString("dd/MM/yyyy"),Code="Platina",Description="platina3",Group="ct02",Value=20.2,Unit="Unidade",Day=false,Month=true,Year=false,Vat=false},
newBusinessConfiguration(){Id=6,Date=DateTime.Now.ToString("dd/MM/yyyy"),Code="Platina",Description="platina2",Group="ct02",Value=20.42,Unit="Percentagem",Day=false,Month=false,Year=true,Vat=false},
newBusinessConfiguration(){Id=7,Date=DateTime.Now.ToString("dd/MM/yyyy"),Code="Ouro",Description="ourogrosso",Group="ct01",Value=34.90,Unit="Unidade",Day=false,Month=true,Year=false,Vat=false},
newBusinessConfiguration(){Id=8,Date=DateTime.Now.ToString("dd/MM/yyyy"),Code="Ouro",Description="ourofino",Group="ct01",Value=34.32,Unit="Euro",Day=false,Month=false,Year=true,Vat=false},
newBusinessConfiguration(){Id=9,Date=DateTime.Now.ToString("dd/MM/yyyy"),Code="Ouro",Description="ourogrosso",Group="ct01",Value=34.90,Unit="Euro",Day=false,Month=true,Year=false,Vat=false},
newBusinessConfiguration(){Id=10,Date=DateTime.Now.ToString("dd/MM/yyyy"),Code="Prata",Description="Prata950",Group="ct03",Value=0.39,Unit="Unidade",Day=true,Month=false,Year=false,Vat=true},
newBusinessConfiguration(){Id=11,Date=DateTime.Now.ToString("dd/MM/yyyy"),Code="Prata",Description="Prata925",Group="ct03",Value=0.37,Unit="Euro",Day=true,Month=false,Year=false,Vat=false},
   };
DropDownConfiguration[]dropdown=newDropDownConfiguration[]
{
newDropDownConfiguration(){Value="one",Text="one"},
newDropDownConfiguration(){Value="two",Text="one"},
newDropDownConfiguration(){Value="three",Text="one"},
newDropDownConfiguration(){Value="test",Text="test"},
};
ViewBag.dropdown=dropdown;

ViewBag.dataSource=results;

returnView();

}
}
}

model:
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
 
namespaceMainHub.Projects.CCP.WebSite.Site.Models.Configurations
{
publicclassDropDownConfiguration
{
publicstringText{get;set;}
publicstringValue{get;set;}
}
}



Attachment: ticket_83d35fea.rar


5 Replies
HJ Hariharan J V Syncfusion Team August 1, 2018 01:01 PM UTC

Hi Carlos, 
Thanks for contacting Syncfusion support. 

We have validated your query and the provided code example. In your sample, you are tried to bind the dropdown data with dataSource property of columns in grid. So that it display the request failed message instead off displaying data. As per your requirement, we have created a sample for your reference. In the below sample, we have bind the custom dataSource for the dropdown and assigned the value using the editParams property. 

Kindly refer to the below code example and sample for more information.    

<div> 
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").Add(); 
    col.Field("ShipName").HeaderText("ShipName").Width("150").EditType("dropdownedit").Edit(new { @params = new { value = "one", fields = new { text = "ShipName", value = "ShipName" }, dataSource = @ViewBag.dropdown } }).Add(); 
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
 
</div> 

  public ActionResult Index() 
        { 
            var Order = OrdersDetails.GetAllRecords(); 
            ViewBag.DataSource = Order; 
            ViewBag.dropdown = data.GetAllRecords(); 
            return View(); 
        } 
 
        public class data                                    //Creating datasource for dropdownedit  
    {  
        public static List<data> ship = new List<data>();  
        public data()  
        {  
  
        }  
        public data(string ShipName)  
        {  
            this.ShipName = ShipName;  
        }  
        public static List<data> GetAllRecords()  
        {  
            if (ship.Count() == 0)  
            {  
  
                ship.Add(new data("ALFKI"));  
                ship.Add(new data("ANATR"));  
                ship.Add(new data("ANTON"));  
                ship.Add(new data("BLONP"));  
                ship.Add(new data( "BOLID"));  
  
            }  
            return ship;  
        }  
  
        public string ShipName { get; set; }  
    } 



Regards,
Hariharan  


CA Carlos August 2, 2018 02:14 PM UTC

Hi, 
Update: I'm now creating the complete grid in c# and passing the htmlstring in a view .
your solution did not fix the problem, Altought now it shows the correct number of spaces they are all blank.
While inspecting I get the error:

ej2.min.js:10 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined
    at ej2.min.js:10
    at e.get (ej2.min.js:10)
    at e.onFocus (ej2.min.js:10)
(anonymous) @ ej2.min.js:10
e.get @ ej2.min.js:10
e.onFocus @ ej2.min.js:10

I can see the json created in html with the correct data.

Controller

namespace MainHub.Projects.CCP.WebSite.Site.Controllers
{
    public class ConfigurationController : Controller
    {
        private TextWriter writer;
        private HttpContextBase context;
 
        // GET: Configuration
        public ActionResult Index()
        {
 
 
            return View();
        }
public ViewResult Configuration()
       {
           List<BusinessConfiguration> dataSource = new List<BusinessConfiguration>()
            {
                new BusinessConfiguration() {Id=1 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Ouro", Description ="ouro fino", Group="ct01",Value= 34.32, Unit= "Euro", Day=true, Month=false, Year=false, Vat=false},
                new BusinessConfiguration() {Id=2 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Platina", Description ="platina 1", Group="ct02",Value= 21.01, Unit= "Unidade", Day=true, Month=false, Year=false, Vat=false},
                new BusinessConfiguration() {Id=3 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Prata", Description ="Prata 1000", Group="ct03",Value= 0.40, Unit= "Percentagem", Day=false, Month=true, Year=false, Vat=true},
                new BusinessConfiguration() {Id=4 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Paládio", Description ="paládio", Group="ct04",Value= 22.8, Unit= "Percentagem", Day=false, Month=false, Year=true, Vat=false},
                new BusinessConfiguration() {Id=5 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Platina", Description ="platina 3", Group="ct02",Value= 20.2, Unit= "Unidade", Day=false, Month=true, Year=false, Vat=false},
                new BusinessConfiguration() {Id=6 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Platina", Description ="platina 2", Group="ct02",Value= 20.42, Unit= "Percentagem", Day=false, Month=false, Year=true, Vat=false},
                new BusinessConfiguration() {Id=7 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Ouro", Description ="ouro grosso", Group="ct01",Value= 34.90, Unit= "Unidade", Day=false, Month=true, Year=false, Vat=false},
                new BusinessConfiguration() {Id=8 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Ouro", Description ="ouro fino", Group="ct01",Value= 34.32, Unit= "Euro", Day=false, Month=false, Year=true, Vat=false},
                new BusinessConfiguration() {Id=9 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Ouro", Description ="ouro grosso", Group="ct01",Value= 34.90, Unit= "Euro", Day=false, Month=true, Year=false, Vat=false},
                new BusinessConfiguration() {Id=10, Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Prata", Description ="Prata 950", Group="ct03",Value= 0.39, Unit= "Unidade", Day=true, Month=false, Year=false, Vat=true},
                new BusinessConfiguration() {Id=11, Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Prata", Description ="Prata 925", Group="ct03",Value= 0.37, Unit= "Euro", Day=true, Month=false, Year=false, Vat=false},
            };
 
           ViewBag.GridNegocios = Gridname(dataSource);
 
 
           return View();
       }

public HtmlString Gridname(List<BusinessConfiguration> dataSource)
     {
         object regex = new { required = true };
         ViewBag.dropdown = DropDownData.GetAllRecords();
 
        // DropDownConfiguration[]dropdown=new DropDownConfiguration[]
        // {
        //  new DropDownConfiguration(){Value="one",Text="one"},
        //  new DropDownConfiguration(){Value="two",Text="one"},
        //  new DropDownConfiguration(){Value="three",Text="one"},
        //  new DropDownConfiguration(){Value="test",Text="test"},
        // };
                     
         List<GridColumn> lstColumns = new List<GridColumn>()
            {
 
                new GridColumn() { Field="Id", HeaderText="Id", IsPrimaryKey=true, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, Visible=false},
                new GridColumn() { Field="Date", HeaderText="Data", EditType="daterpickeredit", ValidationRules=regex,  TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, Width="150"},
                new GridColumn() { Field="Code", HeaderText="Código",ValidationRules=regex, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Left, Width="70"},
                new GridColumn() { Field="Description", HeaderText="Descrição",ValidationRules=regex, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Left, Width="150"},
                new GridColumn() { Field="Group", HeaderText="Grupo",ValidationRules=regex, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Left, Width="60"},
                new GridColumn() { Field="Value", HeaderText="Valor",ValidationRules=regex, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, Width="60"},
                new GridColumn() { Field="Unit", HeaderText="Unidade",EditType="dropdownedit", Edit= (new { @params = new { value = "one", fields = new { text = "ShipName", value = "ShipName" }, dataSource = @ViewBag.dropdown } }), TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, Width="70"},
                new GridColumn() { Field="Day", HeaderText="Dia", EditType="booleanedit", DisplayAsCheckBox=true,  Width="50"},
                new GridColumn() { Field="Month", HeaderText="Mês", EditType="booleanedit", DisplayAsCheckBox=true, Width="50"},
                new GridColumn() { Field="Year", HeaderText="Ano", EditType="booleanedit", DisplayAsCheckBox=true, Width="50"},
                new GridColumn() { Field="Vat", HeaderText="Iva", EditType="booleanedit", DisplayAsCheckBox=true,  Width="50"},
   
 
            };
         
 
 
         Common.Toolbar bar = new Common.Toolbar()
         {
             Add = true,
             Edit = true,
             Delete = true,
             Update = true,
             Cancel = true,
             ExcelExport = true,
             Click = "toolbarClick",
         };
Common.GridFactory builder = new Common.GridFactory()
        {
            ID = "negocios",
            DataSource = dataSource,
 
            AllowExportExcel = true,
 
            AllowPagging = true,
            AllowFiltering = true,
            AllowSorting = true,
            AllowGrouping = true,
 
            PageSize = 5,
 
            AllowEditing = true,
            AllowAdding = true,
            AllowDeleting = true,
 
            ShowConfirmDialog = true,
            ShowDeleteConfirmDialog = true,
 
            Columns = lstColumns,
            Toolbar = bar,
        };
 
 
 
        return builder.Render();
    }
}

View:


Models















Attachment: ticket_b522e11e.rar

HJ Hariharan J V Syncfusion Team August 3, 2018 12:40 PM UTC

Hi Carlos, 

Thanks for contacting Syncfusion support. 

Query :  Altought now it shows the correct number of spaces they are all blank 
 
We have validated query and the provided code example. In your sample you are using “Unit” as a column field for Grid and specify the “ShipName” as a field name for dropdown so that it displayed dropdown with blank values. So we suggest you to use the same field name for both grid column and dropdown might resolve your problem. Because we are bind the dropdown key values based on the column field of Grid.  

Kindly refer to the below code example and for more information. 

Actual 
Expected 
new GridColumn() { Field="Unit", HeaderText="Unidade",EditType="dropdownedit", Edit= (new { @params = new { value = "one", fields = new { text = "ShipName", value = "ShipName" }, dataSource = @ViewBag.dropdown } }), TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, Width="70"}, 
<div> 
    @Html.EJS().Grid("Grid"). 
DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
{ 
    col.Field("ShipName").HeaderText("ShipName").Width("150").EditType("dropdownedit").Edit(new { @params = new { value = "one", fields = new { text = "ShipName", value = "ShipName" }, dataSource = @ViewBag.dropdown } }).Add(); 
})  
</div> 

Please get back to us if you need further assistance from us. 

Query 2: ej2.min.js:10 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined 

We have checked the reported problem, unfortunately we are not able to reproduce the reported problem. Could you please provide more information or below details it will be more helpful for us to provide a better solution as soon as possible. 

  1. Did you face the issue at initial rendering of Grid or when performed any grid actions.
  2. Share the grid package version and browser details.

Regards,
Hariharan 


CA Carlos August 7, 2018 10:59 AM UTC

I did as you told, and it did not fix the problem.
Im unhable to recreate the typeError as well so its probably fixed,
The version is:

The browser details are: 

and the actual code is:
public ViewResult Configuration()
       {
           List<BusinessConfiguration> dataSource = new List<BusinessConfiguration>()
            {
                new BusinessConfiguration() {Id=1 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Ouro", Description ="ouro fino", Group="ct01",Value= 34.32, Unit= "Euro", Day=true, Month=false, Year=false, Vat=false},
                new BusinessConfiguration() {Id=2 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Platina", Description ="platina 1", Group="ct02",Value= 21.01, Unit= "Unidade", Day=true, Month=false, Year=false, Vat=false},
                new BusinessConfiguration() {Id=3 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Prata", Description ="Prata 1000", Group="ct03",Value= 0.40, Unit= "Percentagem", Day=false, Month=true, Year=false, Vat=true},
                new BusinessConfiguration() {Id=4 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Paládio", Description ="paládio", Group="ct04",Value= 22.8, Unit= "Percentagem", Day=false, Month=false, Year=true, Vat=false},
                new BusinessConfiguration() {Id=5 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Platina", Description ="platina 3", Group="ct02",Value= 20.2, Unit= "Unidade", Day=false, Month=true, Year=false, Vat=false},
                new BusinessConfiguration() {Id=6 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Platina", Description ="platina 2", Group="ct02",Value= 20.42, Unit= "Percentagem", Day=false, Month=false, Year=true, Vat=false},
                new BusinessConfiguration() {Id=7 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Ouro", Description ="ouro grosso", Group="ct01",Value= 34.90, Unit= "Unidade", Day=false, Month=true, Year=false, Vat=false},
                new BusinessConfiguration() {Id=8 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Ouro", Description ="ouro fino", Group="ct01",Value= 34.32, Unit= "Euro", Day=false, Month=false, Year=true, Vat=false},
                new BusinessConfiguration() {Id=9 , Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Ouro", Description ="ouro grosso", Group="ct01",Value= 34.90, Unit= "Euro", Day=false, Month=true, Year=false, Vat=false},
                new BusinessConfiguration() {Id=10, Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Prata", Description ="Prata 950", Group="ct03",Value= 0.39, Unit= "Unidade", Day=true, Month=false, Year=false, Vat=true},
                new BusinessConfiguration() {Id=11, Date = DateTime.Now.ToString("dd/MM/yyyy"), Code ="Prata", Description ="Prata 925", Group="ct03",Value= 0.37, Unit= "Euro", Day=true, Month=false, Year=false, Vat=false},
            };
 
           ViewBag.GridNegocios = Gridname(dataSource);
 
 
           return View();
       }

HJ Hariharan J V Syncfusion Team August 31, 2018 05:30 AM UTC

Hi Carlos, 
 
We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.   
 
 
Regards, 
Hariharan 


Loader.
Up arrow icon