We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

131592 Jul 18,2017 10:37 AM Aug 17,2017 08:04 AM JavaScript 7
loading
Tags: ejGrid
Luis Carlos
Asked On July 18, 2017 10:37 AM


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 [Syncfusion]
Replied On July 19, 2017 06:07 AM

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. 
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. 

Please let us know if you need further assistance 

Regards, 
Manisankar Durai. 


Luis Carlos
Replied On July 19, 2017 07:21 AM

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 [Syncfusion]
Replied On July 20, 2017 08:28 AM

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 

Please let us know if you need further assistance 

Regards, 
Manisankar Durai. 


Luis Carlos
Replied On July 20, 2017 11:19 AM

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 [Syncfusion]
Replied On July 21, 2017 08:38 AM

Hi Luis,  
 
As per your requirement, we have prepared a sample that can be referred from the following jsPlayground.  
 
 
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
Replied On August 16, 2017 06:50 AM

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 [Syncfusion]
Replied On August 17, 2017 08:04 AM

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. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;