Kendo grid

[Duncan]

Hi,

I have an MVC 4 application and I am trying to populate a kendo grid control.

I am calling a method from a jquery click event 
$('#btnSearch').click(function () {
        $.ajax({
            type: "GET",
            url: "/PropertyAddress/SearchForPostcode",
            data: { postcode: $('#Postcode').val(), property: $('#Property').val() },
            success: function (result) {
                $("#dialog-addresssearch").data('addresses',result).dialog('open');
            }
        });
    });

my controller is passing back a JSON formatted result set.
//controller detail removed 
return this.Json(postcodeAddresses, JsonRequestBehavior.AllowGet);

this is being passed to a jquery ui dialog box in the open call to the dialog box.

I have the following html mark up on the dialog box 
 <div id="grid"></div>

in the open method of the dialog box I set up the datasource and the grid in jquery
this is the passed in JSON results, I have checked and validated that this is correct JSON

 var results = $(this).data('addresses');
create new data source
            var gridDataSource = new kendo.data.DataSource({
                type: "json",
                data: results,
                pageSize: 1
            });           
   gridDataSource.read();

            $('#grid').kendoGrid({
                datasource: gridDataSource,
                columns: [
                     { field: "Premise", title: "Name or number" },
                     { field: "Organisation", title: "Organisation" },
                     { field: "Street", title: "Street" },
                     { field: "Locality", title: "Locality" },
                     { field: "PostTown", title: "Town or city" },
                     { field: "Postcode", title: "Postcode" }
                ],
                scrollable: false,
                pageable: true
            });

  

This all works with no errors, it shows a grid on the dialog box, it shows paging except there are no results shown, I have checked and validated the JSON and verified that there is data in the results. 

I am clearly missing something but really not sure what it is I have tried a number of examples, for instance if I add a JSON array to the datasource instead of passing in the results this seems to populate OK. I can only assume it must be something to do with the data but unable to track down the issue.

Hoping that someone can spot my mistake

[Dimo]

Hi Duncan,

You need to ensure that the results variable already contains the data at the time the Grid is created. You can do two things:

1. Create the Grid initially, before executing the $.ajax method. Then, in the success handler, use the data() method of the Grid datasource to populate the data.

or

2. assign a method to the Grid datasource's data property, instead of a variable. This is demonstrated in the Local Datasource demo.

or

3. Define the datasource URL and parameters directly in the Kendo datasource, i.e. similarly to the Remote Datasource demo.

Greetings,
Dimo
the Telerik team

[Duncan]

Hi Dimo

I have been through these examples and I'm still missing something here.

I have double checked that I am passing across a JSON collection and this collection is appearing in the variable gridDataSource 

the addresses variable has the JSON data in it 
 var results = $(this).data('addresses');
 var gridDataSource = new kendo.data.DataSource({
                data: results,
                pageSize: 1
            });

how can I get the grid to bind to this datasource?

I currently have the following

  $('#grid').kendoGrid({
                height: 420,
                sortable: true,
                columns: [
                     { field: "Premise", title: "Name or number", width: 100 },
                     { field: "Organisation", title: "Organisation", width: 100 },
                     { field: "Street", title: "Street", width: 100 },
                     { field: "Locality", title: "Locality", width: 100 },
                     { field: "PostTown", title: "Town or city", width: 100 },
                     { field: "Postcode", title: "Postcode", width: 50 }
                ],
                datasource: gridDataSource,
                scrollable: false,
                pageable: true
            });

Many thanks
Duncan