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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

dropdown list in column is empty

Thread ID:

Created:

Updated:

Platform:

Replies:

117482 Oct 28,2014 09:34 PM UTC Sep 30,2016 12:46 PM UTC JavaScript 7
loading
Tags: ejGrid
Hoang Dang
Asked On October 28, 2014 09:34 PM UTC

I'm having problems getting the dropdown list to populate in a ejGrid column. The datasource is an odata url and the $select query works. I've even tried to manually set the column's datasource and it's still not working. Here's the js code for the column:

{
                    field: "Country_Code", headerText: "Country",
                    dataSource: [{"Country_Code": "CA"}],
                    width: 75,
                    editType: ej.Grid.EditingType.Dropdown,
                    textAlign: ej.TextAlign.Left
c},

Mohammed Farook J [Syncfusion]
Replied On October 29, 2014 12:34 PM UTC

Hi Hoang,

 

Thanks for using Syncfusion products.

 

We have analyzed your provided code and suspected that the binding of dataSource for “dropDown” is incorrect. We have created a sample for ‘’ejGrid with remote data binding and also bind dataSource to dropDown”. Please find the code snippet.

 

Please ensure to enable the edit option in grid.

 

  $(function () {

            var dataManger = ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/", offline: true}), data;

            var query = ej.Query().from("Orders").select("OrderID" ,"CustomerID").page(1, 10);

          

            var promise = dataManger.executeQuery(query);

            promise.done(function (e) {

                for (var i = 0; i < e.length; i++) {

                    var text = [];

                    test[i] = i;       //the datasource for drop down

                }

                   data = e.result;

                   $("#Grid").ejGrid({

                    dataSource: data,

                    allowPaging: true,

                    toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

 

                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true},

                    columns: [

                            { field: "OrderID", isPrimaryKey:true, headerText: 'Order ID', width: 90 },

                            { field: "CustomerID", headerText: 'Customer ID', width: 90, editType: ej.Grid.EditingType.Dropdown,dataSource:text}

                         

                    ]

                });

            });

            })

    

    </script>

 

For your convenience we have created a sample and the same can be downloaded from the link:

 

Sample:  DropDownEdit_dataSourcebind117482.zip

 

Please let us know if you have any queries.

Regards,

J.Mohammed Farook

 


Hoang Dang
Replied On October 29, 2014 04:27 PM UTC

Hi Mohammed,

I believe there's a typo with your example and it doesn't work. Text is undefined at the field's datasource since it's defined in the for loop scope. 

Hoang

Mohammed Farook J [Syncfusion]
Replied On October 30, 2014 09:47 AM UTC

Hi Hoang,

 

Sorry for the inconvenience caused.

 

We have modified the sample based on your requirement and the same can be downloaded from the below link.

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/oDataDropdownEdit2123487924.zip

 

When editType is set as dropDownEdit for a particular column then we must pass the data source to the column “dataSource” property in  value and text format as in the below code snippet.

 

<div id="Grid"></div>

    <script type="text/javascript">

 

        $(function () {

            var dataManger = ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/", offline: true}), data;

            var query = ej.Query().from("Orders").select("OrderID" ,"CustomerID").page(1, 10);

          

            var promise = dataManger.executeQuery(query);

            promise.done(function (e) {

                var text = [];

                for (var i = 0; i < e.result.length; i++) {

                    var obj = {};

                    obj.text = e.result[i].CustomerID;

                    obj.value = e.result[i].CustomerID;

                    text.push(obj);

                }

 

                data = e.result;

                $("#Grid").ejGrid({

                    dataSource: data, // to bind oData

                    allowPaging: true,

                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true},// enable editSettings

 

                    columns: [

                            { field: "OrderID", isPrimaryKey:true, headerText: 'Order ID', width: 90 },

                            { field: "CustomerID", headerText: 'Customer ID', width: 90, editType: ej.Grid.EditingType.Dropdown, dataSource: text }

                         

                    ]

                });

            });

            })

     </script>

 

While editing “text” in the dropdown datasource is displayed for the corresponding column.

Please try the above sample let us know if you have any queries.

Regards,

J.Mohammed Farook


Hoang Dang
Replied On October 30, 2014 03:02 PM UTC

Thanks Mohammed. This one works. 

Mohammed Farook J [Syncfusion]
Replied On October 31, 2014 11:07 AM UTC

Hi Hoang,

Thanks for your update.
 
please let us know if you have any queries.

Regards,
J.Mohammed Farook

SmurofNeves
Replied On September 29, 2016 01:23 PM UTC

Good day, 

I have a similar issue, but was wondering how do you achieve this using asp? 

Here is my grid code: 

<ej:Grid ID="Grid1" runat='server' CssClass="" DataSourceCachingMode="None" DataSourceID="SqlDataSource1" MinWidth="0" Visible="False" AllowPaging="True">
                <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel,save">
                </ToolbarSettings>
                <Columns>
                    <ej:Column AllowEditing="False" DataType="number" Field="EmployeeID" IsIdentity="True" IsPrimaryKey="True" Visible="False" ForeignKeyField="" ForeignKeyValue="">
                    </ej:Column>
                    <ej:Column DataType="number" Field="DepartmentID" Visible="False" ForeignKeyField="" ForeignKeyValue="">
                    </ej:Column>
                    <ej:Column DataType="number" Field="EmployeeTypeID" Visible="False" ForeignKeyField="" ForeignKeyValue="">
                    </ej:Column>
                    <ej:Column DataType="number" Field="InActiveFlag" Visible="False">
                    </ej:Column>
                    <ej:Column DataType="string" Field="FirstName" ForeignKeyField="" ForeignKeyValue="">
                    </ej:Column>
                    <ej:Column DataType="string" Field="LastName" ForeignKeyField="">
                    </ej:Column>
                    <ej:Column DataType="string" Field="Email" ForeignKeyField="">
                    </ej:Column>
                    <ej:Column DataType="string" Field="Department" EditType="Dropdown" ForeignKeyField="Department" ForeignKeyValue="DepartmentID">
                    </ej:Column>
                    <ej:Column DataType="string" Field="PhoneExt" ForeignKeyField="">
                    </ej:Column>
                    <ej:Column DataType="string" Field="EmployeeType" EditType="Dropdown" ForeignKeyField="EmployeeType" ForeignKeyValue="EmployeeTypeID">
                    </ej:Column>
                </Columns>
<PageSettings Template=""></PageSettings>

                <EditSettings AllowAdding="True" AllowDeleting="True" AllowEditing="True" />

<RowDropSettings DropTargetID="" DropMapper=""></RowDropSettings>

<SearchSettings></SearchSettings>

<ScrollSettings EnableTouchScroll="False"></ScrollSettings>
            </ej:Grid>

-----------------------------------------------------------------------------------------------------------------------------------------------------

I need to link the two dropdown fields with an sql data source? 

Please advise.

Regards.

Isuriya Rajan [Syncfusion]
Replied On September 30, 2016 12:46 PM UTC

Hi Hoang,   
   
While binding the foreign key column, you must note that whether two tables are having the common field.  while using the foreign key column, we need not to set editType as dropdown, by default it will set editType as dropdown. In the below code example, we have bound normal list for foreign key column.   
   
Please let us know whether you want to bind SQL data for foreign key value? Or else please share the code on how you have bound the SQL data for grid.   
 
<ej:Grid ID="FlatGrid" runat="server" AllowSorting="True"  AllowPaging="True"> 
             <Columns> 
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" /> 
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" /> 
                 <%--Foreign key column with drop down--%> 
             <ej:Column Field="EmployeeID" HeaderText="Employee Name" ForeignKeyField="EmployeeID" 
                    ForeignKeyValue="FirstName"  TextAlign="Left" Width="90" /> 
                    <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="75" Format="{0:C}" /> 
                <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="80" Format="{0:MM/dd/yyyy}" /> 
                <ej:Column Field="ShipName" HeaderText="Ship Name" EditType="Dropdown" Width="110" /> 
            </Columns> 
              <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> 
                    <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
                 
        </ej:Grid> 
   
Default.axps.cs 
 
        DataTable dt = new DataTable(); 
        List<Employee> employee = new List<Employee>(); //list for foreign key  
        List<Order> data = new List<Order>(); 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            GetGridData(dt); 
            FlatGrid.DataSource = data; 
 
        } 
        public void GetGridDT() 
        { 
            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ConnectionString); 
 
            SqlCommand cmd = new SqlCommand(); 
            cmd.Connection = con; 
            cmd.CommandText = "select * from Orders"; 
            cmd.CommandType = CommandType.Text; 
            SqlDataAdapter da = new SqlDataAdapter(); 
            da.SelectCommand = cmd; 
            da.Fill(dt); 
        } 
 
 
        public void GetGridData(DataTable dt) 
        { 
            GetGridDT(); 
            foreach (DataRow row in dt.Rows) 
            { 
                Order item = GetItem(row); 
                data.Add(item); 
            } 
 
            employee.Add(new Employee(1, "Michael")); 
            employee.Add(new Employee(2, "Anne")); 
            employee.Add(new Employee(3, "Janet")); 
            employee.Add(new Employee(4, "Andrew")); 
            employee.Add(new Employee(5, "Margaret")); 
            employee.Add(new Employee(6, "Nancy")); 
            employee.Add(new Employee(7, "Robert")); 
            employee.Add(new Employee(8, "Laura")); 
            employee.Add(new Employee(9, "Steven")); 
            employee.Add(new Employee(10, "James")); 
            employee.Add(new Employee(11, "Smith")); 
            employee.Add(new Employee(12, "Jhonson")); 
            employee.Add(new Employee(13, "George")); 
       //bind the foreign key column value 
              var index = this.FlatGrid.Columns.FindIndex(col => col.Field == "EmployeeID"); 
            this.FlatGrid.Columns.ElementAt(index).DataSource = employee; 
 
} 
 
 
Note: The General cause of issue “empty list shows the dropdown when using foreign”   
   
1.       DataSource is not returned correctly (DataSource is not collection)   
2.       If foreignkey id mismatch with parent DataSource   
   
While using foreignkey columns, make sure of the below:   
   
1.       foreignKey id must be placed in both the tables (parent & related table)   
2.       foreignKey must have a unique value   
   
   
Regards,   
Isuriya R   

 


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

;