Bind a Kendo Grid dynamically using a datatable

11 posts, 1 answers
  1. Rana
    Rana avatar
    3 posts
    Member since:
    Nov 2012

    Posted 12 Dec 2012 Link to this post

    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()
    )
  2. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 13 Dec 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Rana
    Rana avatar
    3 posts
    Member since:
    Nov 2012

    Posted 13 Dec 2012 Link to this post

    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
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 15 Dec 2012 Link to this post

    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!
  6. Raju
    Raju avatar
    2 posts
    Member since:
    Mar 2013

    Posted 09 Apr 2013 Link to this post

    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. 
  7. Mike
    Mike avatar
    9 posts
    Member since:
    Apr 2011

    Posted 06 Oct in reply to Petur Subev Link to this post

    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

     

  8. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 10 Oct Link to this post

    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.
  9. Mike
    Mike avatar
    9 posts
    Member since:
    Apr 2011

    Posted 10 Oct in reply to Dimiter Topalov Link to this post

    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

     

  10. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 12 Oct Link to this post

    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.
  11. Mike
    Mike avatar
    9 posts
    Member since:
    Apr 2011

    Posted 24 Oct in reply to Dimiter Topalov Link to this post

    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

     

  12. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 26 Oct Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready