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!

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 


Loader.
Up arrow icon