mvc controller grid databind

8 posts, 0 answers
  1. serdar
    serdar avatar
    7 posts
    Member since:
    Jan 2014

    Posted 31 Jan 2014 Link to this post

    hello this my controller
    How to bind data would ? and How can I bind Guid?

    example : ?
    {
                field: "GUID",
                title: ""   
            }, {

    // northwind database

     [WebMethod]
            [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
            public JsonResult GetCustomer()
            {
                _CustomerItems.AddRange(_CustomerProcess.GetCustomer());  
                JsonResult js = Json(_CustomerItems);   // ( 91 records ready )
                return js;
            }

    <html>
    <head>
    </head
    <body>
    <div id="grid"></div>
    </body>
    </html>


    function GridDataBind(modul) {
        
        $("#grid).kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 10
            },
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "CompanyName",
                title: "Company Name",
                width: 140
            }, {
                field: "ContactTitle",
                title: "Contact Title",
                width: 190
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 110
            }]
        });
    }
  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 04 Feb 2014 Link to this post

    Hello,

    If you wish to bind the Grid to data comming from an MVC controller then you should remove the odata type and change the URL to the corresponding action and controller. The request type should also be set to POST or you should allow GET to be used for JSON:
    JsonResult js = Json(_CustomerItems, JsonRequestBehavior.AllowGet);
    I would suggest to check this code-library project which demonstrates binding to MVC controller.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. serdar
    serdar avatar
    7 posts
    Member since:
    Jan 2014

    Posted 11 Feb 2014 Link to this post

    hello Can you give a better and simple example?...because I can not use server side mvc client side
    I'm using entity data model
    example 

    table fields

    Name
    LastName
    Age
    Adress
    Phone

     Controller
     
       [HttpPost]
            [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
            public JsonResult LoadData()
            {
                _CrewItems = _CrewProcess.GetCrews();                  
               return Json(_CrewItems);
            }

    Function class

       public List<t_Crew> GetCrews()
            {
                var query = from p in _DbEntities.t_Crew
                             select p;

                List <t_Crew> _CrewItems = query.ToList();
                         
                return _CrewItems;

            }


    javascript

    function DataBind() {

        var serviceURL = "/Base/LoadData";

        $.ajax({
            url: serviceURL,
            type: "POST",
            dataType: "json",
            async: true,
            timeout: 25000,
            contentType: "application/json; charset=utf-8",

            success: function (data) {
                GridDataBind(data);
            }
        });

    }
    function GridDataBind(gridData) {

           // What I will write here
    }


    thank you

  4. serdar
    serdar avatar
    7 posts
    Member since:
    Jan 2014

    Posted 11 Feb 2014 in reply to serdar Link to this post



    because I can not use server side 
    I'm using entity data model mvc client side
  5. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 13 Feb 2014 Link to this post

    Hi,

    You can use code similar to the one in the snippet below if you wish to use a separate request to load the data:
    function GridDataBind(gridData) {
        var element = $("#grid"),
            grid = element.data("kendoGrid");
        //if the grid was already initialize just set the dataSource data   
        if (grid) {
            grid.dataSource.data(gridData);
        } else {
            element.kendoGrid({
                dataSource: {
                    data: gridData,
                    pageSize: 10
                },
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    field: "CompanyName",
                    title: "Company Name",
                    width: 140
                }, {
                    field: "ContactTitle",
                    title: "Contact Title",
                    width: 190
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 110
                }]
            });   
        }  
    }


    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Samra
    Samra avatar
    13 posts
    Member since:
    Feb 2017

    Posted 28 May 2017 in reply to Daniel Link to this post

    Hi Telerik i have the same scenario i.e. using entityframework with mvc so what do i put into my gridData?

    i tried  $("#mapsDiv")
                .kendoGrid(
            {

                sortable: true,
                dataSource: {
                    data: @Model.students,
                    pageSize: 2
                }

    });

    which was incorrect

  7. Samra
    Samra avatar
    13 posts
    Member since:
    Feb 2017

    Posted 28 May 2017 in reply to Daniel Link to this post

    Hi iam also using entityframework in mvc..but this gave me error

    $("#mapsDiv")
                .kendoGrid(
            {

                sortable: true,
                dataSource: {
                    data: @Model.students,
                    pageSize: 2
                }

    }); 

    so what do i put in gridData?

  8. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1009 posts

    Posted 31 May 2017 Link to this post

    Hi Samra,

    As one of our Kendo UI Complete clients, you can utilise the UI for ASP.NET MVC extensions and return the result in the expected format as a DataSourceResult.

    You could either use the Razor Syntax or continue using JavaScript.

    1) Grid Binding with Razor: http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

    2) Grid Binding with JavaScript on the client:

     - return the data from the controller as JSON
     - use the schema to parse it on the client (in a similar fashion as shown in here with web API)

    ====================

    Finally, just some feedback for the question in the thread -  @Model.students call will not have any results(at the time the grid is initialized). The discussed approach in this thread is creating an $.ajax request and displaying the data on success. The below approach will also work:

    $.ajax({
       url: serviceURL,
       dataType: "json",
       contentType: "application/json; charset=utf-8",
       success: function (data) {
          GridDataBind(data);
       }
     });
     
    function GridDataBind(gridData) {
     $("#mapsDiv") .kendoGrid({
       sortable: true,
       dataSource: {
        data: gridData,
        pageSize: 2
       }
     });
    }

    Let me know if you need more help.

    Regards,
    Alex Hajigeorgieva
    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