json based grid for mvc using knockout, jbst, etc

Question

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

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.

How about this - http://wijmo.com/grid-with-knockout-viewmodel-loading-remote-data/ ? — Hemant Tank, Feb 02 '13 at 19:54
This one - SlickGrid? old yet impressive (jqueryui has also referred to it)! https://github.com/mleibman/SlickGrid/wiki/Examples — Hemant Tank, Feb 03 '13 at 19:09

score 2 · Accepted Answer · answered Feb 03 '13 at 00:33

2

Have you checked out KoGrid, its a native KO grid

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

answered Feb 03 '13 at 00:33

Anders

17,306
10
76
144

If you feel my below homework has more info - can I mark it as answer? – Hemant Tank Feb 05 '13 at 19:15
KoGrid is no longer under (active) development. See https://github.com/Knockout-Contrib/KoGrid/issues/246 – jbatista Nov 22 '13 at 15:22

score 1 · Answer 2 · edited May 23 '17 at 12:15

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 -

JsonML + Browser-Side Templating (JBST) couldn't infer too deep but it does pose an effective approach to use js for templating and runtime behavior modification!
Simple http://paramquery.com/demos
Feature rich jqGrid http://www.trirand.net/demoaspnetmvc.aspx (json & KO)

The jqGrid should be in the top of your list :P The only flaw is not having the KO binding provided by KOGrid... — jbatista, Nov 22 '13 at 15:13

score 0 · Answer 3 · answered Feb 02 '13 at 15:03

0

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

answered Feb 02 '13 at 15:03

scripto

2,297
1
14
13

json based grid for mvc using knockout, jbst, etc

3 Answers3