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

Replace confirm() with jquery dialog box

5 Answers 221 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Khushali
Top achievements
Rank 1
Khushali asked on 27 Jun 2012, 12:04 PM
Hi,

Can anyone please suggest, how can i replace the confirm alert box on click of delete button of the grid with a jquery dialog box, having ok and cancel buttons?

Regards,
Khushali

5 Answers, 1 is accepted

Sort by
0
GungFooMon
Top achievements
Rank 1
answered on 27 Jun 2012, 03:54 PM
Hi!

Use the delegate function to register a click handler to the delete button.
Here is a function i use as an example of what i mean:

var gridDelete = null;
var gridDeleteTarget = null;
 
function registerGridDeleteModal(target) {
    // register delete click handler
    target.delegate(".delete", "click", function(e) {
        e.preventDefault();
        gridDelete = target.data("kendoGrid");
        gridDeleteTarget = this;
        // display the modal
        $.modal.alert('<h4 class="center">do really want to delete this row?</h4>',{
            contentBg: true,
            width: false,
            actions: {},
            buttons: {
                'Yes' :      { click: function(modal) { gridDeleteEntry(gridDelete, gridDeleteTarget); }, classes: 'blue-gradient glossy' },
                'No' :    { click: function(modal) { modal.closeModal(); }, classes: 'red-gradient glossy' },
            }
        });
    });
}

Regards!
0
Khushali
Top achievements
Rank 1
answered on 28 Jun 2012, 05:14 AM
Hi,

Can u please send a working demo? I tried out what you have suggested, but it did not work. Don't know where am i making mistake..

Thanks in advance,
Khushali
0
GungFooMon
Top achievements
Rank 1
answered on 28 Jun 2012, 08:39 AM
Did you make sure to change the class of the delete command button to "delete" or change the class in the delegate statement to the default class given to the delete button by the grid??

the important line is:

target.delegate(".delete", "click", function(e) {

the above line says something along the lines of: "delegate the click event of all elements with the class 'delete' to the function specified"

I hope this helps,
  Regards!
0
Khushali
Top achievements
Rank 1
answered on 28 Jun 2012, 08:43 AM
Hi,

Ya, i replaced the ".delete" with kendo's delete button's class - ".k-grid-delete". What is happening is that alert comes first, and then it enters into the click handler function.

Regards
Khushali
0
GungFooMon
Top achievements
Rank 1
answered on 28 Jun 2012, 08:49 AM
the statement:
e.preventDefault();
should prevent the default action (alert poping up).. Are you sure you included this in your code?

If you did that then the original grid event will probably be firing first so it won't matter what you put in your click handler..
So either unbind that original event or maybe you should just make a custom command button like this:
{"command":[
    {"text":"Delete","className":"delete","imageClass":"k-icon k-delete"}
],"filterable":false,"width":200}];

More info at this link:
http://demos.kendoui.com/web/grid/custom-command.html

Regards!
Tags
Grid
Asked by
Khushali
Top achievements
Rank 1
Answers by
GungFooMon
Top achievements
Rank 1
Khushali
Top achievements
Rank 1
Share this question
or