Destroy command in toolbar

Hi,

I'm afraid that the destroy command is currently supported only for the columns, however we will have your feedback in mind and will discuss the implementation of such feature in the future.



Greetings,
Alexander Valchev
the Telerik team

ok, it's just quite strange that the destroy setting displays a button, but does nothing ;)

Another feedback, when we use a destroy column, after clicking on the confirmation message there is no visual indication that we should click on "Save changes" to validate the deletions. So it's quite easy to forget that. (you could for example highlight the save changes button) 
On the opposite, we love the visual indicator for updated cells! A small detail that has a big value! :)

Hello,

Thank you for the feedback. Your suggestions sound good and we will discuss it in our meetings.


All the best,
Alexander Valchev
the Telerik team

Is it possible to know if the Grid or the DataSource have pending changes?
We would like to display a message to the user if he leaves the page with unsaved pending changes.

Hi,

Generally speaking such method is not yet available out of the box. This could be achieved however, by keeping track of any changes made to the grid using the remove and save events.



Kind regards,
Alexander Valchev
the Telerik team

ok, I can do the following:

 

I'd just need a "cancelChanges" event to not display the confirmation message when the user cancels his changes... is it possible?

Throwing my 2 cents in here.  

I was just about to post a thread saying that the delete column does not work, and that it doesn't work in the grid-web-service-crud example either.

But after reading this thread I see that the user must hit save after deleting rows.   This is unnatural behavior - none of my users could figure this out.  I do not believe users will understand this.  This is just about a deal-breaker on using the KendoGrid.  I know you guys are hard at work on the new release.  Please try to address this enhancement as soon as you can.

thank you

I'm using the Q1 Beta.  The new Inline editing feature will solve this issue (assuming your don't mind inline editing.)

configure the gird as follows:

        toolbar: ["create"], 
         editable: "inline",

and set this command field:

                  { command: ["edit", "destroy"], title: "Delete", width: "200px" }

It works very well.

@Jeremy: thanks, I'll try that.

@Telerik: any idea for my cancelChanges problem? 

Hello Jc Mag,

You can catch the click event of the cancelChanges button and set your flag to false. Please check the following code snippet.

Regards,
Alexander Valchev
the Telerik team

I have to agree with the comment about the destroy column action by Jeremy.
Why do all crud actions except destroy call the server?
Seems silly to have to listen or keep track of destroys, it is so easy for something to happen before calling save for the destroys to not happen... etc... Three out of 4 actions are already calling the server why doesn't destroy?
I see it removes the row from the grid and pops up a confirmation "Are you sre..." but what else is this destroy button doing?
Why define a destroy transport with a call to the server if it doesn't do it?

Maybe I'm missing something...

BTW, I am using the grid in editable popup mode with batch:true.

Hello Zack,

I cannot understand your point. Generally speaking the server calls depends on the grid's configuration. I used our pupup editing demo to test and everything seems to be working as expected on my side. Please check the screen cast and let me know if I missed something.

Greetings,
Alexander Valchev
the Telerik team

There's an easy way to use delete from the toolbar.

1. Add a template to the destroy command in the toolbar with a call to a "removeSelectedRow " function.

{
         name: "destroy",
          template: "<a class='k-button k-button-icontext k-grid-delete' onclick='removeSelectedRow()'><span class='k-icon k-delete'></span>Delete</a>"
}

2. Here's the "removeSelectedRow" function:

var removeSelectedRow = function(){
    // remove selected table row
    grid.removeRow(grid.tbody.find(".k-state-selected"));
};

note:  I define grid inside the onDataBound Function
$("#grid").kendoGrid({
dataBound: onDataBound
}
function onDataBound(){
// get a reference to the grid widget
 var grid = $("#grid").data("kendoGrid");
}

a little bit improved to work on "multiple selection" grids

@Andrew thx!

Hello,

Is there a fix to this issue in the latest version (I'm using 2012.3.1114)?
If not - is there another way to call a batch delete from a toolbar button?

Thanks!

Hello Ety,

The toolbar does not support a destroy command. To remove a row from the toolbar you could use the approaches  suggested in this thread and add a template. An alternative way to handle the click event is to bind with custom code based on the class:

An item can be removed either with the Grid removeRow method or the DataSource remove method. Regards,
Daniel
the Telerik team

Dear Kendo UI Team,

We went through above posts but still wanted to go ahead and post below query. If there is any updates in implementation of Delete functionality,please let us know.

We are using Kendo UI in combination with HTML,Javascript Hibernate and Spring MVC in a dummy project. All was fine until we were trying to delete a row from grid.

It deletes the row from the grid, but not from database. We have written Java classes that calls Hibernate but we are finding trouble mapping with the method in Javascript that calls Java classes which eventually works with database.

The main challenge is calling our method  on clicking Kendo UI Delete button. Please advise.

We believe implementation of edit functionality will be similar as we need to write a logic for edit. So method needs to be called on clicking of edit button as well.

Look forward to your suggestions.

Thanks,
Karty

  $("#grid").kendoGrid({
                        dataSource: dataSource,
                        
                        scrollable:true,
                        pageable: true,
                        height: 400,
                        sortable:{
                         mode:"multiple"
                         },  
                         filterable: true,
                        columns: [
                                  { field: "status", title: "Status", format: "{0:c}", width: "auto" },
                                  { field: "jobId", title:"CSV File", width: "auto" },  
                                  { command: ["destroy"], template: "<a class='k-button k-button-icontext k-grid-delete' onclick='removeSelectedRow()'></a>"}],
                                editable: "inline"
                            });
                            });

Hi Karty,

From the provided grid configuration it seems that you would like to use the destroy command as a row button which is supported out of the box. This means that there is no need to define a template or to catch the onclick event.

DataSource submits changes to the server through Ajax requests. In order to delete records from the server you should define the destroy transport.

You are using inline editing mode, which means that the destroyed records will be submitted after the button is pressed. For more information please see this demo.

Kind regards,
Alexander Valchev
the Telerik team