MVVM data source not recognized with ASP.NET MVC

[Michel Corbin]

Hi,

I am new to Kendo and I am trying to load data in a grid from a data source specified in a ViewModel.  The grid is defined with the wrapper and I added a data-bind attribute to associate the data source defined in the ViewModel with the grid.  I would have expected the "read callback" to be invoked to load the grid but nothing of the kind happens.

To be more precise, here are the components involved:

The model on which it is base:

   public class LocalMarketViewModel
   {
      public string Contract { get; set; }
      public string Region { get; set; }
      public DateTime WhenSold { get; set; }
      public decimal Quantity { get; set; }
      public decimal BaseCadTm { get; set; }
      public decimal BaseCadBois { get; set; }
      public decimal BaseUsdBois { get; set; }
      public decimal Price { get; set; }
      public DateTime MonthCat { get; set; }
      public bool Selected { get; set; }
   }

The code in the cshtml file:

<div id="ViewModelScope">
@(Html.Kendo().Grid(Model)
     .HtmlAttributes(new { @class = "localMarketGrid", data_bind="source: contracts, visible: isVisible" })
     .Name("Grid")
     .Columns(c =>
     {
     c.Bound(p => p.Contract)
      .Title("Contrat")
      .HtmlAttributes(new { style = "text-align: center" })
      .HeaderHtmlAttributes(new { style = "text-align: center" });
     c.Bound(p => p.Region)
      .Title("Région UPA")
      .Width(150);
     c.Bound(p => p.WhenSold)
      .Title("Date de vente")
      .Width(150)
      .Format(dateFormat)
      .HtmlAttributes(new { style = "text-align: center" })
      .HeaderHtmlAttributes(new { style = "text-align: center" });
     c.Bound(p => p.Quantity)
      .Title("Qté TM")
      .Format("{0:#,0.000;(#,0.000)}")
      .HtmlAttributes(new { style = "text-align: right" })
      .HeaderHtmlAttributes(new { style = "text-align: right" });
     c.Bound(p => p.BaseCadTm)
      .Title("Base<br>CAD TM")
      .Format("{0:#,0.00' $';(#,0.00' $')}")
      .HtmlAttributes(new { style = "text-align: right" })
      .HeaderHtmlAttributes(new { style = "text-align: right" });
     c.Bound(p => p.BaseCadBois)
      .Title("Base<br>CAD Bois.")
      .Format("{0:#,0.0000' $';(#,0.0000' $')}")
      .HtmlAttributes(new { style = "text-align: right" })
      .HeaderHtmlAttributes(new { style = "text-align: right" });
     c.Bound(p => p.BaseUsdBois)
      .Title("Base<br>USD Bois.")
      .Format("{0:#,0.0000' $';(#,0.0000' $')}")
      .HtmlAttributes(new { style = "text-align: right" })
      .HeaderHtmlAttributes(new { style = "text-align: right" });
     c.Bound(p => p.Price)
      .Title("Prix<br>CAD TM")
      .Format("{0:#,0.00' $';(#,0.00' $')}")
      .HtmlAttributes(new { style = "text-align: right" })
      .HeaderHtmlAttributes(new { style = "text-align: right" });
     c.Bound(p => p.MonthCat)
      .Title("Mois CAT")
      .Format("{0:MMM yyyy}")
      .HtmlAttributes(new { style = "text-align: center" })
      .HeaderHtmlAttributes(new { style = "text-align: center" });
     c.Bound(p => p.Selected)
      .ClientTemplate("<input name='Selected' type='checkbox' class='selection-checkbox' data-bind='checked: Selected' #= Selected ? checked='checked' : '' #/>")
      .HeaderHtmlAttributes(new { style = "text-align: center" })
      .HtmlAttributes(new { style = "text-align: center" });
     })
     .Pageable()
     .Sortable()
     .Scrollable()
     .Resizable(r => r.Columns(false))
     .Reorderable(r => r.Columns(false))
 )
</div>

<script type="text/javascript">
$(document).ready(function ()
{
var viewModel = kendo.observable(
{
isVisible: true,
contracts: new kendo.data.DataSource(
{
type: 'aspnetmvc-ajax',
transport:
{
read:
{
url: '@Url.Action("LoadContracts")',
dataType: 'json'
}
}
})
});
kendo.bind($('#ViewModelScope'), viewModel);
</script>

finally, here is the controller method, which is nver invoked (Chrome confirms there is no load error; it is simply never invoked):

       public ActionResult LoadContracts([DataSourceRequest] DataSourceRequest request)
       {
          return Json(new LocalMarketModel().GetContracts().ToDataSourceResult(request));
       }

Now, the ViewModel per se seems right because changing the state of the "isVisible" variable works perfectly well.  But I can never get it to call the "LoadContracts" method of the supervisor and, thus, no data is loaded in the grid.

Is there something wrong or is there another action I should do?

Thank you

Added Information:

I  made some progress since yesterday.  I now get grid to call back onto the controller but a javaScript error in the Kendo UI library happens upon return.  I attached a copy of the most recent version of the View.  Here is what the controller method currently looks like:

       public ActionResult LoadContracts([DataSourceRequest] DataSourceRequest request)
       {
          LocalMarketViewModel[] contracts = new LocalMarketModel().GetContracts().ToArray();
          return Json(contracts.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
       }

And here is a traceback, in Chrome, of the JavaScript error:

Uncaught TypeError: Object #<Object> has no method 'slice'   kendo.all.min.js:11
dt.extend.success   kendo.all.min.js:11
x.isFunction.i            jquery-1.10.2.js:827
n.success                  kendo.all.min.js:11    
c                                  jquery-1.10.2.js:3048
p.fireWith                 jquery-1.10.2.js:3160
k                                 jquery-1.10.2.js:8235
r                                 jquery-1.10.2.js:8778

[Daniel]

Hello,

Since the result from the server is a DataSourceResult object and not a collection, you should also configure the schema data and total options so that the dataSource will know how to get the data and the total records count from the response:

contracts: new kendo.data.DataSource({
    type: 'aspnetmvc-ajax',
    transport: {
        read: {
            url: '@Url.Action("LoadContracts")',
            dataType: 'json'
        }
    },
    schema: {
        data: "Data",
        total: "Total"
    }
})

Regards,
Daniel
Telerik

[Michel Corbin]

Thank you very much.  This actually solved the problem.  It now seems to work very well.