Bind a Grid to a local datasource (JS Array, JSON Array, etc)

[Matt]

Hi All,

I have an ASP.NET MVC app that receives data in real time (from a comet server) and this data may add to or change some of the data in the grid.  In some cases the real time data will cause me to add a row to the grid.  In other cases, I may need to edit existing data.  Also, I could have to remove data from the grid as well.  Is it possible for the Telerik Grid to be bound to a local DataSource rather than a Server data source?

Sencha has a grid that does this, but I use Telerik throughout the app and would rather stick with Telerik controls if I could!

Thanks in advance for any help!

[John DeVight]

Hi Matt,

ExtJS is a great JavaScript library.  I used it a lot prior to working with Telerik.

To answer your question, as long as the Telerik Grid is bound via Ajax or Client side, you can get a hold of the data stored in the Grid with the following syntax:

var gridData = $('#MyGrid').data('tGrid').data;

The data will be an array of JSON objects.  The attributes of each JSON object will correspond to the name of the property of the model that was bound to the grid.  For example, if you have a model that looks like this:

public class Person
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string HairColor { get; set; }
}

That is populated as follows:

people = new List<Person>();
people.Add(new Person { Id = 1, Name = "John Doe", HairColor = "Brown" });
people.Add(new Person { Id = 2, Name = "Jayne Doe", HairColor = "Black" });

Then the JSON array that you will get back from the grid will look like this:

[
    {"Id":1,"Name":"John Doe","HairColor":"Brown"},
    {"Id":2,"Name":"Jayne Doe","HairColor":"Black"}
]

So, to add a record, you could have the following code:

var grid = $('#PeopleGrid').data('tGrid');
var data = grid.data;
data.push({Id: 3, Name: "Bob Smith", HairColor: "Red"});
grid.dataBind(data);

Hope this helps.  Let me know what else I can do to help.

Regards,

John DeVight

BTW - Telerik has developed a new JavaScript library called Kendo UI where the grid binds to a local data source.  Telerik MVC Extensions and Kendo UI play nicely together.  Let me know if you have any questions about that as well.

[Matt]

John - you may be a lifesaver here.  I just downloaded Kendo UI, but the impression I get from checking out the demo's is that it is going to be EXACTLY what I need. 

I have seen the product on the site, but hadn't yet really checked it out - thanks for the heads up!

[Matt]

Also, thanks for the info on the local data array in the MVC grid ... I think that'll be helpful as well, if Kendo UI doesn't fit my need.

[John DeVight]

Glad I could help!  Let me know if you have any questions about working with Kendo UI.

Also, if you don't mind marking my response as the answer, that would be greatly appreciated =)

[John DeVight]

Telerik made some really great videos on getting started with the Kendo UI grid at: Kendo UI TV

Take a look at: "Getting Started With The Kendo UI DataSource" and "Getting Started With The Kendo UI Grid"

[Matt]

John,

(Since you offered :))

I am having some trouble using a local datasource and binding it to a grid.  I am using the examples found in the download, and am creating a datasource.  See the following code:

var template = kendo.template($("#template").html()); //defined in the HTML

var peopleDS = new kendo.data.DataSource({
    pageSize: 10,
    data: createRandomData(20),
    change: function () { // subscribe to the CHANGE event of the data source
        // update the max attribute of the "page" input
        $("#page").attr("max", this.totalPages());

        $("#people tbody").html(kendo.render(template, this.view()));
    }
});

peopleDS .read();
peopleDS .query({
    page: 2,
    pageSize: 10,
    sort: {
        field: "LastName",
        dir: "asc"
    }
});

My datasource is displayed exactly as I would expect it on the page.  NOW, I want to also bind a grid to that same datasource, so I append the following code to the above code:

//i have a <div> with an ID of "grid"
$("#grid").kendoGrid({
    dataSource: peopleDS,
    columns:
        [{
          field: "FirstName",
          title: "First Name"
        },
        {
          field: "LastName",
          title: "Last Name"
        }]
});

But, when the grid code is run I get the following error:

1. Uncaught TypeError: Cannot read property 'length' of undefined
   1. d.extend._Deferred.f.resolveWithjquery-1.5.1.min.js:19
   2. vjquery-1.5.1.min.js:19
   3. d.support.ajax.d.ajaxTransport.send.c

Any idea ... been running my head into the wall on this one - I seem to be following the example exactly.

Thanks in advance for the help!!

[John DeVight]

Hi Matt,

I'm not sure what the problem is.  The error suggests that the dataSource thinks it is suppose to be using Ajax.  From looking at the source code, when the dataSource is created, if the transport setting is not set, then it creates an instance of LocalTransport.

I've attached a sample application that creates a JSON array and binds it to a dataSource.  The grid is then bound to the dataSource.  Take a look at the sample application and see if this works for you.  If not, could you update the sample application, and post a reponse, and I'll take a look at it.

Regards,

John DeVight

[Matt]

John,

Yours seems to be working well, so I will attempt to see what is different.  At first glance, I seem to be doing something very similar - but I am sure I will get to the bottom of it now that I know the correct way to do it.

One last question: If I add/remove/change the values in the datasource, it seems that I will need to re-sort to show the correct sort order or page in the grid. My initial thought is that I will store the sort object and re-apply each time the grid is changed (which may be often - I am using this grid to show real-time statistics which can change frequently).  Is that the approach to take, in your opinion?  I do worry about performance - but that is an issue I will attack once I know the best way to re-sort the data.

I am not sure your affiliation with Telerik, but you have been extremely helpful - I really appreciate it.

[John DeVight]

Hi Matt,

I'm happy to help! =)

In the addPerson function, I called the peopleDS.query() function.  That doesn't actually need to be called every time you add/remove/change the data in the dataSource.  My mistake for leaving that in there.  All you need to do is call the peopleDS.read() function.  The dataSource should apply the correct sort order or page in the grid.  However, if you need to change the page, the best thing to do would probably be to set the page after the read.  Something like this: peopleDS.page(3);

If you have other forum posts that you need help with, please feel free to send me an email (listed below) with the link to the forum post, and I'll do what I can.  Answering forum posts helps me to maintain my MVP status =)

Regards,

John DeVight
John dot DeVight at gmail dot com