Custom parameters in UrlAdapter

[George Koukoudis]

I have a grid bound to an UrlAdaptor in an Razor page

I need to send 2 extra parameters to my controller. Currency and Transactor 

These 2 parameters are input elements in my page

Every time the user selects a new value for these input fields I need to refresh the grids data calling my controller with the updated values

From what i read in forum I have to do something like the following

My Controller 

 [HttpPost("GetTrTransTest")]

        public async Task<IActionResult> GetTrTransTest([FromBody] ExtendedDataManagerRequest dm)

        {

            IQueryable<TransactorTransaction> transactionsList = _context.TransactorTransactions;

            var dbTrans = transactionsList.ProjectTo<TransactorTransListDto>(_mapper.ConfigurationProvider);

            IEnumerable resultList = await dbTrans.ToListAsync();

            var resultCount = resultList.Cast<TransactorTransListDto>().Count();

            return dm.RequiresCounts ? Ok(new { result = resultList, count = resultCount }) : Ok(new{ result = resultList });

        }

My custom DataManagerRequest derived class

 public class ExtendedDataManagerRequest : DataManagerRequest

    {

      

        [JsonProperty(PropertyName = "transactorId", Required = Required.Default)]

        public int? TransactorId { get; set; }

        [JsonProperty(PropertyName = "displayCurrencyId", Required = Required.Default)]

        public int? DisplayCurrencyId { get; set; }

    }

my grid definition

<ejs-grid id="Grid" query="new ej.data.Query().addParams('transactorId', getTransactorId()).addParams('displayCurrencyId', getSelectedCurrencyId())" 

                      allowPaging="true" allowResizing="true" allowSorting="true" enablePersistence="true">

                  <e-data-manager url="@Url.Action("GetTrTransTest", "FinancialData")" adaptor="UrlAdaptor"></e-data-manager> 

                                <e-grid-pagesettings pageSizes="true"></e-grid-pagesettings>

                ......

  </ejs-grid>

How can I pass the new values to my controller and refresh the grids data every time the users selects a new transactor or currency

 

[Rajapandi Ravi]

Hi George, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to pass the input field values to the controller. Based on your query we have prepared a sample and we suggest you to follow the below way to achieve your requirement. Please refer the below code example, sample and screenshot for more information. 

 

 

<input type="text" id="fieldone" name="fname"> 

<input type="text" id="fieldtwo" name="lname"> 

<button onclick="myFunction()">Select</button> 

 

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

    <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-columns> 

</ejs-grid> 

<script> 

    function myFunction() { 

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

        grid.query = new ej.data.Query().addParams('transactor', parseInt(document.getElementById('fieldone').value)).addParams('currency', parseInt(document.getElementById('fieldtwo').value));  //set your additional parameters value to the Grid query it will pass the values to the controller. Based on that value you can return the result it will refresh the Grid. 

    } 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/156373/ze/156373559665561.zip 

Screenshot: 

 

Regards, 

Rajapandi R