Grid dropdown edit datasource change

[Lucian Calin]

Hi,

I am trying to set a grid dropdown edit datasource based on user selection, but the parameter sent to the controller is always null. Can you help?

Code:

  <ejs-dropdownlist id="iWDepoClientID" dataSource="@ViewBag.Client" placeholder="Client" floatLabelType="Always" popupHeight="300px" ejs-for="iWDepoClientID" change="clientChange" required>
  <e-dropdownlist-fields text="Text" value="ID"></e-dropdownlist-fields>
</ejs-dropdownlist>
@{
   var dataM = new Syncfusion.EJ2.DataManager()
   {
     Url = "/DocumentsIn/ProductDataSource",
     Adaptor = "UrlAdaptor"
   };
 }
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" actionBegin="actionBegin" actionComplete="actionComplete" allowFiltering="true" allowSorting="true" allowPaging="false" allowExcelExport="true" allowPdfExport="true" toolbarClick="toolbarClick"
          toolbar="@(new List<string>() { "Add", "Edit", "Cancel", "Update", "ExcelExport", "PdfExport", "CsvExport" })">
    <e-data-manager adaptor="UrlAdaptor" url="@Url.Action("UrlDatasourceSub", "DocumentsIn")" insertUrl="/DocumentsIn/InsertSub" updateUrl="/DocumentsIn/UpdateSub" removeUrl="/DocumentsIn/RemoveSub"></e-data-manager>
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
    <e-grid-loadingIndicator indicatorType="Spinner"></e-grid-loadingIndicator>
    <e-grid-filtersettings type="CheckBox"></e-grid-filtersettings>
    <e-grid-columns>
        <e-grid-column field="aWDocSubID" headerText="ID" type="number" visible="false" width="25" isPrimaryKey="true"></e-grid-column>
        <e-grid-column field="iWDocID" headerText="iWDocID" type="number" visible="false" foreignKeyField="ID" foreignKeyValue="Text" dataSource="ViewBag.iWDocID" textAlign="Left" width="120"></e-grid-column>
        <e-grid-column field="iWDocSubProdID" headerText="Produs" type="number" AllowSearching=true allowfiltering="true" foreignKeyField="ID" foreignKeyValue="Text" dataSource="dataM" textAlign="Left" width="120"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
function clientChange(args) {
            var partnerid = args.itemData['ID'];
            var gridObj = document.getElementById("Grid").ej2_instances[0];
            var data = new ej.data.DataManager({
                url: '@Url.Action("DocumentsIn", "ProductDataSource")',
                adaptor: new ej.data.UrlAdaptor
            });
            gridObj.columns[2].dataSource = data;
            gridObj.columns[2].edit.params.query.params = [];
            gridObj.columns[2].edit.params.query = new ej.data.Query().addParams("extraParams", partnerid);
        };
</script>

Controller

public class ExtendDataManager : DataManagerRequest
{
  public int extraParams { get; set; }
}

...
public async Task<IActionResult> ProductDataSource([FromBody]ExtendDataManager dm)
{
    if (dm.extraParams == null)

[Hemanthkumar S]

Hi Lucian Calin,

Greetings from Syncfusion support.

Query: I am trying to set a grid dropdown edit datasource based on user selection, but the parameter sent to the controller is always null.

Based on the information you provided, it seems that you want to send an additional parameter to the server to set a grid dropdown edit dataSource based on user selection. To achieve this requirement, we recommend sending the additional parameter using the query property of the Grid.

For more information, please refer to the below code example, video, and sample.

[Sample\EJ2Grid\Views\Home\Index.cshtml]

 

<button id="cc">Client Change</button>

@{

    var dataM = new Syncfusion.EJ2.DataManager()

            {

                Url = "/Home/ProductDataSource",

                Adaptor = "UrlAdaptor"

            };

}

<ejs-grid id="Grid" allowPaging="true" allowSorting="true" toolbar="@(new List<string>() { "Add", "Edit", "Cancel", "Update" })">

 

<e-grid-column field="SupplierId" headerText="Supplier ID" width="135" dataSource="dataM" foreignKeyField="Id" foreignKeyValue="Name"></e-grid-column>

 

<script>

    var cc = document.getElementById('cc');

 

    function clientChange(args) {

        var gridObj = document.getElementById("Grid").ej2_instances[0];

        gridObj.query = new ej.data.Query().addParams("extraParams", "99");

    };

 

    cc.addEventListener('click', clientChange);

</script>

Please feel free to contact us if you require any further assistance. We are always available and eager to help you in any way we can.

Regards,

Hemanth Kumar S

Attachment: video_and_sample_641db167.zip