Bind a Kendo Grid dynamically using a datatable

1 Answer 1753 Views
Grid
Rana
Top achievements
Rank 1
Rana asked on 12 Dec 2012, 04:56 PM
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()
)

1 Answer, 1 is accepted

Sort by
0
Accepted
Petur Subev
Telerik team
answered on 13 Dec 2012, 12:23 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Rana
Top achievements
Rank 1
commented on 13 Dec 2012, 03:21 PM

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
Telerik team
commented on 15 Dec 2012, 09:52 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Raju
Top achievements
Rank 1
commented on 09 Apr 2013, 07:08 AM

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
Top achievements
Rank 1
commented on 06 Oct 2016, 07:09 PM

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
Telerik team
commented on 10 Oct 2016, 12:26 PM

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
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Mike
Top achievements
Rank 1
commented on 10 Oct 2016, 12:32 PM

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
Telerik team
commented on 12 Oct 2016, 07:36 AM

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
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Mike
Top achievements
Rank 1
commented on 24 Oct 2016, 01:35 PM

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
Telerik team
commented on 26 Oct 2016, 11:26 AM

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
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
Tags
Grid
Asked by
Rana
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or