CODEWITHSUNDEEP
asp.net-mvcjsonasp.net-mvc-3knockout.jsgrid
Hemant Tank
Hemant Tank

Reputation: 1744

json based grid for mvc using knockout, jbst, etc

I've an ASP.Net MVC3 web app been using jQuery Form Plugin for ajaxSubmit. I've a grid and I use ajax postback to refresh it while filtering, sorting & paging - in simple words I just replace the grid html result I get from ajax postback. Works great for any kind of grid features because grid html is rendered on server side.

Now, I'm looking for a json based Grid with some basic features like sorting, paging and if possible grouping & server side paging! Editable Grid is not the main focus but it'll be an added advantage. I see most of the solutions would point towards Knockoutjs. I've been trying it out but it needs more homework esp for advance features like grouping, etc...

I've found some basic examples like

  1. Knockoutjs basic grid (with add/delete)
  2. The SimpleGrid component
  3. jQgrid also supports json
  4. jqxgrid

Along with that I also came across a new concept - JsonML + Browser-Side Templating (JBST) Basically, it works on json and before adding the elements to the page it allows us to alter the element's behavior. Browser side templating. Has anyone experienced it? Is it comparable to KO ?

I welcome suggestions and your expertise advice for my simple featured json based grid (assuming json would be the best way of passing the data). If you know another approach, do share it as well.

Upvotes: 0

Views: 2351

Answers (3)

Hemant Tank
Hemant Tank

Reputation: 1744

I did my homework and here's my final conclusion. To begin with - there's nothing like KO support - there has to be a ko binding handler for the plugin (except fo KOGrid).

DataTables - supports json but couldn't find native KO support (external plugin). Binding looks simple and straight fwd yet many diff script files.

SlickGrid - supports json but needs a bit post processing. Possible external KO binding feasible. Using ko.utils.unwrapObservable.

ko.SimpleGrid Implementation of binding ko.bindingHandlers.simpleGrid (supports paging) As seen in KO demo.(source) No native support for sorting but can be extended

My final choice -

KOGrid Probably the first pure KO based Grid! So obviously json compatible. Supports sorting natively (no extra scripting needed). Also found server side paging for large data set. All in one!

function columnDefsVM() {
    var self = this;
    this.myData = ko.observableArray([{ name: "Moroni", age: 50 },
                     { name: "Tiancum", age: 43 },
                     { name: "Enos", age: 34 }]);
    this.gridOptions = { data: self.myData,
      columnDefs: [{field: 'name', displayName: 'Name'},{field: 'age', displayName: 'Age'}]
    };
}
ko.applyBindings(new columnDefsVM());

Some others -

Upvotes: 1

Anders
Anders

Reputation: 17564

Have you checked out KoGrid, its a native KO grid

https://github.com/Knockout-Contrib/KoGrid

Upvotes: 2

scripto
scripto

Reputation: 2297

You might also take a look at the Grid samples here: jqxGrid with Knockout

Upvotes: 0

Related Questions