Set DataSource to Razor page model

[Mario]

Hi, I want to create a shared data source that I can then apply filtering to. This data source should be initialised from a property on the Razor page model.

With a Grid you can do this:

Html.Kendo().Grid(Model.Devices)

But I can't figure out the equivalent for the DataSource. This is not allowed...

Html.Kendo().DataSource<DeviceAggregate>(Model.Devices)
                .Name("devicesDataSource")

 

[Stoyan]

Hello Mario,

The DataSource in the Telerik UI for ASP.NET Core doesn't support binding to local data by itself.

To achieve the desired behavior I recommend utilizing a Kendo UI for jQuery DataSource. You can convert the List of Devices into a JavaScript array and then bind the array to the client-side DataSource:

var data = @Html.Raw(JsonSerializer.Serialize(Model.Devices));
var dataSource1 = new kendo.data.DataSource({
                        pageSize: 10,
                        data: data
});

Then bind the dataSource1 instance to the Grid:

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    ...
    .DataSource("dataSource1")
)

I hope the suggested approach is useful.

Regards,
Stoyan
Progress Telerik

[Reza]

where should we put this code? it isn't working in document ready function:

var data = @Html.Raw(JsonSerializer.Serialize(Model.Devices));
var dataSource1 = new kendo.data.DataSource({
                        pageSize: 10,
                        data: data
});

[Anton Mironov]

Hi Reza,

Thank you for the details provided.

Feel free to place the code in the global scope of the JavaScript.

 

Kind Regards,
Anton Mironov