Как использовать модель в качестве источника данных для сетки Kendo UI?

Question

Я получаю только сетку без данных внутри. Я новичок в MVC и не смог найти, как добавить данные в сетку, используя только модель, которая передается на страницу просмотра. Ниже приведен код, который я использовал

Код контроллера:

  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);
    }

Просмотреть код:

@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>

Answer 1

Вы смешиваете локальную и ajax-привязку данных, и вы не определили столбцы в сетке.

Попробуйте передать модель в сетку, определить столбцы сетки и удалить запрос на чтение из вашего источника данных. Скорее всего, вам нужно отключить серверные операции в вашем случае.

Ваш оператор грид должен выглядеть следующим образом:

@(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);
        })
    )
)