400 bad request when calling my service from a Kendo Grid

Question

I'm working on grid in my asp.net mvc application that need to receive a list of objects from an existing service. Previously I've populated this grid calling the service using .net code in my controller. However, as the structure of the project I'm working on is chaning, I need to call the service directly from the grid. I've changed my implementation from using the server wrappers to javascript only;

 <div id="grid"></div>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: {
                                    type: "GET",
                                    url: "http://idex-c1/idex/Unit/AlarmService.svc/GetAlarmsForUnit",
                                    data: {
                                        unitId: "1",
                                        fromDate: "",
                                        toDate: false
                                    }
                                }
                            },
                            schema: {
                                model: {
                                    fields: {
                                        UnitId: { type: "number" }
                                    }
                                }
                            },
                            pageSize: 20,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 430,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns: [
                            {
                                field: "UnitId",
                                filterable: false
                            }
                        ]
                    });
                });
            </script>
        </div>

My first question is this: The service normally returns a list of AlarmContracts with several properties. Does my grid need to know about all of these properties, or can I only use some of them (Like in this case, the id)?

Second: Why do I get a 400 - Bad request when trying to call the service? Like I said earlier, calling the service via .net code in the controller works;

public ActionResult Alarms(int id, DateTime? FromDate, DateTime? ToDate)
{
    var unit = UnitClient.GetUnit(id);

    var fromDate = FromDate ?? DateTime.Today.AddDays(-20);
    var toDate = ToDate ?? DateTime.Now;
    Model = new AlarmsViewModel
    {
        ViewUnitContract = UnitClient.GetUnit(id),
        Alarms = AlarmClient.GetAlarmsForUnit(unit.Name, fromDate, toDate)
                   .Where(x => x.DateOff == null || x.DateAck == null)
                   .ToArray(),
        UnitName = unit.Name,
        Unit = new UnitDetailsModel(unit),
        FromTime = fromDate,
        ToTime = toDate
    };

    return View(Model);
}

Answer 1

Ok, so I actually managed to figure out a solution to this, using the wrappers after all :) Here's what I did in my cshtml:

   @(Html.Kendo().Grid(Model.Alarms)
                  .Name("grid")
                  .DataSource(dataSource => dataSource
                      .Ajax()
                      .ServerOperation(false)
                      .Model(m => m.Id(s => s.AlarmComment))
                      .Read(read => read.Action("Alarms_Read", "Alarms", new { id = Model.ViewUnitContract.Id }).Type(HttpVerbs.Get))
                      .AutoSync(true)
                  )
                  .Columns(col =>
                  {
                      col.Bound(p => p.DateOn).Format("{0:u}").Title("Date");
                      col.Bound(p => p.Priority).Width(50);
                      col.Bound(p => p.ExtendedProperty2).Width(100).Title("Action");
                      col.Bound(p => p.AlarmTag).Title("Name");
                      col.Bound(p => p.AlarmComment).Title("Comment");
                      col.Bound(p => p.ExtendedProperty1).Title("AlarmID");
                      col.Bound(x => x.DateOff).Title("Value");
                  })
                  .HtmlAttributes(new {style = "height:430px;"})

                  )

Here's my controller action:

[HttpGet]
public ActionResult Alarms_Read([DataSourceRequest] DataSourceRequest request, int id, DateTime? startDate, DateTime? endDateFilter)
{
    var unit = UnitClient.GetUnit(id);

    var fromDate = startDate ?? DateTime.Today.AddDays(-20);
    var toDate = endDateFilter ?? DateTime.Now;
    Model = new AlarmsViewModel
    {
        ViewUnitContract = UnitClient.GetUnit(id),
        Alarms = AlarmClient.GetAlarmsForUnit(unit.Name, fromDate, toDate)
            .Where(x => x.DateOff == null || x.DateAck == null)
            .ToArray(),
        UnitName = unit.Name,
        Unit = new UnitDetailsModel(unit),
        FromTime = fromDate,
        ToTime = toDate
    };

    return Json(Model.Alarms.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

Hopefully, it'll be of help to someone else :)

Answer 2

You also can consider using the javascript library Datajs (http://datajs.codeplex.com/) to comsume the odata