This is a migrated thread and some comments may be shown as answers.

Date format is resetting after the new datasource is applied.

1 Answer 113 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Deenadhayalan
Top achievements
Rank 1
Deenadhayalan asked on 16 Nov 2018, 07:15 AM

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);                
                }
            });
        });
    });

 

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 19 Nov 2018, 02:49 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Deenadhayalan
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or