KoGrid - Knockout DataGrid

[Eric Barnard]

Hey All,

We found the need to have a DataGrid that was *very* knockout-based.
After spending a couple months reviewing SlickGrid, jqGrid, and
others, I've come up with KoGrid:

https://github.com/ericmbarnard/KoGrid

We continue to develop on it daily, and are planning to go to
production with this grid in a week or two. I would love some
thoughts, suggestions, criticisms etc... on this grid. The
documentation and api are coming along, but by no means are concrete.

Hope some find this useful!

[Herberth Amaral]

Awesome! I'll look forward to send some pull requests!

[Scott Messinger]

Very cool! I'd put a link to the examples page on the readme. In OSS projects like this, I think that's the most important link to have and your examples are pretty fantastic.

-Scott

[Trevor de Koekkoek]

Looks good. More examples please! Also can you elaborate on why you
saw the need for a Knockout grid vs. using existing grids. Right now
I'm interested in KendoUI grid. They have some examples using
Knockout.

[EntitySpaces]

There are three nice examples on this page ...

https://github.com/ericmbarnard/KoGrid/wiki/Examples

[Eric Barnard]

More examples are coming:
- Large Data Set (10,000 rows since KoGrid uses virtual scrolling)
- Master-Details example
Once I get those done, I'll stick those on the Repo's README. @Scott -
thanks for the suggestion.

@Trevor,
Great question, and there's a couple reasons:

I've actually built some KO datagrid implementations using SlickGrid
and jqGrid. It always seems like your stuffing a square peg into a
round hole. From a simplicity level, we needed a grid that we could
simply bind an observableArray to, and it would just 'work'. We also
wanted something where writing custom row templates and cell templates
for the grid rows would be easy, and a first-class feature. Can you do
those things with current grids and some added plugins? Yes, to a
degree... but you still end up having to write a plugin/custom
bindingHandler to get it done.

Knockout is also, as most on here would agree, an awesome framework.
It's perf and abilities grow weekly, and its being actively used by
several thousand devs around the world. I thought bc of that, it would
be beneficial to have a native grid implementation to hopefully
increase the attraction to KO.

Lastly, and this is in respect to KendoUI, I wanted a grid that was
free (as in speech and beer). There are a significant amount of
control vendors out there who are doing a great job coming out with
awesome controls, but for devs like me who want to make money someday
and have to start with nothing... free controls make or break us. I'll
gladly leave the data grids that provide the grouping, sub-totaling,
multi-level-sorting, etc... advanced feature sets to be built by
companies that want to focus their time on that. Maybe someday KoGrid
will do those things, but if you need that level of advanced feature
sets & support... KendoUI, Wijmo, etc... might be a good investment.

[rpn]

Excellent work.  I am very excited about this project!  

[michael...@gmail.com]

I'm glad you found SlickGrid helpful :)

The large dataset example looks nice, but it seems like you've got a lot of work to do tuning it.  Even on Chrome, performance was pretty bad and I was seeing a lot of flicker on continuous paging (are you rendering the 1-page buffer?).

[Eric Barnard]

@Michael - I am glad you found this thread :) I really appreciate the
work that you've done, and I studied your scrolling virtualization a
ton.

My goal was to get a grid up and working well. After I had gotten the
api and architecture a little more solidified, then I wanted to
address perf and tuning. And YES, there is a decent amount of work
still to do there!

Currently KoGrid uses the out-of-the-box 'foreach' binding against a
dynamically changing observableArray of 'rows' (I calc the 'rows'
based upon how many are viewable to the user and where they are
scrolled). The kicker is with the 'foreach' binding - every time the
'foreach' updates it runs an array comparison using a simple
Levenshtein Distances calculation. (http://en.wikipedia.org/wiki/
Levenshtein_distancehttp://en.wikipedia.org/wiki/
Levenshtein_distance).

The Levenshtein distance basically tells the 'foreach' binding how to
change the nodes in the DOM each time the array updates. If I scroll
down the grid fast, the comparison happens and says "well this array
has changed so much, just blow away all the nodes and re-render them"
bc Levenshtein Distances only reports the shortest steps needed to
change an array from one state to another. This is where the flicker
happens :(

However, if you scroll slowly through the grid, the array comparison
says "Hey we only popped a few nodes on the end, just add those nodes
to the DOM and remove a few from the beginning". From what I've
studied, this is how SlickGrid works... managing the viewable rows by
adding/removing only the nodes that aren't needed in the viewable
area.

IMHO, I think the 'foreach' binding should place a higher weight on
keeping nodes in the DOM. This could either be done by moving away
from the Levenshtein formula, or using an enhanced version of it that
doesn't get too handy with deleting array items and nodes. I've also
thought about building out my own 'kgForEach' binding, but the KO
'foreach' binding is by far the most complex binding. Maybe the time
to do that has arrived, so thanks for the feedback.

[Nerdstalker]

This is fantastic, thank you.

[Bhoomi]

Awesome..

Is this grid editable?

[Salvatore DI DIO]

Merci beaucoup et bon courage :-)

 

Cordialement

2012/1/20 Eric Barnard <eric.m....@gmail.com>

[Nerdstalker]

Would love to see a youtube video tutorial, asking for the moon I know
I know.

Thanks

On Jan 19, 9:51 pm, Eric Barnard <eric.m.barn...@gmail.com> wrote:

[Eric Barnard]

@Nerdstalker
I've got a quite a bit of other work to do on the grid in the realms
of:

- scrolling perf
- re-sizable columns
- cross-browser optimization

I could drum up a youtube demo, but at this point in KoGrid's early
life it would probably have to be re-recorded several times.

Are there some bits that I could add to the wiki, or other examples
you'd specifically like to see?

[Sam De La Garza]

is this written for ko 2.0? great work by the way.

[Michał Poręba]

Hi Eric, 

It is an interesting work as many of your libraries and extensions are. Trevor has asked some great questions and you answered them swiftly and yet I am not quite sure if there really is a need for yet another grid. 

In my current project I have already committed to using DataTables with custom binding by Lucas Martin with some changes of my own. At the moment I'm very happy with the results but the time will tell. 

Michal

[Eric Barnard]

@Sam

Yes, this is written for KO 2.0. It uses several of the new bindings,
and the "ko.computed" syntax

@Michal
If you have a working solution - great! I didn't develop this to say
"KoGrid is better than all other grids" at all.

As you explore other grids, many are good at several things. I don't
see KoGrid being a one-all, be-all grid. Our needs were mainly in the
area of displaying large data sets in a very flexible way (using
templates). We aren't, however, really interested right now in
aggregating and subtotaling data.

One of the main benefits we get out of KoGrid is the ability to define
custom row and cell templates. Its not always that easy to do this
with other grid implementations, and we are finding it very useful
since when you define a custom row/cell template you get full control
over everything that row/cell does - click handlers, mouse overs, css,
etc...

If you are finding things that your current grid does, but KoGrid
doesn't - please let me know! I am in the process of making a roadmap,
and would like to see what is important to the KO community in a grid.

[Steve Krile]

I've been using tablesorter (http://tablesorter.com/docs/) and have
grown tired of it's non-knockout approach and special bindings I have
to perform. Really looking forward to banging on your solution in a
project I'm working on right now. Will get back to you with my
observations in a week or two.

-Steve

[Nerdstalker]

I would kill for an example of KoGrid displaying the contents of an
external .json file, looks like the closest example you have to this
is the "Simple Example" but the external data is a .js file.

Thanks,
Adolfo

[James Ong]

I wonder if the old fashion datagrid is an old idea, limitation and a
restrictive way to display row of data?
Should we come up something innovative such that the datagrid can be
customizable by any developers?

[Eric Barnard]

@Nerdstalker

Are you trying to serve JSON over wire via a .JSON file type?

@James Ong

I will agree that the classic 'Master Details', datagrid-centric
approach to development is an old idea, and very much should be
improved on. However, in the experiences I've had... putting a
datagrid on a page and getting it working is a good place to start and
then iterate from there. It's minimal investment to get something
working, and it allows you to get something in the hands of users
where you can get feedback to then create great UI.

Also, KoGrid is designed to allow developers use their own custom row
& cell templates. It *will soon* be very possible to create your own
row template in KoGrid that will hardly even make you think you are
looking at a datagrid. I think thats where KoGrid differs from some
other grids and can make sense for a variety of situations that
developers find themselves in.

On Jan 26, 11:53 pm, James Ong <yanlile...@gmail.com> wrote:
> I wonder if the old fashion datagrid is an old idea, limitation and a
> restrictive way to display row of data?
> Should we come up something innovative such that the datagrid can be
> customizable by any developers?
>
>
>
>
>
>
>

> On Fri, Jan 27, 2012 at 12:55 PM, Nerdstalker <emailado...@gmail.com> wrote:
> > I would kill for an example ofKoGriddisplaying the contents of an

[Brandon]

Eric,

Great work! Loving the pure KO implementation. A good candidate for
a pull into KO IMHO.

I noticed the examples in the source code aren't matching the ones
hosted on github but are more fully developed. it'd be nice to get
these newer examples into the source's examples folder.

P.S. Not sure if I've done something wrong, and havent had much time
to test, but pagination doesn't seem to be attempting to work, not in
the examples and not in my first test implementation of your code.

Again, great work man.

[Ben Walker]

This looks great work and I've been looking for and into something
like this! I like the idea of being able to define templated columns
and the idea of having a display and edit cell template within them.

Did you take advantage of the throttle extension in KO 2.0.0? This is
helpful when moving though a large computed observable array fast when
array slicing using a first() and last() approach to virtualize. For
example move first and move last. You may even be able to
parameterise the value in ms at runtime based on how much data you
were stepping though and how fast you wanted to keep the UI in sync.

self.sortedItems = ko.computed(function () {
return self.cachedItems().sort(function (a, b)
{ return a.date() < b.date() ? 1 : -1; }).slice(self.first(),
self.last() + 1);
}, self).extend({ throttle: 5 });


Ben

[Eric Barnard]

@Brandon,

I've actually been implementing KoGrid with a company I work for this
whole week. Its been a good opportunity to see KoGrid in the hands of
other developers, and also see it in some 'real-world' scenarios. Due
to that, I've made a few pushes to the repo, but haven't had enough
time to update the examples. I'll get on that here pretty soon, along
with several changes I have in my local repo (perf improvs, and more
tests/consolidated logic).

Also, if you were looking at the server-side paging example... It's
working for me in Chrome & IE9 (just a quick check). If you can put
together a fiddle/example of what you're seeing - just add an issue on
GH.

@Ben Walker

In short, yes. My first prototypes extensively used throttling and
setTimeout to try and manage the logic-heavy scroll and resize events
that the grid has to manage. Since 'throttle' uses setTimeout
internally, and many browsers vary on their timers and setTimeout
execution... I found (during my time prototyping) that letting the
grid just handle the events synchronously was actually eeking me out a
little better response times and user experience than '{ throttle:
0 }'. I probably need to revisit that idea, and thanks for the
suggestion of adjusting the ms based upon what actions the grid is
doing.

[plurby]

I've implemented your grid to use my database data, and customize it as i need but i can't seem to get custom templates to work. I always get an error: 

Uncaught Error: Unable to parse bindings. Message: SyntaxError: Unexpected token <; 

<script type="text/html" id="deleteCellTemplate">   

    <div data-bind="kgCell: { value: 'delete' }>

       <button class="del">Delete</button>

    </div>

</script>

<div id="sandBox" class="example" style="height: 600px; max-width: 700px;" 

        data-bind="koGrid: { data: myObsArray,                          

                               columnDefs : [{ field: 'Name', width: 120 }, { field: 'delete', cellTemplate: deleteCellTemplate', width: 120 }],

                             autogenerateColumns: false,

                             isMultiSelect: true,

                             enablePaging: true,

                             pageSize: pageSize,

                             pageSizes: [25, 50, 75],

                             currentPage: currentPage,

                             totalServerItems: totalServerItems,

                             selectedItem: selectedItem }">

</div>   

Do you know what's the problem?

Thanks

[rpn]

I did not test it out, but it looks like you do not have a closing quote here:  <div data-bind="kgCell: { value: 'delete' }>

[plurby]

Thanks, my eyes must me tired as i was looking for an half an hour and didn't see it. 

I'm currently implementing an fluent knockout api for writing knockout inside razor views, will post it when i have something to show and get some spare time to work on it more.

[Peter Lambert]

I'm really enjoying working with koGrid; I was rolling something
similar myself, and I'm happy to jump on board with what you're doing
instead!

I'm building a record manager to work with koGrid; it handles record
states on multiple records simultaneously, allowing record-level undo
and firing AJAX calls upon new record selection. It also intelligently
handles AJAX errors.

http://jsfiddle.net/abrev8ed/bJTMM/

I'm stuck in a couple of spots related to column width:
-I'm putting an indicator in the rowIndexCell, and I need to figure
out how to widen that column; just adjusting the CSS interferes with
other column width handling.
-I needed to hide some special fields and inject some CSS, but I
didn't want to break the default autogenerateColumns functionality so
I overrode the generateHeaderTemplate and generateRowTemplate
functions. It works OK, but it doesn't update the column widths and
leaves big blanks where the hidden columns should be. Surely there's
a better way to do this..?

Any help or suggestions would be appreciated!

On Feb 4, 12:05 pm, Eric Barnard <eric.m.barn...@gmail.com> wrote:
> @Brandon,
>

> I've actually been implementingKoGridwith a company I work for this
> whole week. Its been a good opportunity to seeKoGridin the hands of

[Brandon]

missed a quote mark here:

<div data-bind="kgCell: { value: 'delete' }>

change to

<div data-bind="kgCell: { value: 'delete' }">

[Ω Alisson]

The autocolumn width is a annoying thing :(

[Muhammad]

Hi,

Is there any possibility to bind the koGrid using remote datasource. I
would like to bind my KoGrid using Ajax enabled WCF and the data I get
back from my webservice is in json format.

<script type="text/javascript">
$(function () {

QS.PSService.GetJobs($(function (result) {

window.viewModel = {

myObsArray: ko.observableArray([ result

])
};

ko.applyBindings(viewModel);

}));

});

</script>



Ajax enabled WCF Web Service

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using System.Data;
using System.Collections;
using System.Web.Script.Serialization;

[ServiceContract(Namespace = "QS")]
[AspNetCompatibilityRequirements(RequirementsMode =
AspNetCompatibilityRequirementsMode.Allowed)]
public class PSService
{

[OperationContract()]
[WebGet(BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public string[] GetJobs()
{
try
{
StringBuilder sb = new StringBuilder();
sb.Append("select ID, JobName from ff_job where IsCreated
= 1 and IsCancelled = 0 and IsTemplate = 0 and IsDeleted = 0");
string sql = sb.ToString();
DataTable dt =
Database.Instance.ExecuteQueryToDataTable(sql);
List<string> IJobList = new List<string>();
string sJobID;
foreach (DataRow dr in dt.Rows)
{
sJobID = dr["ID"].ToString();
IJobList.Add(sJobID);
}
return IJobList.ToArray();
}
catch (Exception ex)
{
Console.WriteLine(ex.Message.ToString());
return null;

[gregor suttie]

Eric is there away to get virtual scrolling working - it doesnt virtual scroll like the xample page said ;(

[gourisanka...@capita.co.uk]

Hi Eric,

I am trying to use Ko grid to start for databinding. I am trying the simple grid to start, but unable to get the data binding in UI. Below is my code snippet. Please let me know if you will have sample code for this.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>   

    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>

<script src="KoGrid/Scripts/example-data.js" type="text/javascript"></script>

<script src="Scripts/knockout-2.2.0.debug.js" type="text/javascript"></script>

    <script src="KoGrid/Scripts/KoGrid.2.0.js" type="text/javascript"></script>

</head>

<body>

<!--<div data-bind="koGrid: { data: myObsArray,

                           isMultiSelect: false,

                           //selectedItem: mySelectedObj,

                           columnDefs: [ { field: 'firstName', displayName: 'First Name' }]}">

                           

                           </div>

-->

<div data-bind="koGrid: { data: myObsArray }"></div> 

        

</body>

</html>

example-data.js

$(function () {

    var vm = {

        myObsArray: ko.observableArray([

        { firstName: 'John', lastName: 'Doe' },

        { firstName: 'Jane', lastName: 'Doe' }

    ])

    };

    ko.applyBindings(vm);

});

Please let me know where I am doing wrong.

Thanks,

Gouri Sankar

[dkhu...@hotmail.com]

This has been very helpful.  I am having an issue though.  I am using the cellTemplates and I need to call some function in the onclick event, but pass that function some KOGRID data bounded values.  So, in my input element I would have

data-bind="onclick: <Name of my function>( <name of some data bounded variable>, <name of some other data bounded variable>)

Can someone show me how to do this? 

Here is a sample of my code...the highlighted yellow area is where I am having issues.

CBTEMPLATE:

<script type="text/html" id="actionTemplate">

<div data-bind="kgCell: $cell">

<input type="checkbox" value="1" class="checkbox" checked="checked" data-bind="onclick: 'MyOnClickFunction( siteId(), status() )'"/>

</div>

</script>

DIV TAG:

<div data-bind="koGrid: { data: offer.siteCounts,

columnDefs: [ { field: 'templateField0', displayName: 'Site', cellTemplate: 'siteTemplate', width: 150},

     { field: 'status', displayName: 'Current Status', cellClass: 'site', cellTemplate: 'statusTemplate', width: 115},

     { field: 'details', displayName: 'Details', width: 175},

     { filed: 'actionField0', displayName: 'Action', cellTemplate: 'cbTemplate', width: 200}],

autogenerateColumns: false,

displaySelectionCheckbox: false,

isMultiSelect: false }">

</div>

[Gouri Sankar Padihary]

Can anyone post sample code for Kogrid? The sample code in the website does not work.

Thanks,

GouriSankar

[develop...@gmail.com]

Hello there,

I am trying to use KoGrid with two KoGrids with << and >> buttons. Please see picture. The grid flickers almost all the time except when I am moving all items from left grid to right grid. It is requiring to do ko.applybinding after click of the buttons to move selected items from the grid. Also in some instances the move of the items take long time (>10 seconds).

[ziad...@gmail.com]

If you want to make the grid editable then you might be interested in this:

https://github.com/ZiadJ/kgEditable


On Monday, 23 January 2012 09:35:51 UTC+4, Bhoomi wrote:

Awesome..

Is this grid editable?

On Sun, Jan 22, 2012 at 12:30 AM, Nerdstalker <email...@gmail.com> wrote:

This is fantastic, thank you.

[gabimunt...@gmail.com]

Hi

I'm trying to use koGrid in MVC 4, but I get this error:

grid.sortedData.peek is not a function .

I tried your example : http://ericmbarnard.github.com/KoGrid/#/gettingstarted

What am I doing wrong?

Is there a way I could download a sample?

Best regards

Gabriel

[bjor...@gmail.com]

Did you find a sollution for this ? I have exactly the same issue, and i have spent many hrs trying to get even the simplest of examples to start.. with no luck :/
Hope you can share your insight if you have solved it by now.

[shi...@gmail.com]

 Dear Eric ,

 

Excellent work !!!!!!!!!!!.

i m facing problem with android OS ,search is not working ...

thanks 

Shijilesh

[pbtb...@gmail.com]

Just started playing with this today. Does pretty much what I need but I'm a bit stumped on why the group/filter menu is a bit messed up (missing some css perhaps):



As you can see the grouping icon is overlaying the column name.

[bala.k...@gmail.com]

Hi ,

 am new to Knockout with mvc.

am using knockout kgrid i need sample code or example for Sort the whole gird . 

for i.e we have 1000 record on grid but we displaying 25 per page. when i sort the record its sort 1-1000 not with in page record 25 alone .

BY

Bala Krishnan