Grid seems to ignore MemberType on DataTable Bound()

[Rene]

I working with the telerik grid a since a few weeks.

It seems that the Bound() Method of the MVC Grid ignores the Type when I write Bound(type, name).

When I have a model binded grid, it works perfectly:

    @(Html.Kendo().Grid<Web.Models.Consumption.PDCAModel.PDCAActionplanModel>()
                            .Name("PDCAActionplanGrid")
                            .NoRecords(@ResourcesLocal.Resources_Energy_PDCA.NoActionplanAvailable)
                            .Columns(col =>
                            {
                                col.Bound(x => x.PlanCreatedAt).Title(ResourcesLocal.Resources_Energy_PDCA.PlanCreatedAt).Width(200).Format("{0:dd.MM.yyyy}");
                                col.Bound(x => x.PlanstringTranslated).Title(ResourcesLocal.Resources_Energy_PDCA.Planstring);

                            })
                            .Events(e => e.DataBound("PDCAActionplanGrid_DataBound"))
                            .ClientDetailTemplateId("template")
                            .DataSource(ds => ds
                                .Ajax()
                                .Read(read => read.Action("DataSourcePDCAActionplanGrid", "Consumption"))
                                )

                        )

Here my column "PlanCreatedAt" is a datetime which will be shown perfectly.

Now I want to use a dynmic binded grid with a DataTable as DataSource:

     @(Html.Kendo().Grid<dynamic>()
            .Name("CompilationLogicGrid")
            .NoRecords()
            .Columns(col =>
            {
                col.Bound(typeof(DateTime), "Date").Filterable(false).Title(ResourcesGlobal.GlobalResources.Datum).Format("0:dd.MM.yyyy");

            })
            .Filterable(filtering => filtering.Enabled(true))
            .Sortable()
            .DataSource(dataSource => dataSource.Ajax()
                    .Read(read => read.Action("DataSource_CompilationLogicGrid", "Consumption"))
                    .Sort(x => x.Add("Date").Descending()))
        )

There it seems, that the binding will completly ignored. The output is either a plain string which I wrote in the format 0:dd.MM.yyyy or a  the plain output of the json response

The JSON Response is on both grids exactly the same: /Date(xxxxxxxxxx)/

[Viktor Tachev]

Hi Rene,

Please check the following threads that discuss how the functionality can be implemented.

• http://www.telerik.com/forums/kendo-mvc-grid---data-binding-to-dynamic-object-model#vMmmPmdRZke9anNKhf6FbQ
• http://www.telerik.com/forums/kendo-mvc-grid-ajax-custom-binding-to-dynamic-resultset#MCnx2IIvw0e1sQxmsJo86g

There are also couple of code-libraries that you can use as a starting point.

• https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/binding-to-datatable
• http://www.telerik.com/support/code-library/binding-to-a-collection-of-dynamic-objects

Regards,
Viktor Tachev
Telerik

[Rene]

Hi Vitkor,

 thank you for this feedback.
At the moment it seems that there is no possible solution.

The problem is, again, that there is no way to ​tell a coloum which datatype is has.
In a support ticket a Telerik a helpdesk member told me, that Bound(Type, Name) is a old, obsolete Method and doesnt work any more.
So in fact I can use modelbinding Bound(x => x.Name) or Bound("Name"), but I have no chance to tell the datatype.

I found a way to achieve, that a date is correctly displayed:

 <div style="margin:10px;">
        @(Html.Kendo().Grid<dynamic>()
            .Name("CompilationLogicGrid")
            .NoRecords()
            .Columns(col =>
            {
                col.Bound("Date").Filterable(false).Title(ResourcesGlobal.GlobalResources.Datum).ClientTemplate("#=kendo.toString(kendo.parseDate(data.Date), 'dd.MM.yyyy')#"); ;
                for (int i = 0; i < Model.Grid.Columns.Count; i++)
                {
                    var index = i;
                    col.Group(group => group.Columns(colGroup =>
                    {
                        for (int j = 0; j < Model.Grid.Columns[i].Columns.Count; j++)
                        {
                            var index2 = (i * Model.Grid.Columns[i].Columns.Count) + (j);

                            var bound = Model.Grid.Columns[i].RawIdentifier + Model.Grid.Columns[i].Columns[j].RawIdentifier;
                            var type = Model.Grid.Columns[i].Columns[j].Type;
                            if (type == typeof(DateTime))
                            {
                                colGroup.Bound(bound).Title(Model.Grid.Columns[i].Columns[j].Title)
                                .ClientTemplate("<nobr>" + "#=kendo.toString(kendo.parseDate("+ bound + "), 'dd.MM.yyyy hh:mm')#" + "</nobr>"); ;

                            }
                            else if (type == typeof(Double))
                            {
                                colGroup.Bound(bound).Title(Model.Grid.Columns[i].Columns[j].Title)
                                .ClientTemplate("<div style='text-align:right;'>" + "#=kendo.toString(parseFloat(" + bound + ").toFixed(2))#" + "</div>"); ;
                            }
                            else
                            {
                                colGroup.Bound(bound).Title(Model.Grid.Columns[i].Columns[j].Title);
                            }

                        }
                    }).Title(Model.Grid.Columns[i].Title));
                }
            })
            .Filterable(filtering => filtering.Enabled(true))
            .Sortable()
            .DataSource(dataSource => dataSource.Ajax()
                    .Read(read => read.Action("DataSource_CompilationLogicGrid", "Consumption"))
                    .Sort(x => x.Add("Date").Descending()))
        )

    </div>

 

Sadly the next problem is, that in the filtering the wrong filter-popup will be loaded, because internal in the gridd the column is still string I dont get the datetime-filter or the integer-filter (only the string-filter).

[Viktor Tachev]

Hello Rene,

Try to set types of the fields in the Model() for the DataSource. The approach is illustrated in the code-library linked in my previous post.

.DataSource(ds => ds.Ajax()
            .Model(m =>
            {
                m.Id("ProductID");
                m.Field("ProductID", typeof(int));
                m.Field("ProductName", typeof(string));
                m.Field("UnitPrice", typeof(decimal));
                m.Field("QuantityPerUnit", typeof(string));
            })
    .Read(r => r.Action("Read", "Home"))
    .Update(u => u.Action("Update", "Home"))
    .Destroy(u => u.Action("Destroy", "Home"))
    .Create(u => u.Action("Create", "Home"))
)

Regards,
Viktor Tachev
Telerik

[Rene]

Hi Viktor,

thank you very much!

I tried to get exactly this done since 6 days, your collegue Kiril tried to help me in a support ticket (968543) but told me allready that what I want to do is not possible - maybe go look for him and tell him your solution!

 

Thank you again!

[Viktor Tachev]

Hello Rene,

I am glad that the suggested approach is working for you. In case you have additional queries do not hesitate to contact us again.

Regards,
Viktor Tachev
Telerik