Grid dropdown edit different options for each row

[Kim MCleonell]

Hello,

I have a grid with some columns, one of which has a dropdown edit with some options, it also uses the foreign key and value fields.

I want to dynamically populate the dropdown list with a url-datasource for each row with a query parameter. I can do this with the edit create event but that changes the datasource for that column on every row. Even then the problem with that is that the grid column cannot resolve the foreign value field as the column doesn't have a data source until I open edit mode.

The main question here is, can you set a datasource with a parameter for each row of a grid?

Kind regards.

PS: here are the relevant parts of my code: 

HTML:

    <ejs-grid id="Grid" load="load" beginEdit="beginEdit" actionComplete="refreshWhenSaved" detailTemplate="#detailtemplate" allowExcelExport="true" allowPaging="true" allowMultiSorting="true" allowSorting="true" allowFiltering="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"ExcelExport","Search", "Update", "Cancel" })">

        <e-grid-filterSettings type="CheckBox"></e-grid-filterSettings>

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

        <e-grid-editSettings allowEditing="true" mode="Normal"></e-grid-editSettings>

        <e-data-manager url="@Url.Action("DataSource", "Manage", new { area = "Action" })" updateUrl="@Url.Action("Update", "Manage", new { area = "Action" })" adaptor="UrlAdaptor"></e-data-manager>

        <e-grid-columns>

            <e-grid-column field="assigneeId" headerText="Assignee" foreignKeyField="id" foreignKeyValue="getFullName"  editType="dropdownedit" width="50"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

JS:

function load(args) {

        var data = new ej.data.DataManager({

            url: '@Url.Action("PossibleAssigneeDataSource", "Manage", new { area = "Action" })',

            adaptor: new ej.data.UrlAdaptor

        });

        this.columns[0].dataSource = data;

        this.columns[0].edit = {

            create: function (args) {

                id = args.data.id;

                if (id != null) {

                    this.params.query = new ej.data.Query().addParams('UserActionId', id);

                    return document.createElement('input');

                }

            }

        }

    }

[Manivel Sellamuthu]

Hi Kim, 

Thanks for contacting us. 

Yes. You can achieve your requirement by sending addParams for each request while editing. Please find the below code example and sample for more information. 

Index.cshtml 

@{ 

    ViewData["Title"] = "Home Page"; 

} 

@{ 

    var dataM = new Syncfusion.EJ2.DataManager() 

    { 

        Url = "/Home/UrlDataSource1", 

        Adaptor = "UrlAdaptor" 

    }; 

} 

 

 

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

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string"  width="120" foreignKeyValue='Country' dataSource="dataM"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType='dropdownedit'></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    function actionBegin(args) { 

        if (args.requestType === 'add' || args.requestType === 'beginEdit') { 

            this.columns[1].edit.params.query.params = []; 

            this.columns[1].edit.params.query.addParams('extraParams', args.rowData.OrderID);  //adding params for each row through editparams of the dropdownlist 

        } 

    } 

</script> 

Controller 

public IActionResult UrlDatasource1([FromBody]ExtendDataManager dm) 

        { 

            var param = dm.extraParams; 

            // here you can get the params for each row while editing 

        . . . 

        } 

Sample: https://www.syncfusion.com/downloads/support/forum/146940/ze/146940-UrlAdaptor-CRUD-NormatEdit_-addparams-foreignkey1166032781 

Please get back to us, if you need further assistance. 

 

Regards, 

Manivel 

[Kim MCleonell]

Hello,

Thanks for your response, this covers part of what I'm looking for.
There are 2 more problems that I encounter with this setup.

1) If you open the page, the grid won't query the data source on load so id's cannot be resolved to the associated name.
2) Everytime you edit a cell it will load the data source associated with that row for the whole column, so id's that are not in one row's data source but are in the other will not be resolved to the associated name.

Effectively speaking, what I want is a different data source on each row (not for the whole column) on loading of the row.

Thanks in advance!

Kind regards.

[Manivel Sellamuthu]

Hi Kim, 

Thanks for your update. 

Query:  If you open the page, the grid won't query the data source on load so id's cannot be resolved to the associated name. 

 

Yes. The grid will not query for each row or each cell. It will once query the dataSource once and take the records as per the current view data. 

Query: Everytime you edit a cell it will load the data source associated with that row for the whole column, so id's that are not in one row's data source but are in the other will not be resolved to the associated name. 

 

Before proceeding this query, could you please confirm that whether do you want to display the different dataSource for particular cell in each row while initial rendering itself or you want to use customized data while editing only. 

Please get back to us, with the above details that will help us to provide the better solution as soon as possible. 

Regards, 

Manivel 

[Kim MCleonell]

Hello,

I want to achieve 2 things:
1) Load the cells data from a custom data source (which will be different for each row).on initial rendering.
2) Keep that same data source (different for each row) as edit data source.

Regards,
Kim

[Manivel Sellamuthu]

Hi Kim, 

Thanks for your update. 

By default we will use a single dataSource which consists array of Objects, based on that it value will map by the column filed name and display values in grid cells . If we use different dataSource for each cell, it leading some  performance related issues (because the number cell rendered based on your column and its rows . i.e., columns * rows ) . So please  explain about your exact requirement and why you want to bind the cell value from its different dataSource (Also you need to bind cell data from local or remote).  which will help us to provide a better solution as soon as possible. 

Note :If you want to just display the customized values in the UI level you can use valueAccessor to achieve your requirement. Please find the below  code example for your more information. 

Index.cshtml 

@{ 

    ViewData["Title"] = "Home Page"; 

} 

@{ 

. . . 

    Object ShipCountryvalueAccess; 

    ShipCountryvalueAccess = "ShipCountryvalueAccessFn"; 

} 

 

 

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

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager> 

. . . 

        <e-grid-column field="ShipCountry" headerText="Ship Country" valueAccessor="ShipCountryvalueAccess" width="150" editType='dropdownedit'></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

 

    function ShipCountryvalueAccessFn(field, data, column) { 

        // based on the data and field you can customize and display the values. 

        return data[field]; 

    } 

</script> 

Regards, 

Manivel