Bind a Kendo Grid dynamically using a datatable

[Rana]

Hi,

Please tell me how to bind a kendo grid dynamically using a datatable?

I am trying to use the following script but its returning few extra fields [EX: DataView, RowVersion, Row, IsNew, IsEdit] which I do not want to display in my grid.

@model System.Data.DataTable

@(Html.Kendo().Grid(Model).Name("GridExcel")
        .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Read_Excel", "Home")))
        .Columns(columns =>
        {
            if (Model != null)
            {
                foreach (System.Data.DataColumn column in Model.Columns)
                {
                    if (column.ColumnName != "DataView" && column.ColumnName != "RowVersion" && column.ColumnName != "Row" && column.ColumnName != "IsNew" && column.ColumnName != "IsEdit")
                    {
                        columns.Bound(column.DataType, column.ColumnName);
                    }
                }
            }                 
        })
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
)

[Petur Subev]

Hello Rana,

I suggest you to take a look at this code library which covers how to properly bind to DataTable.

Regards,
Petur Subev
the Telerik team

[Rana]

Hi Petur,

I try to open this project in VS 2010 but its denying to open it.

Here is the message I received:

"The project type is not supported by this installation."

Thank You
Rana

[Petur Subev]

Hello Rana,

The project is created with Visual Studio 2012. Basically you could copy-paste the Views/Controllers code to a 2012 project created with the Kendo VS Extensions template.

Regards,
Petur Subev
the Telerik team

[Raju]

I got this one. But how to do the create , update and delete functions on this type of Kendo grid. please  give me a sample code for this. 

[Mike]

Hello,

Question about the example provided that shows how to do binding to a datatable. The example is using ajax - is an Ajax call necessary for this to work?  Can we do server side binding when binding to a data table?

Thanks,

Mike

 

[Dimiter Topalov]

Hi Mike,

Using server side rendering while binding to a data table is possible, as long as the scenario does not involve ASP.NET MVC Core, where it is not supported.

Regards,
Dimiter Topalov
Telerik by Progress

[Mike]

Hi Dimiter - Thanks for the reply. I'm not using MVC Core - Do you have an example showing this?  I tried binding a dynamic datatable using server side binding using the BindTo property and using DataTable.AsEnumerable() but it throws an error.  I do have it working with an Ajax request but this solution requires me to create the DataTable once to create the grid then the Ajax call needs to re-create the same DataTable - so to get around the re-creation part I stick the DataTable in Session but I'd like to avoid this Ajax call all together if I can get server-side binding to work.

Thanks,
Mike

 

[Dimiter Topalov]

Hello Mike,

We do not have a complete running example, demonstrating the described scenario, but you can use the following example as a starting point:

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/how-to/Binding/grid-bind-to-datatable

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/binding-to-datatable

... and adjust it by making the following changes:

- remove the cast to <dynamic>, and pass the data table to the Grid constructor, e.g.:

@(Html.Kendo().Grid((IEnumerable<KendoGridServerBinding.Models.Product>)ViewBag.Products)...

- remove the .Ajax() call in the DataSource configuration:

.DataSource(dataSource => dataSource
        .Ajax()

In general, mix the approaches, demonstrated in the example above, with the ones, described here:

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/overview#server-binding

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Mike]

Thanks for the examples - but in this case, unless I'm missing something, this won't work for dynamic datatables where you don't know the column structure until runtime.  In my case I don't have a model - all I have is a datatable that will have a varying number of columns. The example you provided assumes you have a model.

So for now, I have this working using Ajax.  I don't believe using server-side binding with a dynamic datatable is possible (no model - just dynamic columns in a datatable) but please correct me if I'm wrong.

Thanks,
Mike

 

[Dimiter Topalov]

Hello Mike,

Using a specific type is not required, you can pass the data table directly to the Grid() method, and cast it to to DataTable e.g.:

@(Html.Kendo().Grid((System.Data.DataTable)Model.Columns).Name()...

It is not required the data table to come from the model, it can also come from the ViewData (for example).

Then in the columns configuration you will need to loop through the columns of the data table, and build the corresponding settings, using the fluent API, e.g.:

.Columns(columns =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
var c = columns.Bound(column.ColumnName);
if (column.ColumnName == "UnitPrice")
{
c.ClientFooterTemplate("sum:#:sum#").ClientGroupFooterTemplate("sum:#:sum#");
}
else if (column.ColumnName == "UnitsInStock")
{
c.ClientFooterTemplate("max:#:max#").ClientGroupFooterTemplate("avg:#:average#");
}
}
columns.Command(cmd=>cmd.Edit());
    })

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress