EjsGrid EjsDataManager URL change via API at runtime

Hi,

Are we able to change the EjsGrid  EjsDataManager URL at runtime via the API?  

The razor page below has a EjsDropDownList so the users can change the store they would like to see the orders for. I capture the Change event and call onStoreChange which is when I want to change the EjsDataManager Url.

@page "/orders"

@using Newtonsoft.Json;

<div class="container">
    <div row>
        <div class="col-12 pt-3">
            <p class="h4">Supplier Orders</p>
        </div>
    </div>
    <div class="row pt-3">
        <div class="col-3">
            <EjsDropDownList ID="storeDropDown" PlaceHolder="Select a store" FilterBarPlaceholder="Search" Change="@onStoreChange">
                <EjsDataManager CrossDomain="true" Url="http://localhost:5000/api/v2/store?onlineordering=true" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager>
                <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
            </EjsDropDownList>
        </div>
        <div class="col-9 font-weight-bold">
        </div>
    </div>
    <div class="row pt-3">
        <div class="col-12">
            <EjsGrid ref="orderGrid" id="orderGrid" AllowSorting="true" AllowFiltering="true" AllowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
                <EjsDataManager ref="orderDataManager" CrossDomain="true" Url="http://localhost:5000/api/v2/order?storecode=1" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager>
                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
                <GridFilterSettings Type="@Syncfusion.EJ2.RazorComponents.Grids.FilterType.CheckBox"></GridFilterSettings>
                <GridPagesettings pageCount="5" PageSize="15"></GridPagesettings>
                <GridColumns>
                    <GridColumn Field="OrderLineId" HeaderText="Order Line Id" ISPrimaryKey="true" Width="30" validationRules="@(new { required= true, maxLength=6})"></GridColumn>
                    <GridColumn Field="StyleCode" HeaderText="Style Code" Width="40" validationRules="@(new { required= true, maxLength=40})"></GridColumn>
                    <GridColumn Field="ItemDescription" HeaderText="Name" Width="40"></GridColumn>
                </GridColumns>
            </EjsGrid>
        </div>
    </div>
</div>

@functions {
    EjsGrid orderGrid;
    EjsDataManager orderDataManager;

    string supplierCode { get; set; } = "";
    string storeCode { get; set; } = "3";
    string year { get; set; } = "2019";

    public class Year
    {
        public string Code { get; set; }
        public string Name { get; set; }
    }
    List<Year> years = new List<Year>()
    {
        new Year(){ Code= "2019", Name= "2019" },
        new Year(){ Code= "2020", Name= "2020" }
    };

    protected void onStoreChange(object args)
    {
        DropDownChangeArgs eventArgs = JsonConvert.DeserializeObject<DropDownChangeArgs>(args as string);
        storeCode = eventArgs.Value;
        LookupOrders();
    }

    protected void onYearChange(object args)
    {
        DropDownChangeArgs eventArgs = JsonConvert.DeserializeObject<DropDownChangeArgs>(args as string);
        year = eventArgs.Value;
        LookupOrders();
    }

    protected void onSupplierChange(object args)
    {
        //Deserialized the change event args using Newton soft.
        DropDownChangeArgs eventArgs = JsonConvert.DeserializeObject<DropDownChangeArgs>(args as string);
        supplierCode = eventArgs.Value;
        LookupOrders();
    }

    protected void LookupOrders()
    {
        string url = $"http://localhost:5000/api/v2/order?storecode={storeCode}";
        orderDataManager.Url = url;
        orderGrid.Refresh();
    }
}

Hi Chris,  

Thanks for contacting Syncfusion forums.  

Query: “Are we able to change the EjsGrid  EjsDataManager URL at runtime via the API?” 

 

No. You cannot directly modify the url of EjsDataManager during the runtime with API. But we can achieve your requirement by passing additionalParams to server. From your we understand that you need to modify the url during runtime to change the value of storecode in below url.  

Otherwise your url will remain same. So we suggest you to pass the value of storecode as additional parameters in the query. As an example we have sent the value of code to server in querystring url and based on code value we have return the pagesize. We have achieved the above request in button click Refer the below code example  

[index.razor] 

[default controller] 

Refer the below screenshot for the output 

For your convenience we have prepared a sample which can be downloaded from below link 

Sample: https://www.syncfusion.com/downloads/support/forum/145409/ze/WebAPI_Server-724379503  

Please get back to us if above solution does not match your requirement.  

Regards, 

Vignesh Natarajan. 

Please give a working version of this example. https://www.syncfusion.com/downloads/support/forum/145409/ze/WebAPI_Server-724379503

Hi Costa,  

Sorry for the inconvenience caused.   

Query: “This sample not worked in VS 2019 Version 16.2.0 Preview 3.0 .NET.Core 3.0.100-preview6-012264:” 

As per your request we have prepared a sample using Visual Studio 2019 16.2.0. Preview and .NET Core 3.0 Preview 6. And also while using .NETCore 3.0 Preview 6 you will need Syncfusion.EJ2 RazorComponents in 17.1.52-beta version. So kindly ensure that you are using latest version of nuget for Syncfusion components. Kindly download the sample from below link 

Sample: https://www.syncfusion.com/downloads/support/forum/145409/ze/AddParams-695651627  

Note: Previously we have provided the sample in .NETCore 3.0 Preview 5. So while upgrading to .NETCore 3.0 Preview 6 we have done some changes in above sample to achieve the requirement. Please find the sample level changes from below code example.  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan. 

Hi Feifan,  

Greetings from Syncfusion support.  

Query: “it works out fine, which makes me wonder is there any way to cleanse the initial query?”  

 

From your query we understand that you want to modify the query which will be sent to server. Since you want to change only the value, we suggest you define the property inside the Query and change that particular value instead of changing the entire query property. Refer the below code example.  

Refer our UG documentation for your reference 

https://ej2.syncfusion.com/blazor/documentation/grid/data-binding/#change-query-parameter-value-dynamically  

Please get back to us if you have further queries.    

Regards, 

Vignesh Natarajan.