Using a Kendo UI Window as a confirmation prompt in a Grid...

It is possible, I will assume we are working with inline edit mode, if not you will have to adapt it.
First on your editable property of kendoGrid:

In the commands column you should set this:

In your css (to make it look like the original delete button):

And then with javascript too using the grid dataBound callback, bind the click on this custom button:


Here you have a sample with all these changes: http://jsbin.com/uwecuh/1 

Hi Nohinn,

That's perfect thanks! I had to adjust it for my MVC wrapper, but it works exactly as I need it to.

Much appreciated,

Neil.

Edit: One minor point though the CSS for 

.k-grid-custom {}

actually renders as .k-grid-Custom {} 

Note the uppercase 'C' in custom :)

It is rendering as k-grid-Custom because you must have set the command name to "Custom", the name you set there will be added to "k-grid-".
Anyway I'm glad it helped you :)

Ah that explains it...

Thanks again,

Neil.

Hi

I've just stumbled across this and it's just what I'm after.

I've adapted your example to use a Twitter Bootstrap modal windows and it's displays perfectly.

Do you have any idea how to actually delete the row (from the remote datasource) rather than just remove it from the DOM?

Thanks

This is the code I have currently. It's the actual removal of the record from the dataSource that I can't get working:

I don't seem to be able to retrieve the dataItem to call dataSource.remove. Chrome's console gives: Uncaught TypeError: Cannot read property 'uid' of undefined console

because g.dataItem($('#confirmWindow').data('row')[0])
is returning undefined

I think I'm close, can somebody please help me get past the final hurdle.

Thanks

Ahhh!

I was being stupid... I'm trying to add this to a detail grid, but was getting rows from the parent grid.

Fixed it now by assigning a variable to the detail grid using 
var detail = detailRow.find(".assignments").kendoGrid({...

This simplifies the custom delete routine too:

Hope this is useful to somebody.

Hello Nohinn,

I tested your code on http://jsbin.com/uwecuh/1 but there is one problem I found.
The Delete button does not trigger the click-event if the button Edit and then Cancel is clicked before,
so the confirmation-window does not come up.

Here is how to rebuild / test the problem:

1. Go to http://jsbin.com/uwecuh/1#
2. Click the Delete button, (e.g. within 1st row), the window comes up - so no problem at all, close the window again, by clicking No
3. Click the Edit button (of 1st row)
4. Click the Cancel button (of 1st row)
5. Click the Delete button (of 1st row)
6. The confirmation-window does not come up anymore!?!
7. Click the Delete button of any other row, the window comes up again
8. Click the Delete button of 1st row, the window does not come up!?!

So it seems to be an issue if Edit  and Cancel  is clicked and then the confirmation-window does not come up anymore
Is this a bug or a feature?

How to solve this problem?

Thanks for any help!

Hi Timon,

The provided example uses outdated version of Kendo UI. To fix the issue, please use perform the following steps:

1. Updated to the latest official release (2013.1.319).
2. Attach the event handler of the destroy button via columns.command.click property
   
   {name: "custom", text: "Delete", click: deleteClick }
3. Build and show the confirm dialog:
   
   function deleteClick(e) {

     var row = $(e.target).closest("tr");

    

     $('<div id="confirmWindow">Are you sure you want to delete this record?<p><input type="button" id="btnYes" value="Yes" /><input type="button" id="btnNo" value="No" /></p></div>').appendTo(document.body);

      

     $('#confirmWindow').kendoWindow({

       modal: true,

       close: function() {

         setTimeout(function(){

           $('#confirmWindow').kendoWindow('destroy');

         }, 200);

       }

     });

      

     $('#confirmWindow').find('#btnNo').click(function(){

       $('#confirmWindow').kendoWindow('close');

     });

      

     $('#confirmWindow').find('#btnYes').click($.proxy(function() {

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

       grid.removeRow(this);

       $('#confirmWindow').kendoWindow('close');

     }, row));

      

   }

Kind regards,
Alexander Valchev
the Telerik team

Hi Alexander Valchev,

thanks that helped a lot!

But two more questions:

1: Why the window's close function is not called directly but using a setTimout with delay of 200ms?

2. What is the $.proxy(...) used for in the #btnYes click funktion?


Thanks again!

Hello Timon,

Regarding your questions:

1. This was part of the original implementation. I am not sure what is the purpose of 200ms timeout. Actually it is not necessary to create and destroy the window widget every time, you can just open and close it.
2. $.proxy is used to change the context of a JavaScript function. I used it to pass a reference to the row element inside click event handler.
   
   $.proxy(function() {

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

     grid.removeRow(this); //'this' represents 'row'

     $('#confirmWindow').kendoWindow('close');

   }, row)

For more information please check jQuery API reference:

• http://api.jquery.com/jquery.proxy/
  
  

Regards,
Alexander Valchev
the Telerik team