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.
{ field: "Country_Code", headerText: "Country", dataSource: [{"Country_Code": "CA"}], width: 75, editType: ej.Grid.EditingType.Dropdown, textAlign: ej.TextAlign.Left c},
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
}
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
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
|
<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;
} |
