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

Razor Components Grid Data Manager

Thread ID:

Created:

Updated:

Platform:

Replies:

144256 Apr 26,2019 10:05 PM UTC Jun 5,2019 12:46 PM UTC Blazor 5
loading
Tags: Grid
Raul
Asked On April 26, 2019 10:05 PM UTC

Hi, Im testing the new Syncfusion razor components, my question is how to use data manager with the grid.

Jesus Arockia Sankaran S [Syncfusion]
Replied On May 2, 2019 08:44 AM UTC

Hi Raul,  
 
Greetings from Syncfusion support.  
   
We are currently in preview version of our Blazor components. Currenytly, We don’t  have support for Data Manager in Blazor. We are  already started the implementation of this feature and is scheduled to be released for our Essential studio Volume 2 which will be rolled out by the end of June.  You can keep track of the status of the feature in the below feature report page. 
 
 
Please get back to us if you require any further assistance on this.  
 
Regards,  
Jesus Arockia Sankaran S 
   
 
 


Rahul Narayanasamy [Syncfusion]
Replied On June 3, 2019 02:11 PM UTC

Hi Raul, 
 
Thanks for contacting Syncfusion support. 
 
We are glad to let you know that we have provided DataManager support in ASP.NET Core Blazor from the nuget package version 17.1.0.50-beta, so we request you to upgrade to this nuget version(17.1.0.50-beta) to use the DataManager support in Grid.  

Based on your requirement we have prepared the sample by bind the grid with WebApiAdaptor using DataManager. In Blazor, you need to return process response in the form of Items and Count. Please find the below code example and sample for your reference. 

[code example] 
@page "/" 
 
@using Syncfusion.EJ2.RazorComponents.Grids; 
@using WebApplication1.Shared.Models; 
@using Syncfusion.EJ2.RazorComponents.Data 
 
 
<EjsGrid id="Grid" ref="@grid" AllowSorting="true"> 
    <EjsDataManager Url="/api/Default" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager> 
    <GridColumns> 
        <GridColumn Field="EmployeeID" HeaderText="Employee ID" ISPrimaryKey="true" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right" Width="90"></GridColumn> 
        <GridColumn Field="FirstName" HeaderText="First Name" Width="90"></GridColumn> 
        <GridColumn Field="LastName" HeaderText=" Last Name" Width="90"></GridColumn> 
        <GridColumn Field="City" HeaderText="City" Width="150"></GridColumn> 
    </GridColumns> 
</EjsGrid> 
 
 
@functions{ 
    Employee[] data; 
 
    EjsGrid grid; 
 
} 

... 
 
namespace WebApplication1.Server.Controllers 
{ 
    [Route("api/[controller]")] 
    [ApiController] 
    public class DefaultController : ControllerBase 
    { 
        EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer(); 
        // GET: api/Default 
        [HttpGet] 
        public object Get() 
        { 
           IEnumerable<Employee> data = objemployee.GetAllEmployees().ToList(); 
            return new { Items = data, Count = data.Count() };        } 
 
        // GET: api/Default/5 
        [HttpGet("{id}", Name = "Get")] 
        ... 
   } 
} 
 

Additional Information: 

Normally, ASP.NET Core 1.0+ framework has camel casing issues while serializing the JSON Object. If you are facing the same issue while running the sample then please refer to the following way to overcome that casing issue in Application level. Otherwise kindly ignore the following information. 
 
Could you please ensure in your application side to call the ContractResolver options under the Startup.cs file to avoid camel casing conversion during the serialization process?  The is related to ASP.NET Core specifics and we suggest refer to the following article which describes how to overcome a similar issues. 
 
 
For your convenience, we have included this changes in the below provided application itself and share the code snippets too. 

[WebApplication1.Server -> StartUp.cs] 
public void ConfigureServices(IServiceCollection services) 
        { 
 
            services.AddMvc().AddNewtonsoftJson(options => { 
                options.SerializerSettings.ContractResolver = new DefaultContractResolver(); 
            }); 
             
             
            ... 
       } 


  
Please get back to us if you need further assistance. 

Regards, 
Rahul 


E Bekker
Replied On June 4, 2019 11:35 PM UTC

Do you have any more details or docs on the WebApiAdaptor and how to support remote paging/sorting?  For example, what type of API interface is needed to support parameters passed in for sorting, paging, filtering, etc?

I discovered some of the parameters based on experimentation and inspecting the query string and mapping that to my own params:

$inlinecount=allpages

$orderby=ColName%20desc

$skip=0

$top=12

But I was looking for a more formal and complete reference doc?

Thanks -- btw, DataManager enhancement is working well!



E Bekker
Replied On June 5, 2019 03:16 AM UTC

Also, can you provide any details on the Adaptors.BlazorAdaptor Adaptor type, like how is it configured?

Rahul Narayanasamy [Syncfusion]
Replied On June 5, 2019 12:46 PM UTC

Hi Bekker, 
 
Query: Do you have any more details or docs on the WebApiAdaptor and how to support remote paging/sorting?  For example, what type of API interface is needed to support parameters passed in for sorting, paging, filtering, etc? I discovered some of the parameters based on experimentation and inspecting the query string and mapping that to my own params: $inlinecount=allpages $orderby=ColName%20desc $skip=0 $top=12  But I was looking for a more formal and complete reference doc? 
 
We have validated your query and currently the documentation for these topics are in progress. It will be included in our any of our upcoming release. Once the documentation topics are successfully rolled out, we will notify you. Until then we appreciate your patience. 
 
For WebApiAdaptor, all the operations are done based on queryString property. You need to handle the grid actions(such as paging, sorting and filtering) in server side. And by default, grid records are rendered based on the on-demand services. It increases the performance while using on-demand services by defining DataManager.  
 
Like the below code example, we need to handle the grid actions in server side. 
 
int count = DataSource.Cast<OrdersDetails>().Count(); 
    if (dm.Skip != 0) 
    { 
        DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging 
    } 
    if (dm.Take != 0) 
    { 
        DataSource = operation.PerformTake(DataSource, dm.Take); 
    } 
. . .  
 
 
Query: Also, can you provide any details on the Adaptors.BlazorAdaptor Adaptor type, like how is it configured? 
 
In Blazor adaptor, we have handled data operations within our source. If the grid is rendered through the BlazorAdaptor, then just you need to bind the dataSource for the grid. For this adaptor, all the operations are automatically performed. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul 


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