1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Grid foreign key column drop down list add parameter to every request

Grid foreign key column drop down list add parameter to every request

Hello

I am using ASP.NET CORE EJ 2 version 16.1.0.37 (nuget package).

I use a grid that has a dropdown list as a foreign key column.
The data for the values of this column are bound remotely with the UrlAdapter.
Now I need to add a parameter from another dropdown list (not in the grid) to every request of the foreign key dropdown list.

I tried something like this, but the parameter never reaches the server.

function onLoad(args) {
          var data = new ej.data.DataManager({
                url: 'myUrl',
                adaptor: new ej.data.UrlAdaptor
            });

            this.getColumns()[7].dataSource = data;

               this.columns[7].edit = {
                create: function () {
                    
                    var ddl = document.querySelector('#myDDL').ej2_instances[0];
                    var id = ddl.value;
                    if (id != null) {
                        this.params.query = new ej.data.Query().addParams('Id', id);
                    }
                }
}

Could you please provide an example on how to achieve this?


Kind regards
Phil

9 Replies
PS Pavithra Subramaniyam Syncfusion Team May 15, 2018 12:53 PM UTC

Hi Phil, 
 
We have checked your query and you can pass the additional parameters in the column.edit.create() method. We have prepared a simple sample in which we have passes additional parameter (id) that is obtained from another DropDownList component. This parameter can be retrieved in every request to the server. Please refer to the below code example and sample link. 
 
[index.chtml] 
<div> 
    <ejs-dropdownlist id="id" dataSource="ViewBag.data" value="3" placeholder="Select an ID" popupHeight="220px"> 
    </ejs-dropdownlist> 
 
    <ejs-grid id="Grid" dataSource="ViewBag.datasource" load="load"  toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
            <e-grid-column field="EmployeeID" headerText="Empolyee Name" foreignKeyValue="FirstName" width="150"></e-grid-column> 
           .   .  . 
        </e-grid-columns> 
    </ejs-grid> 
 
</div> 
 
<script type="text/javascript"> 
 
    function load(args) { 
        var data = new ej.data.DataManager({ 
            url: '/Home/UrlDataSource', 
            adaptor: new ej.data.UrlAdaptor 
        }); 
       this.getColumns()[1].dataSource = data; 
        this.columns[1].edit = { 
            create: function () { 
                var ddl = document.querySelector('#id').ej2_instances[0]; 
                var id = ddl.value; 
                if (id != null) { 
                    this.params.query = new ej.data.Query().addParams('Id', id); 
                } 
                 countryElem = document.createElement('input'); 
                return countryElem; 
                
            } 
        } 
        } 
     
</script> 
 
[server] 
 
 
 
If we misunderstood your query could you please provide more information on your requirement that will be helpful for us to provide a better solution as early as possible. 
 
Regards, 
Pavithra S. 
 


UN Unknown May 16, 2018 02:46 PM UTC

Thanks for the reply, the parameter is now sent to the server when updating the cell.

However, there is another issue.

When the dropdown value changes, the grid is refreshed and the data that correspond to the dropdown value are loaded.
Thus, the possible values for the foreign key column change as well.
Now when I change the dropdown value and the grid loads the new data, the values in the foreignkey column are not displayed (when there are values to display). Once I edit one of these rows, the value is displayed correctly.
This means, when the grid refreshes, the values for the foreign key column have to be reloaded as well (and the dropdown value needs to be sent too).

I tried to achieve this by adding the parameter to the column in the "refresh" event of the grid

function onActionBegin(args) {
            if (args.requestType === "refresh") {
                    var grid = document.getElementById("myGridId").ej2_instances[0];
                    var col = grid.columns[7];
                    var ddl = document.querySelector('#myDDLId').ej2_instances[0];
                    if (ddl.value != null) {
                        col.query = new ej.data.Query().addParams('Id', ddl.value);
                    }
            }
}

Unfortunately the parameter is not available when the request reaches the server.

Can you please help me to achieve this?

PS Pavithra Subramaniyam Syncfusion Team May 17, 2018 12:56 PM UTC

Hi Phil, 

We have checked your query but we could not reproduce the issue at our end. We have prepared a simple sample in which we have changed the Grid dataSource based on the dropdown value and the foreign key column values are refreshed based on the new data. Please refer to the below sample link. 


Could you please share the below details that will be helpful for us to provide a better solution as early as possible. 

  1. Share you Grid sample code.
  2. Please reproduce the issue in the provided sample if possible.
  3. Share your server code sample for Grid and Foreign key column.
  4. Share issue reproducible sample if possible.

Regards, 
Pavithra S. 


UN Unknown May 17, 2018 03:35 PM UTC

Thank you for your reply.

I added todos (//TODO) in the sample you provided and put some code in comments to show what I mean.
Please find the sample attached to this post.

You added the parameter of the dropdown to the "/Home/GridDataSource" action. That is great, but only half of my requirement.
I need the parameter in the "/Home/UrlDataSource" action as well.
In your example all the employees are always returned, in my scenario the employees returned depend on the value that is selected in the dropdown value. In the sample you provided, only the employes with the corresponding "ReportsTo" property must be returned.

I hope this clears things up.
Please let me know if you need further information.

Attachment: gridcoreforeignkeyaddparam2_367c661b.zip

PS Pavithra Subramaniyam Syncfusion Team May 18, 2018 01:10 PM UTC

Hi Phil, 

We have considered ‘Adding query property to Grid columns’ as an improvement feature and logged a task for the same. This feature will be available in any of our upcoming release. 

Regards, 
Pavithra S. 


UN Unknown May 18, 2018 02:13 PM UTC

That's great news! However, it already works in the sample you provided...


After some more time, I was able to get it working with the sample you provided.

I needed to change the following things:


function load(args) {

...

//add the parameter for the initial load

this.getColumns()[1].query = new ej.data.Query().addParams('id', parseInt(id));

...

}


I needed to add the "ActionBegin" event of the grid to add the parameter when the grid refreshes once the dropdown is changed.

function onActionBegin(args) {

    if (args.requestType === "refresh") {

        var grid = document.querySelector('#Grid').ej2_instances[0];

        grid.getColumns()[1].query = new ej.data.Query().addParams('id', parseInt(document.querySelector('#id').ej2_instances[0].value));

    }

}


On the server side the parameter was received and I could use it to filter the employees.


As my (attached) sample shows, this works perfectly fine, so it seems that this feature is already implemented?


However, in my application this does not work at all.

I do the same things to add the parameter, but the server never receives it, it is always null. 

BUT when I add the parameter in the "create" function of the column, the server does receive it.


At first I thought that might be because your sample uses an older version of syncfusion (16.1.0.24) but even after upgrading it to the latest version (16.1.0.37) it still worked fine.

In my application my grid uses a custom UrlAdaptor but I guess this should not influence the column?


So now my requirement could be achieved in your sample, but in my application it does not work.


Do you have any ideo why this behavior could occur?


Attachment: gridcoreforeignkeyaddparam2_ec338426.zip

PS Pavithra Subramaniyam Syncfusion Team May 21, 2018 12:39 PM UTC

Hi Phil, 

We don’t provided the ‘Adding query property to Grid columns’ feature yet. We have customized the sample in source level to check the feasibility of the reported feature and it has been provided to you mistakenly. That is why the workaround is not working in your actual application. However we will implement the feature and it will be available in any of our upcoming release. 

Regards, 
Pavithra S 


UN Unknown May 22, 2018 06:28 AM UTC

I see. Thank you for implementing this.

Do you have any idea when it will be available? I really need this feature in my application.
Is there a workaround to achieve this until the feature will be implemented?

PS Pavithra Subramaniyam Syncfusion Team May 25, 2018 12:18 PM UTC

Hi Phil, 
We have created a support incident under your account and updated the response regarding your query. Please log on to our support website to check for better follow up on further updates. 
Regards, 
Pavithra S. 


Loader.
Up arrow icon