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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid dropdown edit different options for each row

Thread ID:

Created:

Updated:

Platform:

Replies:

146940 Aug 26,2019 01:29 PM UTC Sep 3,2019 02:52 PM UTC ASP.NET Core - EJ 2 5
loading
Tags: DataGrid
Kim MCleonell
Asked On August 26, 2019 01:29 PM UTC

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 [Syncfusion]
Replied On August 29, 2019 07:08 AM UTC

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 
        . . . 
        } 


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


Kim MCleonell
Replied On August 29, 2019 08:15 AM UTC

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 [Syncfusion]
Replied On August 30, 2019 11:22 AM UTC

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
Replied On August 30, 2019 12:11 PM UTC

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 [Syncfusion]
Replied On September 3, 2019 02:52 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon