This is a migrated thread and some comments may be shown as answers.
Kendo Grid returning json only when accessing server
3 Answers 71 Views
This is a migrated thread and some comments may be shown as answers.
Andreas
Top achievements
Rank 1
Andreas asked on 24 Jan 2014, 02:43 PM
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);
            }
        }


3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 28 Jan 2014, 12:09 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Divya
Top achievements
Rank 1
answered on 11 Aug 2017, 09:18 PM
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? 
0
Konstantin Dikov
Telerik team
answered on 15 Aug 2017, 12:22 PM
Hi Veda,

You could deserialize the JsonResult and pass the collection with the data to the ToDataSourceResult method:
Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Andreas
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Divya
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or