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

mvc controller grid databind

7 Answers 911 Views
Grid
This is a migrated thread and some comments may be shown as answers.
serdar
Top achievements
Rank 1
serdar asked on 31 Jan 2014, 08:10 AM
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
        }]
    });
}

7 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 04 Feb 2014, 08:08 AM
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!
0
serdar
Top achievements
Rank 1
answered on 11 Feb 2014, 09:02 AM
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

0
serdar
Top achievements
Rank 1
answered on 11 Feb 2014, 09:04 AM


because I can not use server side 
I'm using entity data model mvc client side
0
Daniel
Telerik team
answered on 13 Feb 2014, 09:20 AM
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!
0
Samra
Top achievements
Rank 1
answered on 29 May 2017, 04:09 AM

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

0
Samra
Top achievements
Rank 1
answered on 29 May 2017, 04:17 AM

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?

0
Alex Hajigeorgieva
Telerik team
answered on 31 May 2017, 06:17 AM
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.
Tags
Grid
Asked by
serdar
Top achievements
Rank 1
Answers by
Daniel
Telerik team
serdar
Top achievements
Rank 1
Samra
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or