CODEWITHSUNDEEP
knockout.jsasp.net-mvc-4
Chakradhar
Chakradhar

Reputation: 773

Sample Grid with ko in MVC4

I am new to MVC4 and Knockout. I am starting with a grid. so I have copied everything from this URL : http://knockoutjs.com/examples/grid.html

so here is my js file.

      $(document).ready(function () {
         ko.applyBindings(new PagedGridModel(initialData));
      });

    var initialData = [
       { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
        { name: "Speedy Coyote", sales: 89, price: 190.00 },
       { name: "Furious Lizard", sales: 152, price: 25.00 },
       { name: "Indifferent Monkey", sales: 1, price: 99.95 },
       { name: "Brooding Dragon", sales: 0, price: 6350 },
       { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
       { name: "Optimistic Snail", sales: 420, price: 1.50 }
      ];

var PagedGridModel = function (items) {
    this.items = ko.observableArray(items);
    this.gridViewModel = new ko.simpleGrid.viewModel({
        data: this.items,
        columns: [
            { headerText: "Item Name", rowText: "name" }
            ],
        pageSize: 4
    });
};

here is my cshtml

    <link href="../../Content/list/list.css" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript">     </script>
   <script src="../../Scripts/knockout-1.3.0beta.js" type="text/javascript"></script>
   <script src="../../Scripts/list/list.js" type="text/javascript"></script>

  <div class='liveExample'> 


<div data-bind='simpleGrid: gridViewModel'> </div>

<button data-bind='click: addItem'>
    Add item
</button>

<button data-bind='click: sortByName'>
    Sort by name
</button>

<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
    Jump to first page
</button>

</div>​

"ko.simpleGrid" is getting undfined so Its saying that *can not read property 'viewModel' of undefind * . what might be the cause ?

Thanks for any help.

Upvotes: 3

Views: 8685

Answers (2)

Artem Vyshniakov
Artem Vyshniakov

Reputation: 16465

You should call applyBindings method at the bottom of the page:

<div data-bind='simpleGrid: gridViewModel'> </div>

<button data-bind='click: addItem'>
    Add item
</button>

<button data-bind='click: sortByName'>
    Sort by name
</button>

<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
    Jump to first page
</button>

<script type="text/javascript">
     $(document).ready(function () {
         ko.applyBindings(new PagedGridModel(initialData));
      });
</script>

Or reference your script at the bottom of the page.

Upvotes: 0

vadim
vadim

Reputation: 1726

I think you forgot to include knockout.simpleGrid.1.3.js script that contains plugin implementation. You can check example at knockout simple grid fiddle sandbox.

Upvotes: 6

Related Questions