Error when manually removing rows.

[Ricardo]

Hello,

I have been trying to remove a row from the grid via javascript but it always comes back with the following error: 
Uncaught TypeError: Cannot read property 'confirmation' of undefined

Here is what I am doing:

var grid = $("#mygrid").data("kendoGrid");

$(this).closest("tr").hide("slow");

var row = grid.tbody.find(">tr:hidden"); //Gives me the right one

grid.removeRow(row);

grid.refresh();

This of course hides the row, but if I go to another page and come back, the row comes back.  Now, I know this is because the data is still in the dataSource... but how can I go around it?

I am attaching my code for reference. The Json looks something like this:

[{"Year":2000,"Make":"Hyundai","Model":"Elantra","Color":"Bluish","Price":6000,"Id":0},{"Year":2001,"Make":"Hyundai","Model":"Sonata","Color":"Greenish","Price":16000,"Id":1}

Any pointers would be great. 

Thanks!
-Ricardo

[Rosen]

Hello Ricardo,

In order to delete (as well as add or update) record when grid's editing is not enabled, you should use the DataSource API instead:

var grid = $("#mygrid").data("kendoGrid");
var dataItem = grid.dataItem($(this).closest("tr")); // retrieve the data record for the row
grid.dataSource.remove(dataItem); // mark the record as deleted. This should refresh the grid automatically.

//grid.dataSource.sync(); //apply the changes to the data store

All the best,
Rosen
the Telerik team

[Ricardo]

Hi Rosen,

Thanks for the suggestion. I tried it and it didn't work, I get the following errors:
"Cannot call method 'remove' of undefined"
"Cannot call mehtod 'get' of undefined"

It is strange because when I debug the JS, I can see that the grid, the dataItem and the grid.dataSource have objects initialized.

I have attached a screenshot of the JS Debugger in case is useful.

Any other ideas on how to remove a row from the grid? I have seen the Editing sample and the use of destroy, but is not applicable to my scenario.

Thanks,
-Ricardo

[Rosen]

Hi Ricardo,

I'm afraid that I'm not sure what may cause the error you have described looking at the provided details. Therefore, it will be appreciated if you could provide a jsFiddle test page in which this behavior can be observed.

All the best,
Rosen
the Telerik team

[Ricardo]

Hey Rosen,

Here is my fiddle test. It has your code already.

http://jsfiddle.net/hpQxb/

Thanks for all your help!
-Ricardo

[Rosen]

Hello Ricardo,

The page you have provided does not have proper script references added. Please take a look at the following modified version of the page which have the KendoUI Web  scripts included, maybe I'm missing something obvious.

Regards,
Rosen
the Telerik team

[Ricardo]

Rosen... Thanks a lot!

It seems I was using an old version. I review the version I downloaded and it was from last year. I downloaded the new one and it now works as a charm.

Thanks a lot! This really helps me finish a small blog entry I am doing about KendoUI Grids:)

-Ricardo

[Ricardo]

Hey Rosen,

Thanks for all your help... I was able to finally complete a few tutorials I wanted to make for people using ASP.Net MVC and Kendo UI Grids. Here is the link in case you want to check it out: http://ricardocovo.com/2012/03/26/three-ways-to-get-started-with-kendoui-grids-on-asp-net-mvc/ 

Thanks again,
-Ricardo