Kendo Grid returning json only when accessing server

4 posts, 0 answers
  1. Andreas
    Andreas avatar
    3 posts
    Member since:
    Jan 2014

    Posted 24 Jan 2014 Link to this post

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


  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 28 Jan 2014 Link to this post

    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!
  3. Divya
    Divya avatar
    7 posts
    Member since:
    Apr 2017

    Posted 11 Aug 2017 in reply to Daniel Link to this post

    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? 
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 15 Aug 2017 Link to this post

    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.
Back to Top