This is a migrated thread and some comments may be shown as answers.

Dynamic Grid with DataTable

13 Answers 2261 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Robert Madrian asked on 21 Mar 2017, 01:38 PM

Hello,

It seems that there is no Extension method in Kendo.Mvc.Extensions for MVC Core to use Dynamic Grid with DataTable?

"DataTable" does not contain a definition for "ToDataSourceResult", and the overloading of the optimal extension method "QueryableExtensions.ToDataSourceResult (IEnumerable, DataSourceRequest)" requires an IEnumerable

how to use a datatable in ASP.NET MVC Core Version of the grid?

public ActionResult Read([DataSourceRequest] DataSourceRequest request)

{

DataTable products = Products();

return Json(products.ToDataSourceResult(request));

}

@(Html.Kendo().Grid<dynamic>()

.Name("Grid")

.Columns(columns =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{

var c = columns.Bound(column.ColumnName);

}

})

.Pageable()

.Sortable()

.Filterable()

.Groupable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

var id = Model.PrimaryKey[0].ColumnName;

model.Id(id);

foreach (System.Data.DataColumn column in Model.Columns)

{

var field = model.Field(column.ColumnName, column.DataType);

if (column.ColumnName == id)

{

field.Editable(false);

}

})

.Read(read => read.Action("Read", "Home"))

)

13 Answers, 1 is accepted

answered on 24 Mar 2017, 08:45 AM

Hello Robert,

Previously the ASP.NET Core does not support DataTables, but currently, they are considering adding it.

Please refer to the following resources for more information:

https://blogs.msdn.microsoft.com/dotnet/2016/02/10/porting-to-net-core/

https://github.com/dotnet/corefx/issues/8622

Once ASP.NET Core allows using the DataTables please log a request in our feedback portal and if possible we will add the support for the Kendo UI ASP.NET Core Grid:

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback

Regards,
Stefan
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 29 Mar 2017, 11:56 AM

Hello Robert,

As mentioned in the previous reply the current issue is not directly related to the Kendo UI Grid as it is based on the ASP.NET Core support of DataTables.

In general, the MVC Grid can be dynamically bound to columns using the two approaches with DataTables and a list of dynamic objects:

http://www.telerik.com/support/code-library/binding-to-a-collection-of-dynamic-objects

As the ASP.NET Core support for these features is changed, the Kendo UI team currently cannot affect their implementation.

Regards,
Stefan
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.

answered on 03 Apr 2017, 06:38 AM

Hello Robert,

I can suggest checking the following thread containing a runnable example which demonstrates how to generate the columns dynamically based on the data:

http://www.telerik.com/forums/binding-kendoui-grid-to-dynamic-column-and-values-kendo-ui-complete-resources-buy-try

Also, an array can be generated in a variable and then this variable can be used for the Grid columns. If the columns have to be changed at runtime programmatically, the setOptions method can be used:

http://jsfiddle.net/darrenarbell/4HTEr/

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions

Regards,
Stefan
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.

answered on 02 Jan 2018, 08:09 AM

Hello, Patricio,

A dynamic Grid can be created using the Kendo UI for ASP.NET Core Grid.

Please advise the issues that occur with the suggested approach using the AutoGenerate property?

Also, the jQuery approach can be used if there is a limitation with the ASP.NET Core Grid:

https://www.telerik.com/blogs/dynamic-data-in-the-kendo-ui-grid

If additional assistance is needed, please provide more details about the current implementation, so we can provide information best suited for it.

Regards,
Stefan
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 02 Jan 2018, 02:47 PM

Hello Stefan,

I have this code:

public IActionResult DynamicGrid([DataSourceRequest] DataSourceRequest request)

{

DataTable dt = GetQuery();

return Json(dt);

}

@model System.Data.DataTable

<div>

@(Html.Kendo().Grid<dynamic>()

.Name("DynamicGrid")

.Columns(c =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{

c.Bound(column.ColumnName);

}

})

.Pageable()

.Sortable()

.Filterable()

.Scrollable()

.DataSource(ds => ds

.Ajax()

.Model(model =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{

model.Field(column.ColumnName, column.DataType);

}

})

.PageSize(100)

.Read(r => r.Action("DynamicGrid", "Grilla"))

))

</div>

Patricio