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

Grid Data Binding

3 Answers 319 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jean Hubbard
Top achievements
Rank 1
Jean Hubbard asked on 05 Dec 2012, 10:11 PM
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>

3 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 06 Dec 2012, 07:35 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jean Hubbard
Top achievements
Rank 1
answered on 06 Dec 2012, 04:05 PM
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
0
Atanas Korchev
Telerik team
answered on 07 Dec 2012, 07:54 AM
Hello Jean,

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

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Jean Hubbard
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Jean Hubbard
Top achievements
Rank 1
Share this question
or