Add external dropdown value to every grid request

[Unknown]

Hello

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

I am struggling to add an external parameter to a grid using the Url Adaptor.

When a value from a dropdown list is selected, the grid should reload all data and send the selected value along with the request.

In addition, for every CRUD action the selected value must be sent as well.

In the "Change" event of the dropdown I add the value to the grid's query.

...

var grid = document.getElementById("myGridId").ej2_instances[0];

grid.query = new ej.data.Query().addParams('myParam', 'myValue');

grid.refresh();

...

On the server side I am not sure how to retrieve the parameter. In the DataManager class I do not see the parameter.

Could you please provide an example on how to add a custom parameter to all the grid's CRUD operations (using Url Adaptor)?

Thank you for your help.

Kind regards

Phil

[Pavithra Subramaniyam]

Hi Phil, 

You can achieve your requirement by settings the gridObj.query property in the change event of DropDownList Component. The passed parameter can be retrieved by defining parameter in the DataManager class of the controller.  You can pass the parameter for the server CRUD operations by passing the DropDownList value in the ActionBegin event of the Grid component. We have prepared a simple sample based on your requirement. Please refer to the below code example and sample link. 

[index.html] 

<div class='control-wrapper'> 

        <ejs-dropdownlist id="id" dataSource="@ViewBag.data" value ="1" change="onChange" placeholder="Select an ID" popupHeight="220px"> 

        </ejs-dropdownlist> 

     

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

        <e-datamanager url="/Home/UrlDataSource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete" adaptor="UrlAdaptor"></e-datamanager> 

        <e-grid-columns> 

          .   .   . 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script type="text/javascript"> 

     

    function onChange(args) {  

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

        grid.query = new ej.data.Query().addParams('id', parseInt(args.value)); 

        grid.refresh(); 

    } 

 

    function begin(e) {  

        if (e.requestType == 'save') { 

            var ddl = document.querySelector('#id').ej2_instances[0]; 

            e.data.dataId = parseInt(ddl.value); 

        } 

         

    } 

     

</script> 

Documentation: https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=es5#query 

                              https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html#actionbegin  

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/url_additional_Params1612182519 

Regards, 

Pavithra S. 

[Unknown]

Thank you for your reply. I was able to partially implement my requirements.

When using the DataManager in the GetData query everything works fine.

When using the CRUDModel<"MyModelClass"> there are some issues with the "add, update, delete" events.

1. I needed to add a property to the "MyModelClass" in order to receive the parameter. Is there no way to add a property directly to the CRUDModel class instead of adding it to "MyModelClass"?
   
2. It does not work when deleting a record. When deleting, the CRUDModel's "value" property is null, therefore the parameter that I needed to add to "MyModelClass" is not available. How can I get the parameter when deleting a record?
   

[Pavithra Subramaniyam]

Hi Phill, 

You can pass the additional parameters to the controller CrudModel class by using custom adaptor of Essential JavaScript 2 Grid Component. To achieve your requirement you should extend the beforeSend method of the UrlAdaptor in your custom adaptor. Please refer to the below code example  and sample link. 

[index.chtml] 

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

      .    .   . 

    </ejs-grid> 

</div> 

 

<script type="text/javascript"> 

    function created() { 

        var ddl = document.querySelector('#id').ej2_instances[0]; 

         // extending the default UrlAdaptor 

        class CustomAdaptor extends ej.data.UrlAdaptor { 

            beforeSend(dataManager, request, ajaxSettings) {  //triggers before sending the request 

                var action = JSON.parse(ajaxSettings.data).action; 

 

                // check for CRUD Operation 

 

                if (action == 'update' || action == 'remove' || action == 'insert') { 

                    var dataStrng = ajaxSettings.data; 

                    dataStrng = dataStrng.slice(0, -1); 

                    // you can get the `Params` in CRUDModel class by defining Params in that class 

                    dataStrng = dataStrng + ',"Params":' + parseInt(ddl.value) + '}'; 

                    ajaxSettings.data = dataStrng; 

                    ajaxSettings.options.data = dataStrng; 

                } 

            } 

        } 

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

        grid.dataSource = new ej.data.DataManager({ 

            url: "/Home/UrlDataSource", 

            insertUrl: "/Home/Insert", 

            updateUrl: "/Home/Update", 

            removeUrl:"/Home/CellEditDelete",  

            adaptor: new CustomAdaptor() 

        });   

        grid.query = new ej.data.Query().addParams('id', parseInt(ddl.value)); 

        grid.refresh();         

         

    } 

    

     

</script> 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/CRUD_custom_parameter-88265408  

Regards, 

Pavithra S. 

[Unknown]

Thank you so much for your answer.

I was able to pass the value at every grid request and everything works great.

There is one more thing, the javascript you provided seems to be ECMAScript 6. Could you provide the same code written in ECMAScript 5?

However, if this causes too much trouble, then it is ok to just close this thread.

[Pavithra Subramaniyam]

Hi Phil, 

  

Thanks for your update. We are happy to hear that the provided solution helped you. 

  

Based on your query We have prepared a sample in which we have extending the 'beforeSend' method of UrlAdaptor in ECMAScript 5. Please refer to the code example and sample link. 

 

[index.chtml] 

 

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

         .      .     .

    </ejs-grid>

</div>

<script type="text/javascript">

    function created() {

        var ddl = document.querySelector('#id').ej2_instances[0];

    function CustomAdaptor() {

      ej.data.UrlAdaptor.call(this);

    }

    CustomAdaptor.prototype = Object.create(ej.data.UrlAdaptor.prototype);

    CustomAdaptor.prototype.constructor = CustomAdaptor;

    CustomAdaptor.parent = ej.data.UrlAdaptor.prototype;

    CustomAdaptor.prototype.beforeSend = function (dataManager, request, ajaxSettings) {

      var action = JSON.parse(ajaxSettings.data).action;

      // check for CRUD Operation 

      if (action == 'update' || action == 'remove' || action == 'insert') {

        var dataStrng = ajaxSettings.data;

        dataStrng = dataStrng.slice(0, -1);

        // you can get the `Params` in CRUDModel class by defining Params in that class 

        dataStrng = dataStrng + ',"Params":1}';

        ajaxSettings.data = dataStrng;

        ajaxSettings.options.data = dataStrng;

      }

    };

    var customAdaptor = new CustomAdaptor();

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

        grid.dataSource = new ej.data.DataManager({

            url: "/Home/UrlDataSource",

            insertUrl: "/Home/Insert",

            updateUrl: "/Home/Update",

            removeUrl:"/Home/CellEditDelete", 

            adaptor: customAdaptor

        });     

       

        grid.query = new ej.data.Query().addParams('id', parseInt(ddl.value));

        grid.refresh();

        

        

    }

    .    .   .

    

</script>

 

  

Sample:  http://www.syncfusion.com/downloads/support/directtrac/general/ze/CRUD_custom_parameter-es51847726621 

  

Regards, 

Pavithra S. 

[Unknown]

Thank you very much for helping me with this issue.

I could implement all my requirements.

[Pavithra Subramaniyam]

Hi Phil, 

 

Thanks for your update. 

 

We are glad to hear that the provided information helped you.  

 

Please contact us if you have any queries. 

 

Regards, 

Pavithra S.