CODEWITHSUNDEEP
asp.net-mvcviewmodeltelerikkendo-grid
Scar
Scar

Reputation: 755

How do I use the model as a datasource for Kendo UI grid?

I am only getting a grid with no data inside. I am new to MVC and have not been able to find how to add data into the grid using just the model that is passed to the view page. Below is the code that I have used

Controller code:

  public ActionResult List()
    {
        List<CustomerModel> list = new List<CustomerModel>();
        for (int i = 0; i < 7; i++)
        {
            CustomerModel model = new CustomerModel();
            model.Id = 1;
            model.Name = "Alice";
            model.Address = "Blk "+i;
            model.PostalCode = ""+i+i+i;
            model.Email = i+"@yahoo.com";
            model.TelephoneNumber = i + i + i + i + i + i+"";
            list.Add(model);
        }


        return View(list);
    }
    public ActionResult Read()
    {
        List<CustomerModel> list = new List<CustomerModel>();
        for (int i = 0; i < 7; i++)
        {
            CustomerModel model = new CustomerModel();
            model.Id = 1;
            model.Name = "Alice";
            model.Address = "Blk " + i;
            model.PostalCode = "" + i + i + i;
            model.Email = i + "@yahoo.com";
            model.TelephoneNumber = i + i + i + i + i + i + "";
            list.Add(model);
        }


        return View(list);
    }

View Code:

@using TKMVC.Models
@model IEnumerable<CustomerModel>


@(Html.Kendo().Grid<CustomerModel>()
    .Name("grid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false);
        })
        .Read(read => read.Action("Read", "Home"))
    )
)
<div class="clearfix"></div>

Upvotes: 0

Views: 2523

Answers (1)

bdongus
bdongus

Reputation: 678

You are mixing local and ajax data binding and you haven't defined any columns in the grid.

Try passing the model into the grid, define grid columns and remove the read request from your data source. Most probably you need to turn off server operations in your case.

Your grid statement should then look like this:

@(Html.Kendo().Grid<CustomerModel>(Model)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(m => m.Id);
        columns.Bound(m => m.Name);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false);
        })
    )
)

Upvotes: 2

Related Questions