This is a migrated thread and some comments may be shown as answers.

How to remove records without calling dataSource.sync?

7 Answers 439 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Volodymyr Oliinyk
Top achievements
Rank 1
Volodymyr Oliinyk asked on 03 May 2012, 07:02 PM
Hello,

Can someone tell me is it possible to have a ListView with batch edit?
I need to delete rows but with no changes on server until user clicks "Apply".

As I can see method "remove" in the listview calls dataSource.sync() and sync makes a server call.

I have a code like this:
listView = $(options.listview).kendoListView({
    editable: true,
    dataSource: dataSource,
    template: kendo.template($(options.template).html()),
    editTemplate: kendo.template($(options.edittemplate).html())
}).delegate(".k-delete", "click", function (e) {
    listView.remove($(this).closest(".listViewItem"));
    e.preventDefault();
}).data("kendoListView");
In the DataSource I have "batch: true".

Is it possible to call "remove" method without immediate calling dataSource sync?
Thank you.

Vladimir

7 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 07 May 2012, 08:24 AM
Hello Volodymyr,

For remove operation you can easily achieve this by applying the following code for remove button handler:
listview.element.delegate(".k-delete-button", "click", function(e) {
    //listView.remove($(this).closest(".product-view"));
    var model = dataSource.view()[$(this).closest(".product-view").index()];
    dataSource.remove(model);
    e.preventDefault();
})

However currently this cannot be achieved for update(which is internally used by saving either after edit or update).

All the best,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Volodymyr Oliinyk
Top achievements
Rank 1
answered on 07 May 2012, 11:03 PM
Thank you, it works fine with delete. :))

Another problem I have is editing using datasource & listview.

I have a list with invitations that could be accepted by a user.
By clicking on the invitation I do the following code (accept an invitation if it is not accepted yet):
var data = listView.dataSource.view();
var index = $(this).closest(".listViewItem").index();
if(data[index].Status == 0) {
    data[index].Status = 1; // Make an invitation accepted
}
listView.refresh();
e.preventDefault();

But when I call dataSource.sync() it looks like there is nothings to sync.
May be this is because I have edited datasource data by this way.

I don't need to edit an invitation (listview edit form), only to change its status when user accepts it (click on it).
It there any way how I can do this functions (change data source and then sync it by "Apply" button)?

Thank you,
Vladimir
0
Nikolay Rusev
Telerik team
answered on 10 May 2012, 08:23 AM
Hello Volodymyr,

To have this working need to do two things:
1. Define a model for the DataSource
2. In order to be able to track changes in the model you will have to use set to modify the value of the field, i.e
data[index].set("Status", 1);

Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tony
Top achievements
Rank 2
answered on 27 Jun 2012, 01:59 PM
Hello, I am also using a listview with a datasource. When I use .set on the data object I'm getting the following error:

Microsoft JScript runtime error: Unable to get value of the property 'set': object is null or undefined

 datasource.data[1].set("myvaluename", myvalue);

I can set the value directly without using .set but then the update doesn't fire when .sync is called. 

datasource.data[1].myvaluename = myvalue;
datasource.sync();

If I set the value directly and also set the dirty value to true, the update fires when .sync is called, but the parameterMap: section of the datasource does not get used resulting in improperly formatted response body. 

datasource.data[1].myvaluename = myvalue;
datasource.data[1].dirty = true;
datasource.sync(); 

Any ideas would be much appreciated.
Thanks.

0
Volodymyr
Top achievements
Rank 1
answered on 27 Jun 2012, 02:09 PM
I use the following code on edit event that works fine for me:

var index = $(this).closest(".listViewItem").index();
var data = listView.dataSource.at(index);
if (data.Status == 0) {
    data.set("Status", 1);
}
listView.refresh();
e.preventDefault();

Vladimir
0
Tony
Top achievements
Rank 2
answered on 27 Jun 2012, 09:04 PM
I'm not using the listview edit event since I need all the line items (radio buttons) to be active at the same time. I am updating the datasource data each time a radio button changes via the onchange radio button event.

0
Volodymyr
Top achievements
Rank 1
answered on 27 Jun 2012, 09:57 PM
Anyway try this:
var data = datasource.at(index);
data.set("YourField", 1);

And of course you need the fields to be described in your data source: "schema: { model: { fields: { xxx } }"

Tags
ListView
Asked by
Volodymyr Oliinyk
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Volodymyr Oliinyk
Top achievements
Rank 1
Tony
Top achievements
Rank 2
Volodymyr
Top achievements
Rank 1
Share this question
or