Populating a grid

[Tomás]

I'm trying to use a Kendo grid for the first time: Here's the code for the grid:

@model IEnumerable<SustIMS.Models.ModelTest>

<div id="clientsDb">
@(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Genre).Width(140);
columns.Bound(c => c.Title).Width(190);
columns.Bound(c => c.ReleaseDate);
columns.Bound(c => c.Price).Width(110);
})
.HtmlAttributes(new { style = "height: 90%;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "MasterDataController"))
)
)
</div>

<style scoped>
#clientsDb {
width: 95%;
height: 95%;
margin: 20px auto 0;
padding: 50px 4px 0 4px;
background: url('@Url.Content("~/content/web/grid/clientsDb.png")') no-repeat 0 0;
}
</style>

This displays the grid without any data in it. I've created a test model and am trying to add data like this in the controller:

public void Read()
{
ModelTest mt = new ModelTest();
mt.Title = "This is the title";
mt.Price = 10.5m;
}

This doesn't show any data in the grid. How can I pass data into it?
And does it have to come from a model or can it be added in a custom way?

[Dimiter Madjarov]

Hello Joao,


The exact implementation depends on whether you would like to configure the Grid with server or ajax binding. As a good starting point, I would suggest to check the following documentation pages, which describe both of the approaches in a step by step manner:
Server binding
Ajax binding

The Grid could be bound to remote data or local data. I assume that the second one is the type of configuration, you are going for.

Please take a look at the linked documentation pages and demos and let me know if I could assist further.

Regards,
Dimiter Madjarov
Telerik

 

 

[Tomás]

Hi,

as I stated, this is the first time using a telerik control, specifically, the grid.

Even after reading about server and local binding, I still can't make my grid to show data.

I get the data via webservices, I call them and I retrieve all the data into some variable. Then, I want to pass it to the grid.

What I've tried now:

MODEL:

    public class ModelTest
    {
        public int ID { get; set; }
        public string Code { get; set; }
        public string Description { get; set; }
        
    }

THE CONTROLLER METHOD:

public ActionResult Show()
        {
            var list = new List<ModelTest>();
            ModelTest mt1 = new ModelTest { ID = 1, Code = "cod1", Description = "test1" };
            ModelTest mt2 = new ModelTest { ID = 2, Code = "cod2", Description = "test2" };

            list.Add(mt1);
            list.Add(mt2);

            return Json(list);
        }

and, THE VIEW:

@model IEnumerable<SustIMS.Models.ModelTest>

<div id="grid">
    @(Html.Kendo().Grid(Model)
        .Name("datagrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ID).Width(140);
            columns.Bound(c => c.Code).Width(140);
            columns.Bound(c => c.Description).Width(190);
            
        })
        .HtmlAttributes(new { style = "height: 90%;" })
        .Scrollable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Read", "MasterData"))
        )
    )
</div>

What am I doing wrong? Please help, I'm finding this hard despite the documentation.

Thank you

[Dimiter Madjarov]

Hi Joao,


In the current case I would suggest you the following approach for local data binding. The Grid data is populated via a Model, the dataSource is configured as Ajax with the server operations set to false, so that client side operations as sorting, paging etc. are available. The transport read configuration is not required in this case, since the data is already populated.
E.g.

@(Html.Kendo().Grid(Model)
    .Name("datagrid")
    ...
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
    )
)

Regarding the controller, return a Json result is not required. You could only use one Action for returning the View and pass the model required for the Grid.
E.g.

public ActionResult Show()
{
    var list = new List<ModelTest>();
    ...

    return View(list);
}

Regards,
Dimiter Madjarov
Telerik

 

 

[Tomás]

That didn't work.

I managed to make it work though, like this:

The datagrid:

<div id="datagrid">
        @(Html.Kendo().Grid(Model)
            .Name("datagrid_Concessoes")
            .Columns(columns =>
            {
                columns.Bound(c => c.Id).Width(70);
                columns.Bound(c => c.Code);
                columns.Bound(c => c.Description);
                columns.Bound(c => c.CreationDate);
                columns.Bound(c => c.CreationUser);
            })
            .Scrollable()
            .Sortable()
            .Selectable()
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("GetAutoEstradas", "MasterData"))
            )
        )
    </div>

And the controller:

public ActionResult GetAutoEstradas([DataSourceRequest]DataSourceRequest request)
{
    var list = new List<ModelTest>();

    ModelTest mt1 = new ModelTest { Id = 1, Code = "xpto1", Description = "Auto-Estrada A" };
    ModelTest mt2 = new ModelTest { Id = 2, Code = "xpto2", Description = "Auto-Estrada B" };

    list.Add(mt1);
    list.Add(mt2);

    return Json(list.ToDataSourceResult(request));
}

And it works now. Setting `return View(list)` doesn't bring any data to the grid.

Thanks anyway