Date format is resetting after the new datasource is applied.

[Deenadhayalan]

Hi Team,

As per my requirement, I need to change my datasource in the Grid once search operation is performed. So, I have written my basic grid code and calling the ajax function to update the data like below. Here my problem is, when grid loads very first time, date format for datetime fields is working fine as mentioned in the grid format. But, it is got resetting once I changed my datasource through the ajax call. Please let me know, how I need to keep my date format same even after changing my datasource. Additionally, I need to add the filterable option, when I am changing my datasource. Please let me know, how I can achieve this.

//Default grid

@(Html.Kendo().Grid<Webapp.Models.EmployerViewModel>()
                                .Name("EmployerGrid")
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.EmployerName).Width(175);
                                    columns.Bound(c => c.PlanYearStart).Format("{0:dd MMM yyyy}").Width(135).Title("Plan Year Start");
                                    columns.Bound(c => c.PlanYearEnd).Format("{0:dd MMM yyyy}").Width(135).Title("Plan Year End");)
                                .Events(e => e.DataBound("onRowBound"))
                                .HtmlAttributes(new { style = "height: 520px;" })
                                .Scrollable()
                                .Sortable()
                                .Pageable(pageable => pageable
                                    .Refresh(true)
                                    .PageSizes(true)
                                    .ButtonCount(5))
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Read(read => read.Action("ListActiveEmployers", "Employer"))
                                 )
                                 .Resizable(resize => resize.Columns(true))
)

 

//Ajax call for changing the datasource on button click

 $(document).ready(function () {
        $("#employer-search-button").click(function () {
            var periodId = $("input[id='period-id']").val();
            $.ajax({
                type: 'POST',
                url: '/Employer/GetEmployersBasedonSearchCriteria',
                data: { periodId: periodId},
                dataType: 'json',
                success: function (result) {
                    var grid = $("#EmployerGrid").data("kendoGrid");
                    var dataSource = new kendo.data.DataSource({
                        data: result.Data
                    });
                    grid.setDataSource(dataSource);                
                }
            });
        });
    });

 

[Tsvetina]

Hello Deenadhayalan,

When you create a new DataSource for the Grid, it needs to have an explicitly defined model in order to be able to parse numeric and Date fields correctly. In the MVC Grid, this model is generated internally using the Grid Model declaration (Grid<EmployerViewModel>), but when a new DataSource is created, the model needs to be declared manually:

var grid = $("#EmployerGrid").data("kendoGrid");
var dataSource = new kendo.data.DataSource({
    data: result.Data,
    schema: {
        model: {
            fields: {
                EmployerName: { type: "string" }
                PlanYearStart: { type: "date" },
                PlanYearEnd: { type: "date" }
            }
        }
    }
});
grid.setDataSource(dataSource);

Regards,
Tsvetina
Progress Telerik