MVVM data source not recognized with ASP.NET MVC

3 posts, 1 answers
  1. Michel Corbin
    Michel Corbin avatar
    20 posts
    Member since:
    Apr 2010

    Posted 19 Nov 2013 Link to this post

    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

  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 21 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Answer
    Michel Corbin
    Michel Corbin avatar
    20 posts
    Member since:
    Apr 2010

    Posted 21 Nov 2013 Link to this post

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