Poblem Displaying The Grid

[Moataz]

Sir,

I have an asp.net core 2.2 project, and I wanted to use Telerik grid to display data from the MS SQL Server database.

the model

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace SUCOCoreControl.Models.RazorBudget
{
    public partial class Header
    {
        public Header()
        {
            SubHeader = new HashSet<SubHeader>();
        }

        [StringLength(6)]
        public string ProjectID { get; set; }
        [StringLength(30)]
        public string HeaderID { get; set; }
        [StringLength(60)]
        public string HeaderENG { get; set; }
        [StringLength(60)]
        public string HeaderARB { get; set; }

        [ForeignKey("ProjectID")]
        [InverseProperty("Header")]
        public virtual Project Project { get; set; }
        [InverseProperty("Header")]
        public virtual ICollection<SubHeader> SubHeader { get; set; }
    }
}

The controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;
using SUCOCoreControl.Models.RazorBudget;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using SUCOCoreControl.Data;

namespace SUCOCoreControl.Controllers
{
    public class HeadersController : Controller
    {
        private readonly SUCODbContext _context;

        public HeadersController(SUCODbContext context)
        {
            _context = context;
        }

        public IActionResult Index([DataSourceRequest] DataSourceRequest request)
        {
            return Json(_context.Header.ToDataSourceResult(request));
        }
        public IActionResult Error()
        {
            return View();
        }

    }
}

 

The view

@using SUCOCoreControl.Models.RazorBudget

@{
    ViewData["Title"] = "Headers";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!-- ============================================================== -->
<!-- Page wrapper  -->
<!-- ============================================================== -->
<div class="page-wrapper">
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <div class="container-fluid">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h4 class="text-themecolor"><a> @ViewBag.Title</a></h4>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="col-md-6 col-xs-12">
                            <div class="form-inline well well-lg">
                                @(Html.Kendo().Grid<Header>()
           .Name("Header")
           .Columns(columns =>
           {
               columns.Bound(p => p.ProjectID);
               columns.Bound(p => p.HeaderID);
               columns.Bound(p => p.HeaderENG);
               columns.Bound(p => p.HeaderARB);
               columns.Command(command => command.Edit());
           })
           .Pageable()
           .Sortable()
           .Filterable()
           .Groupable()
           .Editable()

                     .DataSource(dataSource => dataSource
               .Ajax()
             .ServerOperation(false)
             .Read(read => read.Action("Index", "Headers"))
            )
                                )
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 

The page is not loading, and the grid of course is not.

I attached the result in the browser.

What I am doing wrong???

[Moataz]

I changed the code in the controller to

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;
using SUCOCoreControl.Models.RazorBudget;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using SUCOCoreControl.Data;
using Kendo.Mvc.Infrastructure;

namespace SUCOCoreControl.Controllers
{
    public class HeadersController : Controller
    {
        private readonly SUCODbContext _context;

        public HeadersController(SUCODbContext context)
        {
            _context = context;
        }

        public IActionResult Index()
        {
            return View();
        }


        public IActionResult Index([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetHeaders().ToDataSourceResult(request));
        }
        private static IEnumerable<Header> GetHeaders()
        {
            using (var sucocore = new SUCODbContext())
            {
                return sucocore.Header.Select(header => new Header
                {
                    ProjectID = header.ProjectID,
                    HeaderID = header.HeaderID,
                    HeaderENG = header.HeaderENG,
                    HeaderARB = header.HeaderARB,
                }).ToList();
            }
        }

        public IActionResult Error()
        {
            return View();
        }

    }
}

Now it is giving me :

 

An unhandled exception occurred while processing the request.
AmbiguousActionException: Multiple actions matched. The following actions matched route data and had all constraints satisfied:

SUCOCoreControl.Controllers.HeadersController.Index (SUCOCoreControl)
SUCOCoreControl.Controllers.HeadersController.Index (SUCOCoreControl)
Microsoft.AspNetCore.Mvc.Internal.ActionSelector.SelectBestCandidate(RouteContext context, IReadOnlyList<ActionDescriptor> candidates)

 

Please help me.

[Tsvetomir]

Hi Moataz,

I have investigated the provided code snippets and everything seems to be set up correctly. However, I have noticed that the casing of the JSON returned from the server is in Camel case, while, the grid expects the items to be spelled with Pascal case. Can you try setting the following in the ConfigureServices method of the Startup.cs file:

public void ConfigureServices(IServiceCollection services)
{
    ...
    // Maintain property names during serialization. See:
    // https://github.com/aspnet/Announcements/issues/194
    services
        .AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
        .AddJsonOptions(options =>
            options.SerializerSettings.ContractResolver = new DefaultContractResolver());

    // Add Kendo UI services to the services container
    services.AddKendo();
}

This would require to put the following using at the top of the file:

...
using Newtonsoft.Json.Serialization;
...

More information on this can be obtained in the article below and more specifically the 5th point:

https://docs.telerik.com/aspnet-core/getting-started/getting-started

Let me know in case the issue persists.


Kind regards,
Tsvetomir
Progress Telerik

[Moataz]

 The issue persists, whatever I do it shows me like the screenshots in question 1. I started to give up.

[Moataz]

To be honest with you, I created first an asp.net core MVC application, then managed the authentication administration logic complete with users and roles. After that I am trying to add the what the users will see as tables and data. Nothing worked for me, not Datatables, not Telerik, and Syncfusion. They all returned the same view, I think it is called raw Json data. 

What could be wrong in my application?? Would it be related to the server or the database structure?

Can I send you the application somehow so you can check it?

[Tsvetomir]

Hi Moataz,

With the newer versions of the ASP.NET Core Framework, sending CSFR tokens for each of the requests is mandatory. In the context of the Kendo UI Grid, it could be done as follows:

.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("Categories_Read", "Home").Data("sendForgery"))
)

<script>
    function sendForgery(e){
       return kendo.antiForgeryTokens();
    }
</script>

And decorating the grid:

@Html.AntiForgeryToken()

@(Html.Kendo().Grid<KendoGridClientHierarchy.Models.Category>()
    // omitted for clarity
)

If you are able to replicate the faulty behavior in a sample project and send it to me, it would be great. I will be able to investigate the case locally and get back to you with accurate suggestions. 

Thank you for your cooperation.


Kind regards,
Tsvetomir
Progress Telerik