MVC Grid not populating from datasource

[Mark]

Hi All,

I'm new to KendoUI so please bear with me. I've a Kendo gird on a view as below:

(I've taken out the extra CRUD lines for clarity as I've not got as far as implementing them yet).

@using Kendo.Mvc.UI
@using MvcApplication2.Models


@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@(Html.Kendo().Grid<MerchantStore>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.MerchantStoreId);
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Address1);
        columns.Bound(p => p.TelephoneNumber);
        columns.Command(command => { command.Edit(); command.Destroy(); });
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
   // .HtmlAttributes(new { style = "height:1430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.MerchantStoreId))
        .Read(read => read.Action("Read", "Home"))

    )
)
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function() {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>

I'm trying to hook up the controller to return a json result provided by a wcf webservices. As below:

public ActionResult Read([DataSourceRequest]DataSourceRequest request)
       {
           var client = new WebClient();


           return View("Index", Json(
               client.DownloadString("http://localhost:11462/Service1.svc/rest/ListMerchantStore" +
                                     "?merchantId=10000"), JsonRequestBehavior.AllowGet));
       }

but I just get an empty grid. The json looks like:

{"d":[{"__type":"MerchantStoreData:#WcfServiceLibrary1","Address1":"Add1","Address2":null,"Address3":null,"CountryId":826,"CountyState":"","Deleted":false,"EmailAddress":null,"MerchantId":10000,"MerchantIndustryId":1001,"MerchantStoreId":10213,"MerchantStoreKey":"654321","Name":"TEST","PostZipCode":null,"StatusId":0,"TelephoneNumber":null,"TownCity":"City"},{"__type":"MerchantStoreData:#WcfServiceLibrary1","Address1":"Add1","Address2":"Add2","Address3":"Add3","CountryId":826,"CountyState":"","Deleted":false,"EmailAddress":"a@a.a","MerchantId":10000,"MerchantIndustryId":1001,"MerchantStoreId":10214,"MerchantStoreKey":"654321","Name":"TEST","PostZipCode":"","StatusId":1,"TelephoneNumber":"123456","TownCity":"City"}]}

Please can someone kindly point out where i'm going wrong.

Many Thanks

[Alexander Popov]

Hello Mark,

I noticed that the data is wrapped in a field named "d", but the Grid's dataSource is looking for a "Data" field by default. Although you can specify where the dataSource should look for its items using the schema.data option in Kendo UI Web, this cannot be changed when using the ASP.NET Extensions. I would recommend you to modify the WebService so it returns data in the following structure:   

{"Data":[{"__type":"MerchantStoreData:#WcfServiceLibrary1","Address1":"Add1","Address2":null,"Address3":null,"CountryId":826,"CountyState":"","Deleted":false,"EmailAddress":null,"MerchantId":10000,"MerchantIndustryId":1001,"MerchantStoreId":10213,"MerchantStoreKey":"654321","Name":"TEST","PostZipCode":null,"StatusId":0,"TelephoneNumber":null,"TownCity":"City"},{"__type":"MerchantStoreData:#WcfServiceLibrary1","Address1":"Add1","Address2":"Add2","Address3":"Add3","CountryId":826,"CountyState":"","Deleted":false,"EmailAddress":"a@a.a","MerchantId":10000,"MerchantIndustryId":1001,"MerchantStoreId":10214,"MerchantStoreKey":"654321","Name":"TEST","PostZipCode":"","StatusId":1,"TelephoneNumber":"123456","TownCity":"City"}]}

Regards,
Alexander Popov
Telerik