Connect grid to MVC Controller Method

8 posts, 0 answers
  1. Rushikesh
    Rushikesh avatar
    1 posts
    Member since:
    Nov 2011

    Posted 02 Nov 2011 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 11 Nov 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Robert
    Robert avatar
    9 posts
    Member since:
    May 2011

    Posted 02 Dec 2011 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 02 Dec 2011 Link to this post

    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!
  6. Robert
    Robert avatar
    9 posts
    Member since:
    May 2011

    Posted 02 Dec 2011 Link to this post

    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);
     
            }
     
        }
    }
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 05 Dec 2011 Link to this post

    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!
  8. Jesse
    Jesse avatar
    4 posts
    Member since:
    Apr 2012

    Posted 04 Apr 2012 Link to this post

    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");
        });
  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 04 Apr 2012 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready