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. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. ASP.NET Core
  4. Route configuration

Route configuration

Hello support,

We are implementing a "Gird" containing a "ChildGrid". We are using the Javascript Syncfusion controls. The data for the parent and child grids should be retrieved from a ASP.NET Core Web API (REST). In this case we are only trying to display information so no editing (hence we are only making GET requests to fetch the data).  

The problem occurs when trying to fetch the data for the child grid. When debugging I get a breakpoint in the correct action, however I don't get the parameters on which to filter. Here is my code:

Client code (TypeScript):

class CustomerService {
    private content: HTMLElement;
    private grid: ej.Grid;

    constructor(content: HTMLElement) {
        this.content = content;
    }

    initGrid() {
        const customerDataManager = new ej.DataManager({
            url: "api/Customers",
            adaptor: new ej.WebApiAdaptor()
        });

        const subscriptionDataManager = new ej.DataManager({
            url: "api/Subscriptions",
            adaptor: new ej.WebApiAdaptor()
        });

        this.grid = new ej.Grid(this.content,
            {
                dataSource: customerDataManager,
                childGrid: {
                    dataSource: subscriptionDataManager,
                    queryString: "tenantId",
                    columns: [
                        { field: "id", headerText: "Subscription ID" }
                    ]
                },
                allowFiltering: true,
                allowSorting: true,
                columns: [
                    { field: "id", headerText: "Klant Tenant", isPrimaryKey: true, visible: true },
                    { field: "companyName", headerText: "Naam" },
                    { field: "tenantId", headerText: "Tenant" }
                ]
            });
    }
}

Server side code (ASP.NET Core Controller):
[HttpGet, Route("api/Customers")]
public async Task<object> Customers()
{
    var customers = await _customerService
        .GetCustomersAsync();

    return new { result = customers, count = customers.Count };
}

[HttpGet, Route("api/Subscriptions")]
public async Task<object> Subscriptions(string tenantId)
{
    var subscriptions = await _subscriptionService
        .GetSubscriptionsForCustomerAsync(tenantId);

    return new {result = subscriptions, count = subscriptions.Count};
}

As mentioned, when I put a breakpoint in the "Subscriptions" method the code breaks but the "tenantId" parameter is always null. So the question is: how do I get the filter information available inside the "Subscription" method?

Your help would be greatly appreciated.

Kind regards,

Maurits van Beusekom

7 Replies
VA Venkatesh Ayothi Raman Syncfusion Team November 9, 2016 09:19 AM UTC

Hi Maurits, 
Thanks for contacting Syncfusion support. 
 
We have checked the provided code and found that you are using WebApiAdaptor in your application. And also you are returned the data as result and count. This is not a recommended way to return the data when using webApiAdaptor. Please refer to the below Help document for more information about wepApi data adaptor, 
 
For your scenario, we suggest you to use the URL Adaptor.  If we use URL adaptor then we need to pass the parameter like Paging, filtering etc. like as follows,  
Code example:  
//Grid 
 
initGrid() { 
        const customerDataManager = new ej.DataManager({ 
            url: "api/Customers", 
            adaptor: new ej.UrlAdaptor() 
        }); 
 
        const subscriptionDataManager = new ej.DataManager({ 
            url: "api/Subscriptions", 
            adaptor: new ej.UrlAdaptor() 
        }); 
 
. . . 
      }); 
    } 
    } 
 
//Controller 
 
// create a Filtering class which has properties of Grid where query 
         public class Filter 
         { 
             public string condition { get; set; } 
             public string field { get; set; } 
             public string @operator { get; set; } 
             public bool ignoreCase { get; set; } 
             public bool isComplex { get; set; } 
             public List<Filter> predicates { get; set; } 
             public object value { get; set; } 
         } 
 
 
        // here we can pass the paremeter  
         [HttpGet, Route("api/Subscriptions")] 
         public async Task<object> Subscriptions(int skip, int take, List<Filter> where) 
         { 
             //we can get the child query string filter value from filter parameters  
             // for paging we can also get the skip and take value from ski and take paramete 
             // Code something 
 
             return new { result = subscriptions, count = subscriptions.Count }; 
         } 
 

Please refer to the Help document for more information about URL adaptor, 

Regards, 
Venkatesh Ayothiraman. 


MV Maurits van Beusekom November 9, 2016 11:46 AM UTC

I have implemented the suggested solution (using UrlAdaptor and specifying parameters) however this results in a 404 page not found when trying to call the API. My current code looks like this:

Client code (TypeScript):
/// <reference path="../tsfiles/jquery.d.ts" />
/// <reference path="../tsfiles/ej.web.all.d.ts" />

class CustomerService {
    private content: HTMLElement;
    private grid: ej.Grid;

    constructor(content: HTMLElement) {
        this.content = content;
    }

    initGrid() {
        const customerDataManager = new ej.DataManager({
            url: "api/Customers",
            adaptor: new ej.UrlAdaptor()
        });

        const subscriptionDataManager = new ej.DataManager({
            url: "api/Subscriptions",
            adaptor: new ej.UrlAdaptor()
        });

        this.grid = new ej.Grid(this.content,
            {
                dataSource: customerDataManager,
                childGrid: {
                    dataSource: subscriptionDataManager,
                    queryString: "tenantId",
                    columns: [
                        { field: "id", headerText: "Subscription ID" }
                    ]
                },
                allowFiltering: true,
                allowSorting: true,
                columns: [
                    { field: "id", headerText: "Klant Tenant", isPrimaryKey: true, visible: true },
                    { field: "companyName", headerText: "Naam" },
                    { field: "tenantId", headerText: "Tenant" }
                ]
            });
    }
}
Server side code (ASP.NET Core C#):
        [HttpGet, Route("api/Customers")]
        public async Task<object> Customers(int skip, int take, List<Filter> filters)
        {
            var customers = await _customerService
                .GetCustomersAsync();

            return new { result = customers, count = customers.Count };
        }

        [HttpGet, Route("api/Subscriptions")]
        public async Task<object> Subscriptions(int skip, int take, List<Filter> filters)
        {
            var tenantId = dm.Where.SingleOrDefault(f => f.Field == "tenantId").value.ToString();

            var subscriptions = await _subscriptionService
                .GetSubscriptionsForCustomerAsync(tenantId);

            return new { result = subscriptions, count = subscriptions.Count };
        }

The implementation of the "Filter" class is copied directly out of the suggested solution. Please advise.

MV Maurits van Beusekom November 9, 2016 11:57 AM UTC

I noted that I made a type error in the parameters off the server-side methods (parameter named "filters" instead of "where"). I tried changing it but the result is the same (a 404 Not Found error).

MV Maurits van Beusekom November 9, 2016 12:39 PM UTC

As a side note I wanted to inform you that the following suggestion doesn't work:
"We have checked the provided code and found that you are using WebApiAdaptor in your application. And also you are returned the data as result and count. This is not a recommended way to return the data when using webApiAdaptor. Please refer to the below Help document for more information about wepApi data adaptor, 
Help document: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#webapi-adaptor "
When I convert the return type (while using the "WebApiAdaptor") from:
new { result = customers, count = customers.Count };
to:
new { Items = customers, Count = customers.Count };
The grid doesn't display any records.

VA Venkatesh Ayothi Raman Syncfusion Team November 10, 2016 10:49 AM UTC

Hi Maurits, 
Sorry for the inconvenience caused. 
Query #1:” I tried changing it but the result is the same (a 404 Not Found error).” 
While using URL adaptor then request method is must be as POST. We suspect that is the cause of the 404 not found error. In your code example, you have used the [HttpGet] method. Please refer to the following code example, 
Code example:  
//Grid 
 
initGrid() { 
        const customerDataManager = new ej.DataManager({ 
            url: "api/Customers", 
            adaptor: new ej.UrlAdaptor() 
        }); 
 
        const subscriptionDataManager = new ej.DataManager({ 
            url: "api/Subscriptions", 
            adaptor: new ej.UrlAdaptor() 
        }); 
 
. . . 
      }); 
    } 
    } 
 
//Controller 
 
// create a Filtering class which has properties of Grid where query 
         public class Filter 
         { 
             public string condition { get; set; } 
             public string field { get; set; } 
             public string @operator { get; set; } 
             public bool ignoreCase { get; set; } 
             public bool isComplex { get; set; } 
             public List<Filter> predicates { get; set; } 
             public object value { get; set; } 
         } 
 
 
        // here we can pass the paremeter  
         [HttpPost, Route("api/Subscriptions")] 
         public async Task<object> Subscriptions(int skip, int take,List<Filter> where) 
         { 
             //we can get the child query string filter value from filter parameters  
             // for paging we can also get the skip and take value from ski and take paramete 
             // Code something 
 
             return new { result = subscriptions, count = subscriptions.Count }; 
         } 
 
 
Query #2:” When I convert the return type (while using the "WebApiAdaptor") from: 
new { result = customers, count = customers.Count }; 
to: 
new { Items = customers, Count = customers.Count }; 
The grid doesn't display any records. 
” 
Could you please provide more details about your requirement? It would be helpful for us to find the issue and provide the solution as earliest? 
Regards, 
Venkatesh Ayothiraman. 


MV Maurits van Beusekom November 14, 2016 02:23 PM UTC

Hello support,

Is there a way to get around the HTTP POST? The server-side code is implemented as a RESTFull service, changing the verb for retrieving the subscriptions into a "POST" would break the REST paradigm.

According to the second issue:
When I convert the return type (while using the "WebApiAdaptor") from:
new { result = customers, count = customers.Count };
to:
new { Items = customers, Count = customers.Count };
The grid doesn't display any records.

Here is the error I get in the Javascript console:

Uncaught TypeError: Cannot read property '0' of undefined(…)
    addInitTemplate         @ ej.web.all.min.js:10
    _initGridRender         @ ej.web.all.min.js:10
    (anonymous function)    @ ej.web.all.min.js:10
    (anonymous function)    @ ej.web.all.min.js:10
    fire                    @ jquery.js:3182
    fireWith                @ jquery.js:3312
    (anonymous function)    @ ej.web.all.min.js:10
    (anonymous function)    @ ej.web.all.min.js:10
    (anonymous function)    @ ej.web.all.min.js:10
    fire                    @ jquery.js:3182
    fireWith                @ jquery.js:3312
    done                    @ jquery.js:8754
    (anonymous function)    @ jquery.js:9120

And this is the JSON response which is returned from the server:

{
    "items": [
        {
            "id": "5c4f27f7-9e61-458e-8c34-010e07f68abe",
            "companyProfile": {
                "tenantId": "5c4f27f7-9e61-458e-8c34-010e07f68abe",
                "domain": "aircraftdocking.onmicrosoft.com",
                "companyName": "NIJL Aircraftdocking"
            },
            "relationshipToPartner": "reseller"
        },
        {
            "id": "722b5aec-05cf-4bc8-914c-964734f460a4",
            "companyProfile": {
                "tenantId": "722b5aec-05cf-4bc8-914c-964734f460a4",
                "domain": "axendo.onmicrosoft.com",
                "companyName": "Axendo"
            },
            "relationshipToPartner": "reseller"
        }
    ],
    "count": 2
}
And just to be complete, here is the server-side function:
[HttpGet, Route("api/Customers")]
public async Task<object> Customers()
{
    var customers = await _customerService
        .GetCustomersAsync();

    return new { Items = customers, Count = customers.Count };
}

VA Venkatesh Ayothi Raman Syncfusion Team November 15, 2016 05:32 PM UTC

Hi Maurits, 

Thanks for the update. 
Query #1:” Is there a way to get around the HTTP POST? The server-side code is implemented as a RESTFull service, changing the verb for retrieving the subscriptions into a "POST" would break the REST paradigm.” 
For this query, we suggest you to use WebApi adaptor to implemented the RESTFull service.5 
Query #2:” Here is the error I get in the Javascript console” 
We went through your JSON response which is returned from the server and found that Items and Count parameters is changed to items and count. This is the cause of the issue, while we using like as follows, 
 
[HttpGet, Route("api/Customers")] 
public async Task<object> Customers() 
{ 
    var customers = await _customerService 
        .GetCustomersAsync(); 
 
    return new { Items = customers, Count = customers.Count }; 
} 
 
 

Regards, 
Venkatesh Ayothiraman. 


Loader.
Live Chat Icon For mobile
Up arrow icon