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

Connect grid to MVC Controller Method

9 Answers 3296 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Rushikesh
Top achievements
Rank 1
Rushikesh asked on 02 Nov 2011, 06:58 PM
I have a method defined in the Controller of my MVC project that returns JSON data. How can I load this data into the grid.

Thanks

9 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 11 Nov 2011, 05:27 PM
Hello Rushikesh,

The discussed scenario is shown in our demos. Basically you need client-side binding: I suppose you need the second example:

http://demos.kendoui.com/grid/local-data.html

http://demos.kendoui.com/grid/remote-data.html (define json data-type instead of odata)

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 1
answered on 02 Dec 2011, 05:26 PM
The example seems to be using a webservice.

I have created my model using Open Access and have got my controller getting the data.  The bit of the Jigsaw I am missing is how to get the data into the kendo Grid.

public ActionResult _Select()
{
     return Json(GetUsers())
}

Any pointers would be great
0
Dimo
Telerik team
answered on 02 Dec 2011, 05:42 PM
Hi Robert,

The URL that returns the JSON should be defined as a read parameter of the client datasource, as shown in my previous reply.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 1
answered on 02 Dec 2011, 06:22 PM
Hi

I now have the grid showing but no data.

I have pasted the example below.
Thanks for your help. Im sure once I have this working then I will be well away, and will be more than happy to write an example.

<h2>Index</h2>
 
        <div id="example" class="k-content">
            <div id="grid"></div>
            <script>
                var dateRegExp = /^\/Date\((.*?)\)\/$/;
 
                function toDate(value) {
                    var date = dateRegExp.exec(value);
                    return new Date(parseInt(date[1]));
                }
 
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "Home/Read"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        UserId: { type: "number" },
                                        Username: { type: "string" },
                                        Password: { type: "string" },
                                        FirstName: { type: "string" },
                                        LastName: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 10,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 250,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns: [{
                            field: "UserId",
                            filterable: false
                        },
                        "Username",
                        "Password",
                        "FirstName",
                        "LastName"
 
 
                        ]
                    });
                });
            </script>
        </div>


The Controller is below

namespace kendoui.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
 
         
        public ActionResult Index()
        {
            return View();
        }
 
     
        public ActionResult Read()
        {
            return Json(GetUsers(), JsonRequestBehavior.AllowGet);
        }
         
         
 
 
        public IEnumerable<kendoui.myUsers> GetUsers()
        {
            var db = new dbContext();
 
            var data = db.myUsers.Select(u => new myUsers
            {
                UserId = u.UserId,
                Username = u.Username,
                Password = u.Password,
                FirstName = u.FirstName,
                LastName = u.LastName
 
            }).ToList();
 
 
            return (data);
 
        }
 
    }
}
0
Dimo
Telerik team
answered on 05 Dec 2011, 07:41 AM
Hi Robert,

The Grid datasource is configured to accept OData, while you are supplying JSON.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jesse
Top achievements
Rank 1
answered on 04 Apr 2012, 02:51 PM
Thank you for your replies so far: they have helped me bind my datasource to a controller action. Here's my related question: if I'm returning json anyway, is it possible to specify the entire configuration of the grid via that same controller action? I wish to specifically replace a razor foreach loop that is quite kludgy:

$(document).ready(function () {
        $("#grid").kendoGrid({
            columns: [
                {
                    field: "Import",
                    title: "Import?",
                    template: '<input type="checkbox" id="toggleCheck" name="togglebox" value="#=Import#"/>'
                },
                @foreach (var item in Model.MapFieldModel.ImportFields)
                {
                    <text>
                           
                    {
                        field: '@(item.Id)'
                        title: '@(item.Name)'
                    },
                   
                    </text>
                }
            ],
            dataSource: {
                type: "json",
                transport: {
                    read: "ImportWizard/MapFieldsDataSource" //need model specified?
                }
            }
        });
    });
If I could simply turn that into something like that following, that would be great!
$(document).ready(function () {
        $("#grid").kendoGrid("ImportWizard/MapFieldsDataSource");
    });
0
Dimo
Telerik team
answered on 04 Apr 2012, 03:13 PM
Hi Jesse,

The configuration / initialization code of a Kendo widget must be valid Javascript code. You can generate it according to your preferences. I am afraid you can't directly and automatically pull a configuration from a server action.

In the future we will provide MVC wrappers for Kendo UI, which will probably be something close to what you are after.

All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Srivatsa Manjunath
Top achievements
Rank 1
answered on 30 Sep 2020, 09:03 AM
I am trying to open the link you have shared with Rishikesh, but they give me a 404 error ,I am looking for a similar answer as Rishikesh.
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 02 Oct 2020, 06:02 PM

Hello Srivatsa,

As requested, the two live demos which Dimo is referring to have been updated to the following:

Binding to local data

Binding to remote data  - configure dataSource.transport.read.dataType as JSON instead of oData

            dataSource: {
                transport: {
                    read: "../Grid/Orders_Read",  //Controller/ActionResult
                    dataType: "json"
                },
                schema: {
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            Freight: { type: "number" },
                            ShipName: { type: "string" },
                            OrderDate: { type: "date" },
                            ShipCity: { type: "string" }
                        }
                    }
                },
                pageSize: 20
            },

For your reference, here is the ActionResult used in the Grid Controller:

		public ActionResult Orders_Read()
		{
			var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel
			{
				OrderID = i,
				Freight = i * 10,
				OrderDate = DateTime.Now.AddDays(i),
				ShipName = "ShipName " + i,
				ShipCity = "ShipCity " + i
			});

			return Json(result, JsonRequestBehavior.AllowGet);
		}

Regards,
Patrick
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Data Source
Asked by
Rushikesh
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Robert
Top achievements
Rank 1
Jesse
Top achievements
Rank 1
Srivatsa Manjunath
Top achievements
Rank 1
Patrick | Technical Support Engineer, Senior
Telerik team
Share this question
or