Connect grid to MVC Controller Method

[Rushikesh]

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

[Dimo]

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

[Robert]

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

[Dimo]

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

[Robert]

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

 

        }

 

    }

}

[Dimo]

Hi Robert,

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

Regards,
Dimo
the Telerik team

[Jesse]

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

    });

[Dimo]

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

[Srivatsa Manjunath]

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.

[Patrick | Technical Support Engineer, Senior]

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