Replace confirm() with jquery dialog box

[Khushali]

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

[GungFooMon]

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!

[Khushali]

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

[GungFooMon]

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!

[Khushali]

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

[GungFooMon]

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!