Razor page sever side api data source for kendo grid sample?

[Ryan]

Hi All,

I have razor page that gets data source on server side from "public async Task OnGetAsync()". I was able to get data from api and have it set to List successfully. Now, how can I set this datasource to my Kendo Grid? Thanks in Advance!

@(Html.Kendo().Grid<UserList>().Name("grid")
  .Groupable()
  .Sortable()
  .Editable()
  .Scrollable()
  .ToolBar(x => x.Excel())
  .Columns(columns =>
  {
  columns.Bound(column => column.firstName);
  columns.Bound(column => column.lastName);
  columns.Command(column =>
  {
  column.Edit();
  column.Destroy();
  });
  })
  .Excel(excel => excel
  .FileName("Export.xlsx")
  .Filterable(true)
  .ProxyURL("/Admin?handler=Save")
   )
  .DataSource(ds => ????
  .PageSize(10)
   )
  .Pageable()
)

[Georgi]

Hi Ryan,

You have to specify the read handler in the configuration of the DataSource.

e.g.

.DataSource(ds => ds.Ajax()
       .Read(r => r.Url("url").Data("forgeryToken"))

You can find an example of a Razor Pages grid with enabled CRUD in the following link:

• https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/grid/razor-pages-crud

Regards,
Georgi
Progress Telerik

[Ryan]

Hi Georgi,

The "public JsonResult OnPostRead"  is not firing at my end although on the sample, the "public JsonResult OnPostRead" is firing. The difference is that I'm using "public async Task OnGetAsync()" with a couple of await in getting token and response from api, whereas on the sample its just using "public void OnGet()" that creates a data list on the fly w/o waiting for data response.

 

.cs (No issue on getting data from api and set it to UsersList)

The issue is the "public JsonResult OnPostRead" is firing

public static IList<UserList> users;

public async Task OnGetAsync()
{
  users = new List<UserList>();
  var user = await _userManager.GetUserAsync(User);
  if (user == null)
  {
    throw new ApplicationException($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
  }
  string Token = await _userManager.GetAuthenticationTokenAsync(user);
  userData = await _restCall.GetUsers(Token, "api/userList").ToList();
  userData.ForEach(obj => users.Add(new UserList
  {
    Id = obj.Id,
    firstName = obj.firstName,
    middleName = obj.middleName,
    lastName = obj.lastName,
    email = obj.email,
  }));
}

//not firing
public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
{
  return new JsonResult(users.ToDataSourceResult(request));
}

 

chtml

<h2>Kendo UI Grid</h2>
@(Html.Kendo().Grid<UserList>().Name("grid")
.Groupable()
.Sortable()
.Editable()
.Scrollable()
.ToolBar(x => x.Excel())
.Columns(columns =>
{
columns.Bound(column => column.firstName);
columns.Bound(column => column.middleName);
columns.Bound(column => column.lastName);
columns.Bound(column => column.email);
columns.Command(column =>
{
column.Edit();
});
})
.Excel(excel => excel
.FileName("Export.xlsx")
.Filterable(true)
.ProxyURL("/Users?handler=Save")
)
.DataSource(ds => ds.Ajax()
.Read(r => r.Url("/Users?handler=Read").Data("forgeryToken"))
.Model(m => m.Id(id => id.Id))
.PageSize(10)
)
.Pageable()
)

Anything I miss?

 

Thanks in advance!

Ryan

[Georgi]

Hello Ryan,

In the sample we use a static collection of objects to simulate a database. However, in your case I would not recommend to create a static fields as they will live during the entire lifespan of the application.

Instead I would suggest you to use the _restCall service in the Read handler.

e.g.

public async Task<JsonResult> OnPostRead([DataSourceRequest] DataSourceRequest request)
{
  var users = new List<UserList>();
  var user = await _userManager.GetUserAsync(User);
  if (user == null)
  {
    throw new ApplicationException($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
  }
  string Token = await _userManager.GetAuthenticationTokenAsync(user);
  userData = await _restCall.GetUsers(Token, "api/userList").ToList();
  userData.ForEach(obj => users.Add(new UserList
  {
    Id = obj.Id,
    firstName = obj.firstName,
    middleName = obj.middleName,
    lastName = obj.lastName,
    email = obj.email,
  }));

  return new JsonResult(users.ToDataSourceResult(request));
}

Regards,
Georgi
Progress Telerik

[Ryan]

hmm  public async Task<JsonResult> OnPostRead([DataSourceRequest] DataSourceRequest request) not firing as well.

[Georgi]

Hello Ryan,

Could you please check the network tab and make sure that a request is actually sent from the client?

Having said that, sharing a demo that clearly replicates the issue would definitely help us fully understand the case and we will be able to provide further assistance to the best of our knowledge.
 

Regards,
Georgi
Progress Telerik

[Ryan]

Hi Georgy,

Is there any other code that will invoke serverside code -> public async Task<JsonResult> OnPostRead([DataSourceRequest] DataSourceRequest request) aside from .Read(r => r.Url("/Users?handler=Read").Data("forgeryToken"))

Thanks again!

[Georgi]

Hello Ryan,

All the DataSource.Read setting does is to specify the url which the grid should request for data. Unfortunately, we do not have an alternative configuration.

Are you still having trouble to request the server? Would it be possible to send me your project and I will investigate it for you?

Thanks in advance for your cooperation.

I look forward to your reply.

Regards,
Georgi
Progress Telerik

[Ryan]

Hi Georgi,

Sorry I've been busy for the past month. I have created a test project attached here. Its funny that with this test project the "public async Task" was called here although it still has some issue populating the grid. The difference with my main project, it was using "Individual User Accounts" whereas for this one it has "No Authentication".

Anyways, for now the issue is grid not being populated although the "users.ToDataSourceResult(request)" already has data. Please click the Grid menu to go to check the page.

Thanks again for your help!

Ryan

[Georgi]

Hi Ryan,

Thanks for the sample.

If the issue is related with the authentication of the user, you should get a 401 unauthorized error as a response from the server.

The grid in the sample does not populate due to the format of the response. By default the grid expects the response in PascalCase, but currently the format of the response is camelCase. If you switch to PascalCase, the grid populates correctly.

e.g.

        public async Task<JsonResult> OnPostRead([DataSourceRequest] DataSourceRequest request)
        {
            users = new List<UserList>();
            userData = await _restMessage.GetUser("https://randomuser.me/api/", "?results=10");
            var uList = userData.results.ToList();

            uList.ForEach(obj => users.Add(new UserList
            {
                username = obj.login.username,
                firstName = obj.name.first,
                lastName = obj.name.last,
                email = obj.email,
            }));

            return new JsonResult(users.ToDataSourceResult(request), new JsonSerializerSettings { ContractResolver = new DefaultContractResolver() });
        }

For your convenience I am attaching a modified version of the sample.

I hope this helps.

Regards,
Georgi
Progress Telerik

[Ryan]

Thanks a lot Georgi!

Just one request though, where to find docs on styling grid, like fonts, adding images, buttons, etc.

Ryan

[Georgi]

Hello Ryan,

I am pasting few articles related to styling which you might find interesting:

• https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling - general information about the kendo styles
• https://demos.telerik.com/aspnet-mvc/grid - templates with images
• https://demos.telerik.com/aspnet-mvc/grid/custom-command - adding custom buttons

Furthermore, you will find plenty of custom scenarios in our KB portal. Although most of the samples are for the jQuery grid, the very same solutions apply for the MVC grid most of the time.

Regards,
Georgi
Progress Telerik

[Ryan]

Thanks again Georgi! You've been a great help. 

Probably will just open again a new thread regarding item command buttons on header that would do CRUD on checked/selected  items (line item with checkbox checked) on the grid as well as checkall checkboxes, for it is no longer related on this thread.