Customize confirmation dialog of MVC Grid Delete Row

[Sam]

Good morning everyone,

I need to customize the look and feel of the "Delete" confirmation dialog of a record of the Telerick MVC Grid.  Currently, the confirmation dialog does not look good in IE and i need to be able to change the style, css, look, etc of that confirmation dialog.  is there a way to do this?

I found this article in the forum:
http://www.telerik.com/community/forums/aspnet-mvc/grid/custom-delete-confirmation-message.aspx 

Where it tells you how to customize the confirmation dialog MESSAGE but does not indicate how would one be able to customize the confirmation dialog style, color, look & feel, etc.  Something like the example a poster in that article named "Beni" posted pointing to some sample jQuery confirmation dialogs at:  jQuery alert 

I hope there is a way to do this, to be able to change the style and color and stuff.

Thank you very much all for your help on this matter.

[Petur Subev]

Hello Sam,

Generally speaking such customization is not supported. You cannot change the built-in window because the confirm() dialog is the only blocking operation which will suspend the execution and wait for a response (Ok/Cancel) from the user and then prevent or not the delete command.
What you can do if you are using AjaxBinding is to use template column with a button inside

e.g.

<input type='button' class='t-button' onclick='showYourDeleteWindow(this)'/>

which onclick shows that custom window which depending on the user choice calls the deleteRow method or not by passing to it the corresponding tr element.

Kind regards,
Petur Subev
the Telerik team

[Sam]

thank you very much Petur,

i will give that a try, really appreciate your help on this!!!

[Jeremy]

Delete a MVC Telerik Grid row using a custom HTML popup instead of the built-in OK/Cancel JavaScript dialog. Also uses a custom bound column with the "Delete" image of my choosing. Sorry if there are errors in my code but I hope you get the general idea.

Sample Telerik code at bottom in ASP.NET MVC *Razor* syntax.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    function deleteClicked( obj ){
        clickedrow = $(obj).closest("tr");   //Gets the TR tag object of the row clicked
        showCustomAlert('Are you sure you want to delete this record?'
                , 'Confirm Delete', 'yesno', 'completeDelete();');
        //The customAlert() method here is for you to customize, popping up your nice-looking html
        //box, in my case the fourth argument is the callback function for when the user clicks "Yes"
    }
    function completeDelete(){
        if( customAlertResult == 'yes' ) {
            $("#Grid").data("tGrid").deleteRow(clickedrow);
        }
    }

    //CUSTOM HTML ALERT BOX -- BEGIN
    var customAlertResult = null;   //Valid results: 'ok', 'cancel', 'yes', 'no', etc.
    var customAlertCallback;   //Stores javascript to run after OK/Cancel/Yes/No button clicked
    $('body').append('<div id="custom-alert" style="display: none;"></div>');
    function showCustomAlert( message, title, buttons, callbackjs ){
        customAlertCallback = callbackjs;
        var myhtml = '';
        if( title != null && title.length > 0 ) {
            myhtml = myhtml + '<h3 style="border-bottom: 1px solid silver; width: 97%;">' + title + '</h3>';
        }
        myhtml = myhtml + '<table style="width: 97%; padding-bottom: 10px;"><tr><td><h3 class="subtext-dark">' + message + '</h3></td></tr>';
        myhtml = myhtml + '<tr><td align="right" style="padding-top: 15px;">';
        switch( buttons ) {
            case "okcancel":
                myhtml = myhtml + '<input type="button" value=" OK " onclick="clickCustomAlertButton(\'ok\');" />';
                myhtml = myhtml + '&nbsp;<input type="button" value="Cancel" onclick="clickCustomAlertButton(\'cancel\');" />';
                break;
            case "yesno":
                myhtml = myhtml + '<input type="button" value="Yes" onclick="clickCustomAlertButton(\'yes\');" />';
                myhtml = myhtml + '&nbsp;<input type="button" value=" No " onclick="clickCustomAlertButton(\'no\');" />';
                break;
            default:
                myhtml = myhtml + '<input type="button" value=" OK " onclick="clickCustomAlertButton(\'ok\');" />';
                break;
        }
        myhtml = myhtml + '</td></tr>';
        myhtml = myhtml + '</table>';

        $('#custom-alert').html(myhtml);
        $('#custom-alert').css({top:'35%',left:'50%',margin:'-'+($('#custom-alert').height() / 2)+'px 0 0 -'+($('#custom-alert').width() / 2)+'px'});   //Center it
        $('#custom-alert').show();
    }
    function clickCustomAlertButton(result){
        customAlertResult = result;
        $('#custom-alert').hide();
        if( customAlertCallback != null && customAlertCallback != 'undefined' && customAlertCallback.length > 0 ) {
            eval(customAlertCallback);
        }
    }
    //CUSTOM HTML ALERT BOX -- END
</script>

@(Html.Telerik().Grid(Model)
    .Name("Grid")
    .Editable(editing => editing.DisplayDeleteConfirmation(false))   //Suppresses OK/Cancel delete confirm
    .Columns(columns => {
        //Other data columns go here
        //Delete column is below
        columns.Bound(o => o.MyDataId).ClientTemplate("<img src=\"/Content/Images/Icons/delete16.png\" style=\"cursor: pointer;\" alt=\"Click to Delete <#= MyDataId #>\" onclick=\"deleteClicked(this);\" />")
            .Title("").ReadOnly().Filterable(false).Sortable(false)
            .Width(30);
        })
)