- Home
- Forum
- ASP.NET MVC - EJ 2
- How to disable an item from a foreign column in a Grid
How to disable an item from a foreign column in a Grid
Hi!

I need to disable items from the selection list of a foreign column. I did not found any example for this, can you help me with this?
In this screen, "Dirección de entrega" is the foreign column and for example... I need to disable the selection of the item with the index 0 and 2 (first and last)

Thanks, regards!
SIGN IN To post a reply.
3 Replies
1 reply marked as answer
VS
Vignesh Sivagnanam
Syncfusion Team
December 14, 2020 12:57 PM UTC
Hi Daniel
Greetings From Syncfusion support
Based on your query you need to disable dropdown list items in the foreignKey Column in the grid. To achieve your requirement we suggest you to add the external css to the items in the dropdown list in the open event.
Please refer the below Code example for your reference
Code Example:
|
@Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").InsertUrl("/Home/Insert").UpdateUrl("/Home/Update").RemoveUrl("/Home/Remove").Adaptor("UrlAdaptor"); }).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).ValidationRules(new { required = "true" }).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true", minLength = 3 }).Add();
col.Field("ShipCountry").ForeignKeyField("ShipCountry").ForeignKeyValue("ShipCountry").DataSource((IEnumerable<object>)ViewBag.dataSource).HeaderText("Ship Country").ValidationRules(new { required = "true" }).Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("150").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()
<script>
var elem;
var dObj;
var data1 = new ej.data.DataManager({
url: '/Home/UrlDatasourceDd1',
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true
});
function create(args) {
elem = document.createElement('input');
return elem;
}
function write(args) {
dObj = new ej.dropdowns.DropDownList({
dataSource: data1,
value: args.rowData[args.column.field],
fields: { text: 'ShipCountry', value: 'ShipCountry' }, placeholder: 'Ship Country',
open: function (e) {
this.popupObj.element.querySelectorAll(".e-list-item")[1].classList.add("e-hide")
this.popupObj.element.querySelectorAll(".e-list-item")[3].classList.add("e-hide")
},
});
dObj.appendTo(elem);
}
function destroy() {
dObj.destroy();
}
function read(args) {
return dObj.value;
}
</script>
<style>
.e-hide {
opacity: 0.7;
pointer-events: none;
}
</style>
|
Please refer the below sample and Documentation for your reference:
Regards,
Vignesh Sivagnanam
Marked as answer
DA
Daniel
December 14, 2020 10:06 PM UTC
Thanks, works fine with the example.
Regards!
VS
Vignesh Sivagnanam
Syncfusion Team
December 15, 2020 10:42 AM UTC
Hi Daniel
Thanks for the update.
we are happy to hear that your issue has been resolved.
Please get back to us if you need further assistance.
Regards,
Vignesh Sivagnanam
SIGN IN To post a reply.
- 3 Replies
- 2 Participants
- Marked answer
-
DA Daniel
- Dec 11, 2020 06:09 PM UTC
- Dec 15, 2020 10:42 AM UTC