We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

EjsGrid EjsDataManager URL change via API at runtime

Thread ID:

Created:

Updated:

Platform:

Replies:

145409 Jun 20,2019 08:46 AM UTC Dec 20,2019 09:57 AM UTC Blazor 6
loading
Tags: Grid
Chris
Asked On June 20, 2019 08:46 AM UTC

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 [Syncfusion]
Replied On June 21, 2019 11:52 AM UTC

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] 

<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

 

  1. On Button Click.

 

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


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

Regards, 
Vignesh Natarajan. 


Chris
Replied On June 22, 2019 12:47 AM UTC

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

 

Costa
Replied On June 29, 2019 01:57 PM UTC

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:




Vignesh Natarajan [Syncfusion]
Replied On July 1, 2019 11:27 AM UTC

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 


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
Replied On December 19, 2019 06:23 AM UTC

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 [Syncfusion]
Replied On December 20, 2019 09:57 AM UTC

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 


Please get back to us if you have further queries.    

Regards, 
Vignesh Natarajan. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon