to change the appereance of the alert, when you don't clic on any row

[Luis Carlos]

Hi.

When I clic on edit or delete button (image 1) without select a row of "ejGrid" component, an alert is shown (image 2). I would like to change the appereance of this alert (image 2) to another custom alert (image 3). How can I do it?

Image 1

Image 2: 

Code line: alert("message");

Image 3:

Code line: showMessage("message");

I will be awaiting for your reply, thanks in advance.

Kind regards, Luis.

[Mani Sankar Durai]

Hi Luis, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we found that you would like to prevent the default alert message in grid and to show the customized alert dialog. Based on your requirement we have prepared a sample that can be available from the below link. 

Link:  http://jsplayground.syncfusion.com/fb3xmd4d 

Refer the code example 

... 

                <div id="Grid"></div> 

     

    <div id="basicDialog" title="Alert!!!"> 

        <label>No records selected !!! </label> 

        <br /> 

        <input class="e-btn" id="btnOpen" style="left: 35%; position: absolute; top:45px" value="OK" /> 

    </div> 

        <script type="text/javascript"> 

            $(function () { 

                $("#Grid").ejGrid({ 

                   ... 

                    toolbarClick: function (args) { 

                        if ((args.itemName == "Edit" || args.itemName == "Delete") & this.getSelectedRecords().length == 0) { 

alert = function () { }; //prevent the default alert popup 

                            //here you can call your own customize alert method 

                           $("#basicDialog").ejDialog("open"); 

                            

                        } 

                    }, 

                    columns: [ 

                                 ... 

                                                ] 

                }); 

 

                $("#basicDialog").ejDialog({ 

                    width: 300, 

                    showOnInit:false,   //dialog will not show on initial rendering 

                }); 

                $("#btnOpen").ejButton({ size: "medium", click: "onOpen", type: "button", height: 30, width: 70 });          //rendered ok button 

 

            }); 

      </script> 

    <script> 

        function onOpen(args) { 

            $("#basicDialog").ejDialog("close");       //close the dialog when clicking the button 

        }  

    </script> 

</body> 

</html> 

 

 

 

Note: Likewise you can customize your own text or any content inside the dialog. 

Refer API link. 

Link: https://help.syncfusion.com/api/js/ejdialog#members:showoninit 

https://help.syncfusion.com/api/js/ejgrid#events:toolbarclick 

Please let us know if you need further assistance 

Regards, 

Manisankar Durai. 

[Luis Carlos]

Thanks!! It works perfectly!

In addition, I'd like to know if it's possible to prevent the default alert message (image 1) in grid and to show the customised alert dialog (image 2).

Image 1 

Image 2

I will be awaiting for your reply, thanks again!

Regards, Luis.

[Mani Sankar Durai]

Hi Luis, 

We have checked your query and based on your requirement we have already created a Syncfusion knowledge base regarding how to customize the showDeleteConfirmDialog and the same can be available from the below link 

Link: https://www.syncfusion.com/kb/5059/how-to-customize-the-delete-confirmation-dialog 

Please let us know if you need further assistance 

Regards, 

Manisankar Durai. 

[Luis Carlos]

Hi again.

This solution is in ASP.NET, could you provide me a solution only with javascript? please. Also, I would like to see an example using http://jsplayground.syncfusion.com/ in order to understand it better.

I will be awaiting for your reply, thanks again.

Regards, Luis Carlos.

[Seeni Sakthi Kumar Seeni Raj]

Hi Luis,  

 

As per your requirement, we have prepared a sample that can be referred from the following jsPlayground.  

 

http://jsplayground.syncfusion.com/40ogajiw 

 

In the dataBound event of the Grid, Confirmation Dialog’s beforeOpen even has been bound. Later, in the beforeOpen event while clicking delete item, the confirmation dialog will be customized. Refer to the following code example.  

 

    <script type="text/x-jsrender" id="Content"> 

        <tr><td>Order ID:</td><td>{{:OrderID}}</td></tr> 

                    . . . 

    </script> 

    <div id="Grid"></div> 

 

    <script type="text/javascript"> 

        $(function () { 

            var temp = $.templates("#Content"); 

            $("#Grid").ejGrid({ 

                dataSource: window.gridData, 

                allowPaging: true, 

                dataBound: function (args) { 

                    $("#GridConfirmDialog_wrapper").prepend("<div id='GridConfirmDialog_title' class='e-titlebar e-header e-draggable e-js' tabindex=''><span class='e-title'>Delete Confirmation Dialog</span></div>") 

                    $("#GridConfirmDialog").ejDialog({ 

                        beforeOpen: function (args) { 

                            var gridobj = $("#Grid").data("ejGrid"); 

                            var data = gridobj.model.currentViewData[gridobj.model.selectedRowIndex];//get the details of the selected record 

                            $("#GridConfirmDialog").find(".details").remove(); 

                            $("#GridConfirmDialog").prepend("<div class= details><table>" + temp.render(data) + "</table></div>")// prepend the selected record details to the ejDialog 

                        } 

                    }); 

                }, 

            }); 

        }); 

    </script> 

 

Regards,  

Seeni Sakthi Kumar S. 

[Luis Carlos]

Hi again.

Maybe I didn't explain well, let me try it again.

What you're doing in your example (http://jsplayground.syncfusion.com/40ogajiw) is adding a "div" element HTML to the "ejDialog" component. While, I would like to remove the "ejDialog" component and create a new component (example: alert(); or customiseFunction();) with the same event listener in the button with label "OK".

Please, if you find a solution, let me know as soon as possible, thanks in advance.

Regards, Luis Carlos.

[Mani Sankar Durai]

Hi Luis, 

We have analyzed your query and we suspect that you would like to customize the alert box instead of customizing ejDialog confirmation box. Normally when deleting the records we have shown the confirmation dialog as ejDialog and it is the behaviour. To overcome and to show the alert box with customized we suggest you to disable the properly showDeleteConfirmDialog as false. 

Also to show the alert box and to customize alert box refer the code example 

<div id="Grid"></div> 

 

    <script type="text/javascript"> 

        $(function () { 

            window.alert = function (txt) {    //triggers when alert method is called 

                createCAlert(txt);    // method can be used to customize the alert message 

            } 

              $("#Grid").ejGrid({ 

                dataSource: window.gridData, 

                allowPaging: true, 

editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: false }, 

               toolbarClick:function(args){   //triggers when clicking delete icon in grid 

if (args.itemName == 'Delete' && this.getSelectedRecords().length) 

                        alert("Are you sure you want to delete this records?");  

//show the alert message instead of showing ejDialog  

                        

                }, 

... 

                columns: [ 

                        ... 

                ] 

            }); 

        }); 

    </script> 

    <script> 

        function createCAlert(txt) { 

          //here you can customize the alert box"; 

 

        } 

    </script> 

Alert message can be displayed when clicking the delete icon in toolbar and it can be triggered using toolbarClick event in grid.  

Refer the documentation link. 

Link: https://help.syncfusion.com/api/js/ejgrid#events:toolbarclick 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai.