EjsGrid EjsDataManager URL change via API at runtime

[Chris]

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.

The default EjsDataManager  URL is http://localhost:5000/api/v2/order?storecode=1 

The store code will change depending on which storecode is selected.

This is the api call I tried but to didn't work: 

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

Thanks in advance,

Chris

Dropdown

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

Grid

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

<EjsDataManager ref="orderDataManager" CrossDomain="true" Url="http://localhost:5000/api/v2/order?storecode=1" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager>

order.razor

@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();
    }
}

[Vignesh Natarajan]

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.  

http://localhost:5000/api/v2/order?storecode=1  

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] 

<EjsButton ID="btn" Onclick="click">Change</EjsButton> 

 

<EjsGrid id="Grid" ref="@grid" AllowPaging="true" Query="new ej.data.Query().addParams('code',10)"> 

    <EjsDataManager Url="api/Default" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager> 

    <GridColumns> 

        <GridColumn Field="OrderID" HeaderText="Order ID" ISPrimaryKey="true" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right" Width="90"></GridColumn> 

        <GridColumn Field="CustomerID" HeaderText="Customer ID" Width="90"></GridColumn> 

        <GridColumn Field="EmployeeID" HeaderText="Employee ID" Width="90"></GridColumn> 

        <GridColumn Field="Freight" HeaderText="Freight" Width="90"></GridColumn> 

    </GridColumns> 

</EjsGrid> 

 

@functions{ 

 

 

    EjsGrid grid { get; set; } 

 

    protected override void OnInit() 

    { 

 

    } 

 

    public void click(UIMouseEventArgs args) 

    { 

//update the Grid query and rebind to Grid. 

        grid.Query = "new ej.data.Query().addParams('code',5)"; 

        grid.DataBind(); 

    } 

} 

[default controller] 

  public object Get() 

        { 

            BindDataSource(); 

            var data = order.AsQueryable(); 

            var count = order.Count; 

            var queryString = Request.Query; 

            if (queryString.Keys.Contains("$inlinecount")) 

            { 

                StringValues Skip;                 

                string Code = HttpUtility.ParseQueryString(Request.QueryString.Value).Get("code"); 

                int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0; 

                int top = Convert.ToInt32(Code); 

                return new { Items = data.Skip(skip).Take(top), Count = count }; 

            } 

            else 

            { 

                return data; 

            } 

          //  return new { Items = order.AsQueryable(), Count = order.Count }; 

        } 

Refer the below screenshot for the output 

1. During the initial rendering

 

2. On Button Click.

 

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. 

[Chris]

Thanks Vignesh. Everything is working as expected on my end now.

 

[Costa]

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

After updating Nuget Packages:

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

[Vignesh Natarajan]

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.  

<EjsButton ID="btn" Onclick="click">Change</EjsButton> 

 

<EjsGrid id="Grid" @ref="grid" AllowPaging="true" Query="new ej.data.Query().addParams('code',10)">  

    <EjsDataManager Url="api/Default" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

    <GridColumns> 

…………………………………………………………… 

    </GridColumns> 

</EjsGrid> 

 

@code{ 

private EjsGrid grid; 

public void click(UIMouseEventArgs args) 

{ 

    //update the Grid query and rebind to Grid.  

    this.grid.Query = "new ej.data.Query().addParams('code',5)"; 

    this.grid.DataBind(); 

    this.grid.Refresh(); 

} 

} 

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan. 

[Feifan]

Hi Natarajan,

I was trying to change the datamanager url and it didn't work.

The thing is, if I setup the Query in the EjsGrid, the Query will persist and we would hit the same endpoint even though I saw the EjsGrid.Query property changed in VS debugger.

< EjsGrid @ref="@DefaultGrid" Query="new ej.data.Query().addParams('month',201912)" TValue="AccrualDetail" AllowSorting="true" AllowExcelExport="true" AllowPaging="true" />

          < EjsDataManager Url="@DefaultUrl" Adaptor="Adaptors.WebApiAdaptor" />

@code {

     public string DefaultUrl = "http://localhost:3000/accruals";

     public class AccrualDetail{

          ...

     }

     private EjsGrid DefaultGrid;

     private void onChange(Syncfusion.EJ2.Blazor.Calendars.ChangedEventArgs args)

     {

          DateValue = args.Value;

          this.DefaultGrid.Query = "new ej.data.Query().addParams('month',20190" + DateValue.Month.ToString() + ")";

          this.DefaultGrid.DataBind();

          this.DefaultGrid.Refresh();

     }

}

However, if I took the Query="new ej.data.Query().addParams('month',201912)" off from the first line of the code, it works out fine, which makes me wonder is there any way to cleanse the initial query?

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

<EjsCalendar ValueChange="OnChange"></EjsCalendar> 

 

<EjsGrid TValue="Orders" Query="@($"new ej.data.Query().addParams('month',{Val})")" AllowPaging="true"> 

    <EjsDataManager Url="api/Default" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager> 

. . . . . . . . . . . . .. .  

</EjsGrid> 

 

@code{ 

    public string Val = "092019"; 

    public void OnChange(ChangedEventArgs args) 

    { 

        Val = "12345"; 

    } 

} 

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.