This is a migrated thread and some comments may be shown as answers.

Json string is displayed instead of Forum

12 Answers 261 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Purna
Top achievements
Rank 1
Purna asked on 16 Apr 2019, 02:10 AM

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}

12 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 17 Apr 2019, 08:20 PM
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
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.
0
Purna
Top achievements
Rank 1
answered on 17 Apr 2019, 11:42 PM

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.

0
Aditi
Top achievements
Rank 1
answered on 19 Apr 2019, 04:36 AM

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?

0
Aditi
Top achievements
Rank 1
answered on 19 Apr 2019, 07:15 AM
Thanks Alex! I figured it out. There was an issue with my route.config! 
0
Alex Hajigeorgieva
Telerik team
answered on 19 Apr 2019, 01:12 PM
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
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.
0
Purna
Top achievements
Rank 1
answered on 23 Apr 2019, 01:57 AM

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

0
Alex Hajigeorgieva
Telerik team
answered on 23 Apr 2019, 05:32 AM
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:


Kind Regards,
Alex Hajigeorgieva
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.
0
Purna
Top achievements
Rank 1
answered on 23 Apr 2019, 10:53 PM

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

}

0
Purna
Top achievements
Rank 1
answered on 23 Apr 2019, 11:27 PM

I found a solution for that.

Thanks

0
Alex Hajigeorgieva
Telerik team
answered on 25 Apr 2019, 12:41 PM
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
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.
0
Purna
Top achievements
Rank 1
answered on 25 Apr 2019, 11:12 PM

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);
}

0
Alex Hajigeorgieva
Telerik team
answered on 29 Apr 2019, 08:21 AM
Hello, Purna,

Thank you once again for updating the forum.

Kind Regards,
Alex Hajigeorgieva
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.
Tags
Grid
Asked by
Purna
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Purna
Top achievements
Rank 1
Aditi
Top achievements
Rank 1
Share this question
or