[Solved] dataBind(JSON) does not update if there are fewer rows

[charles]

Probably not the best subject line, but here's the problem:
I have my ajax-bound grid.  I want to do some custom filtering, but I don't want to go through all the trouble of doing CustomBinding.  So I have a row of buttons at the top of the page that allow the user to filter the grid by "All", "Only Parents", and "Category".  Each button calls a filterGrid(e) javascript method.  That method does a jQuery.ajax POST.  The results are a JSON object, which gets parsed, and then the grid is databound to the javascript object.  All of this works.

The problem is this: when there are fewer items in the result list than there are already in the grid, the grid simply doesn't update. 

For example, on the initial bind, the grid only contains the items that have no parents.  This is something like 24 items in my test database.  On the "All" bind, there are around 77 items, and it works more or less as expected.  However, when I do a "Category" bind, only 4-10 items are returned and the grid does nothing.  The problem lies in this code in telerik.grid.js, at line #507:

mergeChanges:  function(data, updated, deleted){
...[snip]...
  $.each(deleted, function (index, id) {
    for (idx = 0, length = data.length; idx < length; idx++){
      ...snip...
    }
});

The length of deleted is always zero, so the items that do not exist in the grid's new array are never removed from its "data".

Is there a way to work around this?  Maybe the ability to clear the grid before rebinding?  Or some code that i can replace the "deleted" section with that actually works?

Thanks in advance for your help (probably to Atanas).

[charles]

Nothing yet?  I'm rapidly approaching release and need a fix for this.  Thank you!

[Rosen]

Hi Charles,

Could you please provide a small sample in which this behavior can be observed locally?

All the best,
Rosen
the Telerik team

[charles]

Sadly, not tonight.  I had a ton of other features that required more urgent attention, but now I've been brought back to this.  In the last two months my jQuery knowledge has grown significantly.  When calling dataBind(data) directly on the grid object, it fires telerik.grid.dataBind(data).  That method is just a call to this.dataSource.success(data); in the telerik.common.js file.

In success(), there is a variable called "updated".  this variable is set by that._updatedModels().  that.updatedModels() in turn checks which models in this have been changed by calling _byState().  Cool.  No problem.  Except that _byState() expects this._models to be populated when it is executed.  in the execution chain, this._models is never populated. 

I'll try to build a project tomorrow--unfortunately, I'm a single developer working 12 hour days against 180 user stories, so my time is incredibly limited.  If you want, you can pretty easily follow the flow of logic I described above.

Thanks for any help you guys can give me.

[charles]

Okay, so i've got my sample project 90% built, and I know where the problem is now.  It was baffling at first, because it works exactly the way you would expect it to with a normal Ajax Grid. 

When you set the Grid up for batch editing is when it breaks.  I'll have the sample project up in the next hour or two.

[charles]

Finished.  If you run the project exactly as it is, click the "More" button.  It will load 100 objects into the grid; the grid doesn't reorder or anything, just stuffs every new object in at the end--leaving the original objects.  Then click the "Fewer" button.  The grid does...nothing.  Even though it gets a proper return.

Then, edit Index.cshtml.  Delete the Toolbar on the grid.  Refresh the page, and the grid works exactly as you would expect. 

It should be noted that this only occurs when you have batch editing fully implemented.  Only having a toolbar (i.e. an insert button on one) doesn't break the grid, and being in batch editing mode without the toolbar doesn't break it either.  It's not until you have the grid in batch edit mode and the toolbar in place does it break.

edit: changed "adds new objects unsorted" to "just stuffs every new object in at the end" for clarity.

[charles]

After more debugging--now that I'm fresh--I found that the error actually seems to occur when telerik.common.success calls _deserializer.data(data).  without batch editing, this.mergeChanges is never fired in the _deserializer.data() function.  With batch editing, it is.  Of course it's going to merge incorrectly, because that.deletedIds is never populated.  It's firing because dataSource.id is empty, not undefined.  dataSource.id gets set in init.  Still hunting this down.  once i figure it out, i'll post here.

[charles]

I've chased this down as far as I reasonably can.  The post above is not the best I can do, but it's the best I will do.  For some reason, the options that get passed into the DataSource.init() function contain a model. With batch editing enabled, the model.id is blank, but not undefined.  model itself is populated.  When batch editing is not in effect, the model is undefined.

The above described is in telerik.common.js:

var DataSource = Observable.extend({
//this is the options that has model populated when batch editing.
init: function(options){
...
});

[Rosen]

Hello Charles,

Thank you for the sample. I'm afraid that this is currently not supported. Please excuse us for the inconvenience.

Regards,
Rosen
the Telerik team

[charles]

In other words, you don't know what's causing it, and since I have to wait till the first of the year to get my customer's approval to purchase the Reporting Suite and upgrade my membership, you're not going to pursue the issue any further.

Fine.  I'll fix it myself.