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

13 posts, 1 answers
  1. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 04 Sep 2019 Link to this post

    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.Id); 

      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()
    )
  2. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 06 Sep 2019 Link to this post

    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:



    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 08 Sep 2019 in reply to Georgi Link to this post

    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

  4. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 11 Sep 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 11 Sep 2019 in reply to Georgi Link to this post

    hmm  public async Task<JsonResult> OnPostRead([DataSourceRequest] DataSourceRequest request) not firing as well.
  6. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 13 Sep 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 30 Sep 2019 Link to this post

    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!

  8. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 02 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 01 Nov 2019 in reply to Georgi Link to this post

    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

  10. Answer
    Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 05 Nov 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 10 Nov 2019 in reply to Georgi Link to this post

    Thanks a lot Georgi!

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

    Ryan

  12. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 12 Nov 2019 Link to this post

    Hello Ryan,

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

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  13. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 14 Nov 2019 in reply to Georgi Link to this post

    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.

Back to Top