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

Destroy command in toolbar

18 Answers 839 Views
Grid
This is a migrated thread and some comments may be shown as answers.
jc mag
Top achievements
Rank 1
jc mag asked on 16 Feb 2012, 05:23 PM

When I set the toolbar to display a delete button, nothing happens when I click on it.
But it works when I add a destroy column. Should I do something special to active the delete button in toolbar?

here is my code:

$("#grid").kendoGrid({
            dataSource: _ds,
            height: 350,
            scrollable: false,
            pageable: true,
            sortable: false,
            //selectable: "multiple, row",
            navigatable: true,
            columns: [
                //{title: "Id", field: "Id", width: 150},
                {title: "Name", field: "Name", width: 150},
                {title: "Description", field: "Description", width: 300}
            ],
            toolbar: ["create", "destroy", "save", "cancel"],
            editable: true
        });

_ds = new kendo.data.DataSource({
           type: "json",
           serverPaging: true,
           serverSorting: true,
           pageSize: 15,
           batch: false,
           transport: {
               read: {
                   url: "@Url.Action("GetRoles", "Role", new { area = "UserManagement"})"
               },
               update: {
                   url: "@Url.Action("UpdateRole", "Role", new { area = "UserManagement" })"
               },
               destroy: {
                   url: "@Url.Action("DeleteRole", "Role", new { area = "UserManagement" })"
               },
               create: {
                   url: "@Url.Action("CreateRole", "Role", new { area = "UserManagement" })"
               }
           },
           schema: {
               data: function(data) {
                   return data.result;
               },
               total: function(data) {
                   return data.totalCount;
               },
               model: {
                   id: "Id",
                   fields: {
                       Id: { editable: false, nullable: false },
                       Name: { editable: true, validation: { required: true } },
                       Description: { editable: true, validation: { required: false } }
                   }
               }
           },
           error: function (e) {
               var json = jQuery.parseJSON(e.responseText);
               alert("An error has occured: " + json.Message);
           }
       });

18 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 17 Feb 2012, 10:45 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
jc mag
Top achievements
Rank 1
answered on 17 Feb 2012, 12:10 PM
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! :)
0
Alexander Valchev
Telerik team
answered on 17 Feb 2012, 02:30 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
jc mag
Top achievements
Rank 1
answered on 23 Feb 2012, 04:24 PM
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.
0
Alexander Valchev
Telerik team
answered on 28 Feb 2012, 10:57 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
jc mag
Top achievements
Rank 1
answered on 28 Feb 2012, 06:26 PM

ok, I can do the following:

$("#grid").kendoGrid({
        ...
           remove: function(e) { hasChanges = true; },
           save: function(e) { hasChanges = true; },
           saveChanges: function(e) { hasChanges = false; }
       });

 

$(window).bind('beforeunload', function(){
            if (hasChanges) {
                return " ";
            }
        });

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

0
Jeremy
Top achievements
Rank 1
answered on 29 Feb 2012, 09:25 PM
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

0
Jeremy
Top achievements
Rank 1
answered on 01 Mar 2012, 08:44 PM
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.

0
jc mag
Top achievements
Rank 1
answered on 06 Mar 2012, 01:57 PM
@Jeremy: thanks, I'll try that.

@Telerik: any idea for my cancelChanges problem? 
0
Alexander Valchev
Telerik team
answered on 09 Mar 2012, 09:52 AM
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.
$(".k-grid-cancel-changes").click( function() {
    hasChanges = false;
});


Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Guru
Top achievements
Rank 2
answered on 30 Mar 2012, 10:32 PM
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.
0
Alexander Valchev
Telerik team
answered on 04 Apr 2012, 04:17 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andrew
Top achievements
Rank 1
answered on 17 May 2012, 06:35 PM
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");
}
0
Daniel
Top achievements
Rank 1
answered on 26 May 2012, 09:14 PM
a little bit improved to work on "multiple selection" grids
removeSelectedRow = function(){
    $.each($("#grid").data("kendoGrid").tbody.find(".k-state-selected"), function(index, value) {
      $("#grid").data("kendoGrid").removeRow(value);
    });
};

@Andrew thx!
0
Ety
Top achievements
Rank 1
answered on 11 Dec 2012, 10:51 AM
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!
0
Daniel
Telerik team
answered on 14 Dec 2012, 12:09 PM
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:

$("#grid .k-grid-toolbar .k-grid-destroy").on("click", function (e) {
    e.preventDefault();
    //your logic
});
An item can be removed either with the Grid removeRow method or the DataSource remove method. Regards,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Karty
Top achievements
Rank 1
answered on 24 Dec 2012, 05:44 AM
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"
                            });
                            });
0
Alexander Valchev
Telerik team
answered on 26 Dec 2012, 07:57 AM
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.
columns: [
    { field: "status", title: "Status", format: "{0:c}", width: "auto" },
    { field: "jobId", title:"CSV File", width: "auto" }, 
    { command: "destroy" }
],

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
jc mag
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
jc mag
Top achievements
Rank 1
Jeremy
Top achievements
Rank 1
Guru
Top achievements
Rank 2
Andrew
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
Ety
Top achievements
Rank 1
Daniel
Telerik team
Karty
Top achievements
Rank 1
Share this question
or