Json string is displayed instead of Forum

[Purna]

I have model as

    public class ProductViewModel
    {
        public int ID { get; set; }
        public string ProductName { get; set; }
        public double? Price { get; set; }
    }

 

The controller is

 public ActionResult Products([DataSourceRequest]DataSourceRequest request)
        {
            List<Models.ProductViewModel> lst = new List<Models.ProductViewModel>();
            lst = GetGridData().ToList();

            DataSourceResult result = lst.ToDataSourceResult(request, p => new Models.Product 
            {
                ID = p.ID,
                ProductName = p.ProductName,
                Price = p.Price 
            });
            return Json(result, JsonRequestBehavior.AllowGet);
        }

 

       public IEnumerable<Models.ProductViewModel> GetGridData()
        {
            List<Models.ProductViewModel> objProducts = new List<Models.ProductViewModel>();

            for (int i = 1; i<= 10; i++)
            {
                objProducts.Add(new Models.ProductViewModel() { ID = i, ProductName = "Prod" + i.ToString(), Price = i * 10 });
            }
            return objProducts.ToList().AsEnumerable();
        }

 

cshtml

@model TelerikMvcApp1.Models.ProductViewModel
@using System.Web.Optimization
@using Kendo.Mvc.UI
@using Kendo.Mvc.Extensions

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div>
    @(Html.Kendo().Grid<TelerikMvcApp1.Models.ProductViewModel>()
                                        .Name("grid")
                                        .DataSource(dataSource => dataSource //Configure the Grid data source.
                                            .Ajax() //Specify that Ajax binding is used.

                                            .ServerOperation(false) //Paging, sorting, filtering, and grouping will be done client-side.
                                            .Read(read => read
                                                .Action("About", "Home")) //Set the action method which will return the data in JSON format.
                                                                          //.Data("productsReadData") //Specify the JavaScript function which will return the data.
                                        )
                                        .Columns(columns =>
                                        {
                                            //Create a column bound to the ProductID property.
                                            columns.Bound(P => P.ID).Title("Product ID");
                                            //Create a column bound to the ProductName property.
                                            columns.Bound(P => P.ProductName).Title("Product Name").Width(130);
                                            //Create a column bound to the UnitsInStock property.
                                            columns.Bound(P => P.Price);
                                        })
                                        .Pageable() // Enable paging
                                        .Sortable() // Enable sorting
                                        .HtmlAttributes(new { style = "height: 550px; width:300px;" })
    )
</div>

 

 

 

 

When I run the application, Grid is not displayed and the output is

{"Data":[{"ID":1,"ProductName":"Prod1","Price":10},{"ID":2,"ProductName":"Prod2","Price":20},{"ID":3,"ProductName":"Prod3","Price":30},{"ID":4,"ProductName":"Prod4","Price":40},{"ID":5,"ProductName":"Prod5","Price":50},{"ID":6,"ProductName":"Prod6","Price":60},{"ID":7,"ProductName":"Prod7","Price":70},{"ID":8,"ProductName":"Prod8","Price":80},{"ID":9,"ProductName":"Prod9","Price":90},{"ID":10,"ProductName":"Prod10","Price":100}],"Total":10,"AggregateResults":null,"Errors":null}

[Alex Hajigeorgieva]

Hello, Purna,

Thank you for the provided code snippets.

They show that the grid is bound to one model, yet receives a response of another type and also the read action methods that are specified here do not match the grid data source ones. I tested by adding the methods to a grid controller:

.Read(read => read.Action("Products", "Grid"))

The Kendo UI Grid for ASP.NET MVC makes POST requests, so there is no need to allow get requests. In addition to that, the ToDataSourceRequest() extension method works with IEnumerables, so there is no need to turn the Enumerable to a list. The controller may be simplified:

public ActionResult Products([DataSourceRequest]DataSourceRequest request)
{
    var lst = GetGridData();

    var result = lst.ToDataSourceResult(request);
    return Json(result);
}

Nonetheless, I was able to render a grid with the provided snippets. Could you make sure that the kendo.aspnetmvc-ajax.js in included and after the kendo scripts? 

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Purna]

I had the same body in Products and About controller methods. 

 

Controller:

public ActionResult Products([DataSourceRequest]DataSourceRequest request)
        {

            var lst = GetGridData();

            var result = lst.ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
}

 

 

 

_Layout.cshtml - including the kendo.aspnetmvc-ajax.js 

----------------------------

<!DOCTYPE html>
<html> 
<head>
    <title>@ViewBag.Title - My Telerik MVC Application</title>
    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />

    @* Content-box fixes as per http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap article  *@
    <link href="@Url.Content("~/Content/box-sizing-fixes.css")" rel="stylesheet" type="text/css" />

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    <link href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.aspnetmvc.min.js"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.aspnetmvc-ajax.js"></script>

</head> 

 

 

Products.cshtml

-------------------------

@model TelerikMvcApp1.Models.ProductViewModel
@using System.Web.Optimization
@using Kendo.Mvc.UI
@using Kendo.Mvc.Extensions

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div>


    @(Html.Kendo().Grid<TelerikMvcApp1.Models.ProductViewModel>()
                                        .Name("Grid")
                                        .DataSource(dataSource => dataSource //Configure the Grid data source.
                                            .Ajax() //Specify that Ajax binding is used.

                                            .ServerOperation(false) //Paging, sorting, filtering, and grouping will be done client-side.
                                            .Read(read => read
                                                .Action("Products", "Grid")) //Set the action method which will return the data in JSON format.
                                                                          //.Data("productsReadData") //Specify the JavaScript function which will return the data.
                                        )
                                        .Columns(columns =>
                                        {
                                            //Create a column bound to the ProductID property.
                                            columns.Bound(P => P.ID).Title("Product ID");
                                            //Create a column bound to the ProductName property.
                                            columns.Bound(P => P.ProductName).Title("Product Name").Width(130);
                                            //Create a column bound to the Price property.
                                            columns.Bound(P => P.Price);
                                        })
                                        .Pageable() // Enable paging
                                        .Sortable() // Enable sorting
                                        .HtmlAttributes(new { style = "height: 550px; width:300px;" })
    )
</div>

 

 

 

The result is same. Grid is not visible.

[Aditi]

Hi Alex, I am facing the exactly same issue with the same code. I have followed the tutorial step by step and spent hours yet am unable to get it to work.

The only thing I have not tried is "Could you make sure that the kendo.aspnetmvc-ajax.js in included and after the kendo scripts? "

I can't seem to find the CDN for this script. Could you please paste the link?

[Aditi]

Thanks Alex! I figured it out. There was an issue with my route.config! 

[Alex Hajigeorgieva]

Hello,

I am pleased to hear that the issue has been resolved. Thank you or sharing with the Kendo UI community what the problem you were facing actually was.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Purna]

Hi Alex

I couldn't still fix the issue.

Only thing I am missing is "Could you make sure that the kendo.aspnetmvc-ajax.js in included and after the kendo scripts?"

Can you give link for this. Thanks

[Alex Hajigeorgieva]

Hi, Purna,

The  kendo.aspnetmvc-ajax.js script is available as part of all the distributions:

https://www.telerik.com/account/product-download?product=KENDOUIMVC

~\telerik.ui.for.aspnetmvc.2019.1.220.commercial\js

Also accessible via CDN:

<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.aspnetmvc.min.js"></script>

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Purna]

Alex

Thanks for the reply.

kendo.aspnetmvc-ajax.js was already included. I am not sure what is missing.

 

When I modified the controller as below, Grid is displayed with no contents as expected

 public ActionResult Products([DataSourceRequest]DataSourceRequest request)

 {
            return View();
 }

 

But when the controller return Json, String values are displayed instead of Grid.

public ActionResult Products([DataSourceRequest]DataSourceRequest request)
 {
            var lst = GetGridData();
            var result = lst.ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);

}

[Purna]

I found a solution for that.

Thanks

[Alex Hajigeorgieva]

Hello, Purna, 

I am glad to hear that you found a solution. Would you mind sharing in case someone else comes across the same situation.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Purna]

Overloaded Action functions are needed.

 public ActionResult Products()

 {
            return View();
 }

public ActionResult Products([DataSourceRequest]DataSourceRequest request)
 {
            var lst = GetGridData();
            var result = lst.ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
}

[Alex Hajigeorgieva]

Hello, Purna,

Thank you once again for updating the forum.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik