Kendo Grid returning json only when accessing server

[Andreas]

So, I have this grid code (that i got from one of your examples), that Ive been trying out, it works find when paging using Ajax.

I have now tried turning off javascript functionality in the browser, to investigate the fallback functionality of the grid. When paging I then get the clean JSON text in my browser, nothing shows of my original page. How can I fix so that my code works well both with javascript datagets and without?

Index.cshmtl

@model IEnumerable<KendoUIMvc.Models.Product>



<div id="kjsimpleGrid">


    @(Html.Kendo().Grid<KendoUIMvc.Models.Product>(Model)
        .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(product => product.ProductID).Width(100);
                columns.Bound(product => product.ProductName);
                columns.Bound(product => product.UnitsInStock).Width(250);
                columns.Command(commands =>
                {
                    commands.Edit(); // The "edit" command will edit and update data items
                    commands.Destroy(); // The "destroy" command removes data items
                }).Title("Commands").Width(200);
            })
            .ToolBar(toolbar => toolbar.Create()) // The "create" command adds new data items
            .Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode
            .DataSource(dataSource =>
                dataSource.Ajax()
                  .Model(model =>
                  {
                      model.Id(product => product.ProductID); // Specify the property which is the unique identifier of the model
                      model.Field(product => product.ProductID).Editable(false); // Make the ProductID property not editable
                  })
                  .Create(create => create.Action("Products_Create", "Home")) // Action invoked when the user saves a new data item
                  .Read(read => read.Action("Products_Read", "Home"))  // Action invoked when the grid needs data
                  .Update(update => update.Action("Products_Update", "Home"))  // Action invoked when the user saves an updated data item
                  .Destroy(destroy => destroy.Action("Products_Destroy", "Home")) // Action invoked when the user removes a data item
            )
    .Pageable()
        )

</div>



Homecontroller.cs

public ActionResult Index()
        {

            //List<Product> products = new List<Product>();

            //foreach (Product product in this.productsDB.Products)
            //{
            //    products.Add(product);
            //}

            var products = productsDB.Products;

            //{
            //    Name = genre,
            //    Albums = this.storeDB.Albums.ToList()
            //};
                return View(products);


        }


        public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
        {
            using (var northwind = new NorthwindEntities())
            {
                IQueryable<Product> products = northwind.Products;
                DataSourceResult result = products.ToDataSourceResult(request);
                return Json(result, JsonRequestBehavior.AllowGet);
            }
        }

[Daniel]

Hello Andreas,

This will require to return the Grid View with the data for non Ajax requests from the read action e.g.

public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
{
    using (var northwind = new NorthwindEntities())
    {
        IQueryable<Product> products = northwind.Products;
        if (Request.IsAjaxRequest())
        {
            return Json(products.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
        else
        {
            return View("Index", products);
        }
    }
}

Regards,
Daniel
Telerik

[Divya]

Hello, Instead of using Entity Framework I need the data from JSON result, How can we achieve the same thing with JSON result being the datasource? 

[Konstantin Dikov]

Hi Veda,

You could deserialize the JsonResult and pass the collection with the data to the ToDataSourceResult method:

• https://stackoverflow.com/questions/26533796/jsonconvert-deserialize-jsonresult-from-mvc-action

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik