Binding data source in kendo grid on mvc

Question

First of all this is my first work using kendo ui. In work i have some data from database, i would like to replace my mvc webgrid into impressive kendo grid. I have created a list from database and iam trying to bind into kento grid. After setting data source. Still the grid remains empty.

 public ActionResult Index()
        {
            SqlConnection sqcon = new SqlConnection(conn);
            SqlCommand cmd = new SqlCommand();
            SqlDataAdapter sd = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            cmd.Connection = sqcon;
            cmd.CommandText = "sps_selectemp";
            cmd.CommandType = System.Data.CommandType.StoredProcedure;

            sqcon.Open();
            sd.Fill(dt);
            sqcon.Close();
            List<EmployeeDetails> StudentList = new List<EmployeeDetails>();
            foreach (DataRow dr in dt.Rows)
            {
                EmployeeDetails st = new EmployeeDetails();
                st.ID = Convert.ToInt32(dr["EmpID"]);
                st.FirstName = dr["FirstName"].ToString();
                st.SecondName = dr["SecondName"].ToString();
                st.Email = dr["Email"].ToString();
                st.Gender = dr["Gender"].ToString();
                st.Mobile = dr["Mobile"].ToString();
                st.State = dr["State"].ToString();
                st.City = dr["City"].ToString();
                st.Country = dr["Country"].ToString();


                StudentList.Add(st);
            }
            return View(StudentList.ToList());
        }

Then i have added a view for corresponding view

    @model List<webkendo.Models.EmployeeDetails>
    @(Html.Kendo().Grid<webkendo.Models.EmployeeDetails>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.FirstName);

                columns.Bound(c => c.SecondName);
                columns.Bound(c => c.Email);
                columns.Bound(c => c.Gender).Width(150);
            })
            .HtmlAttributes(new { style = "height: 550px;" })
            .Scrollable()
            .Groupable()
            .Sortable()

            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("getusers", "Home"))
                .PageSize(20)
            )
    )

Still tried different methods

 public List<EmployeeDetails> getusers()
        {
            SqlConnection sqcon = new SqlConnection(conn);
            SqlCommand cmd = new SqlCommand();
            SqlDataAdapter sd = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            cmd.Connection = sqcon;
            cmd.CommandText = "sps_selectemp";
            cmd.CommandType = System.Data.CommandType.StoredProcedure;

            sqcon.Open();
            sd.Fill(dt);
            sqcon.Close();
            List<EmployeeDetails> StudentList = new List<EmployeeDetails>();
            foreach (DataRow dr in dt.Rows)
            {
                EmployeeDetails st = new EmployeeDetails();
                st.ID = Convert.ToInt32(dr["EmpID"]);
                st.FirstName = dr["FirstName"].ToString();
                st.SecondName = dr["SecondName"].ToString();
                st.Email = dr["Email"].ToString();
                st.Gender = dr["Gender"].ToString();
                st.Mobile = dr["Mobile"].ToString();
                st.State = dr["State"].ToString();
                st.City = dr["City"].ToString();
                st.Country = dr["Country"].ToString();


                StudentList.Add(st);
            }
            return StudentList;
        }

What am i doing wrong

Answer 1

First, decide if you are going to fetch all your data server side and present it in the grid, or if you are going to use AJAX with paging, etc. which is better for longer lists. You are trying to do both.

For the first, you need to get rid of the Read and set ServerOperation(false):

// Your model is the list of data
@(Html.Kendo().Grid(Model)
...
// Tell kendo you are providing the data
.DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(false)
    .PageSize(20)
    // No Read since you provide all the data up front
 )

For the second option:

// Tell kendo the type you are going to fetch in the Read
@(Html.Kendo().Grid<EmployeeDetails>()
...
// Tell kendo you want data retrieved via AJAX
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("getusers", "Home"))
    .PageSize(20)
 )

Now create your read action to return JSON and take advantage of Kendo's DataSourceRequest that handles paging, filtering, sorting, etc.

public JsonResult getusers([DataSourceRequest] DataSourceRequest request)
{
    // The AJAX generally works with IQueryables so that it can select a 
    // page full or records at a time. Entity Framework makes this easy.
    // You would need to amend for ADO.NET with stored proc.
    var employees = _db.Employees;
    DataSourceResult response = employees.ToDataSourceResult(request);
    return Json(response, JsonRequestBehavior.AllowGet);
}