Grid Data Binding

[Jean Hubbard]

How in the heck do you rebind the grid after receiving data from an AJAX request? Specifically, dates? Why do I lose formatting here?

I need help please!!

@{

    ViewBag.Title = "Index";

}

 

@section Scripts {

    <script type="text/javascript">

        var viewModel;

 

        $(function () {

            // Load Data

            $.ajax({

                async: false,

                url: "/Kendo/Home/GetData"

            }).success(function (result) {

                viewModel = new kendo.observable(result);

            });

 

            // Create Grid

            $("#grid").kendoGrid({

                dataSource: {

                    data: viewModel.People,

                    schema: {

                        model: {

                            fields: {

                                DOB: { type: "date" }

                            }

                        }

                    }

                },

                columns: [

                    { field: "FirstName", title: "First Name" },

                    { field: "LastName", title: "Last Name" },

                    { field: "DOB", title: "Date of Birth", format: "{0:MM/dd/yyyy}" }

                ],

                editable: true

            });

 

            $(document).on("click", "#btn-save", function (e) {

                $.ajax({

                    url: "/Kendo/Home/Save",

                    type: "POST",

                    data: JSON.stringify(viewModel),

                    contentType: "application/json"

                }).success(function (result) {

                    var g = $("#grid").data("kendoGrid");

                    viewModel = new kendo.observable(result);

                    g.dataSource.data(viewModel.People);

                     

                });

            });

        });

    </script>

}

 

<div id="grid"></div>

<div id="view">

    <input data-bind="value: firstName" />

    <input data-bind="value: lastName" />

    <button id="btn-save">Save</button>

</div>

[Atanas Korchev]

Hello Jean,

 As you know ajax requests are asynchronous. This means that the success handler of $.ajax will be executed *after* the grid initialization code is called. That code would fail because you are trying to bind the grid to a variable which is not initialized (viewModel). To resolve that move the grid initialization code in the success handler of $.ajax.

All the best,
Atanas Korchev
the Telerik team

[Jean Hubbard]

The bindings work fine, except for the fact that I lose all the formatting of the dates in the grid after I rebind the data source to new data:

                $(document).on("click", "#btn-save", function (e) {

                $.ajax({

                    url: "/Kendo/Home/Save",

                    type: "POST",

                    data: JSON.stringify(viewModel),

                    contentType: "application/json"

                }).success(function (result) {

                    var g = $("#grid").data("kendoGrid");

                    viewModel = new kendo.observable(result);

                    g.dataSource.data(viewModel.People);

                      

                });

            });

The initial load of the data works as I set the AJAX call to:

async: false

[Atanas Korchev]

Hello Jean,

 How does the server response look like? We need that in order to troubleshoot your problem.

Regards,
Atanas Korchev
the Telerik team