Datatables.net as a Kendo UI Grid replacment

AdamS

As some might know the license for Kendo UI has changed. The Grid component is now a PRO component... So this creates an issue for people that need an opensource grid component. The core of the Kendo UI is now Apache Licensed, but there is no way to create a datatable, there is a lot of legacy code with Kendi UI especially using Kendo MVVM feature that I have to maintain, but new project must use a different datatable component.

Is there an easy way to use a Kendo UI datasource to feed a datatables.net component, essentially what I am trying to achieve is to partially or totally replace the Grid widget with a datatable Widget... has anyone tried something like this?

I am currently analyzing a way to do this... perhaps with some adapters and helper functions to bridge the Kendo UI abstractions with JQuery/ datatable.

allan

How does the data source present the data? I presume as a JSON object? If so, you should be able to use that directly with DataTables: http://datatables.net/manual/data#Data-source-types

Allan

AdamS

Yes, I currently am having some issues loading the datatable.js file it's no availble, I don't know if it's an issue with requirejs it's very strange.

allan

DataTables is a named module - you need to use datatables as the name for RequireJS. I'm going to write a blog post about it soon.

Allan

AdamS

ah I see, i was using

"jquery.datatables":"js/jquery.dataTables-1.10.0".

Thanks allan

AdamS

I have one issue right now, and that is when my dataSource is updated, I would like to refresh my datable with the new data. However, I don't have an easy way to pass the data into the datable.

Is it possible to switch data at runtime? My main issue is that I need to create the datatable and then update it on the dataSource change event... it's the only way that am seeing to update the datatable with the new data when the dataSource changes.

allan

If you are using Ajax sourced data, use ajax.reload() to trigger a reload of the data. If you are using client-side data, use clear() and rows().add() to add the new data, and for server-side processing, just call draw().

Allan

AdamS

Hi allan.

Thanks for your reply.

The issue that I have is that the dataSource is an abstraction, it can be an ajax source, it can be client-side javascript array of objects... http://docs.telerik.com/kendo-ui/api/framework/datasource and I must keep that abstraction. The Kendo UI Grid component updates automatically as the dataSource changes, I'm trying to mimic this by automatically updating the dataTable... right now by doing it brute force, just replace old set of data with new set of data, not even trying to just update the changes on the table.

I am trying to redraw the data on a dataSource change event... Essentially what I wanted to do is bind as necessary a datasource and update the dataTable... In a perfect world I would call an initialized datatable with an empty dataset and add a datasource, when the datasource changes I would pass the new datasource to datatables and redraw. Of course the data schema has to be the same only the data values would change...

EDIT
OK, that was weird for some reason chrome wasn't clearing the cache, and apparently it works now.

allan

Good to hear!

Might you be willing to post your solution? I'm sure others would be interested as well.

Allan

AdamS

change: function(e) {
                    var data = this.data();
                    oTable.clear().draw();
                    oTable.rows.add(data).draw();
                }

Sure, right now this is what I have, On the datasource change event I get the data and redraw the dataTables with the new data.

Next step is to get only the new data and update only the rows that need to be updated.

allan

Nice one - thanks!

Allan