Articles in this section
Category / Section

How to change confirmation dialog message in Grid?

3 mins read

We can customize the confirmation dialog text using jQuery Grid Locale object. Refer the below code example,

Render the Grid control

 JS:

 
$("#Grid").ejGrid({
              // the datasource "window.gridData" is referred from jsondata.min.js
                dataSource: window.gridData,
                
                allowPaging: true,
          
                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true,showDeleteConfirmDialog:true, editMode: "batch" },
                
                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
                
                columns: [
                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 },
                        
                        { field: "CustomerID", headerText: 'Customer ID', width: 90 },
                        
                        { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 80 },
                        
                        { field: "ShipName", headerText: 'Ship Name', width: 150 },
                        ]
            });

 

MVC:

@(Html.EJ().Grid<EmployeeView>("Editing")
        .Datasource((IEnumerable<object>)ViewBag.datasource)
               .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().ShowDeleteConfirmDialog().EditMode(EditMode.Batch); })
            .ToolbarSettings(toolbar =>
            {
                toolbar.ShowToolbar().ToolbarItems(items =>
                {
                    items.AddTool(ToolBarItems.Add);
                    items.AddTool(ToolBarItems.Edit);
                    items.AddTool(ToolBarItems.Delete);
                    items.AddTool(ToolBarItems.Update);
                    items.AddTool(ToolBarItems.Cancel);
                });
            })
        .Columns(col =>
        {
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
            col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
            col.Field("EmployeeID").HeaderText("Employee ID").Width(80).TextAlign(TextAlign.Right).Add();
            col.Field("ShipName").HeaderText("Ship Name").Width(150).Add();
        })
)

Controller:

    namespace Sample.Controllers
    {
        public class GridController : Controller
        {
            public ActionResult GridFeatures()
            {
                var DataSource = new NorthwindDataContext().OrdersViews.ToList();
                ViewBag.datasource = DataSource;
                return View();
            }
        }
    }

 

ASP:

                
    <ej:Grid ID="Grid" runat="server" ClientIDMode="Static" AllowPaging="True" >
                    
           <EditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" ShowDeleteConfirmDialog="true" EditMode="Batch" />
           
           <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
                    
            <Columns>
                        <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90">       
                        </ej:Column>
                        
                        <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90">
                         </ej:Column>
                        
                        <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="80" TextAlign="Right" >
                        </ej:Column>
                         
                        <ej:Column Field="ShipName" HeaderText="Ship Name"   Width="150" >
                        </ej:Column>
            </Columns>
                 
     </ej:Grid>

 

namespace Sample
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Grid.DataSource = new MyDataDataContext().Orders.ToList();
            this.Grid.DataBind();
        }
 
    }
}

 

.Net core

<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource" cell-save="cellSave ">
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.Batch)" show-delete-confirm-dialog="true" ></e-edit-settings >
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' />
    <e-columns>
        <e-column field="OrderID" is-primary-key="true" header-text="Order ID" width="90"></e-column>
        <e-column field="CustomerID" header-text="CustomerID" width="90"></e-column>
        <e-column field="EmployeeID" header-text="Employee ID" width="80"></e-column>
        <e-column field="ShipName" header-text="ShipName" width="80" ></e-column>        
    </e-columns>
</ej-grid>
 

 

Angular

<ej-grid #grid id="Grid" [dataSource]="gridData" allowPaging="true"  [toolbarSettings]="toolbarItems" [editSettings]="editSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true" headerText="OrderID" width="90"></e-column>
        <e-column field="CustomerID" headerText="CustomerID" width="90"></e-column>
        <e-column field="EmployeeID" headerText="EmployeeID"  width="80"></e-column>
        <e-column field="ShipName" headerText="ShipName "  width="90"></e-column>        
    </e-columns>
</ej-grid>
 
[ts file]
 
export class AppComponent {
 public gridData; 
 public editSettings;
 public toolbarItems; 
 constructor() { 
 this.gridData = window.gridData;
 this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true,e ditMode : "batch",showDeleteConfirmDialog:true }; 
 this.toolbarItems={ showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]}; } }

 

 

 

By changing the properties text value in the locale object, we can customize the confirmation dialog text.

    
<script type="text/javascript">
        
       ej.Grid.Locale["en-US"] = {
            
            ConfirmDelete: "Change your text", // change your text instead of "Are you sure you want to Delete Record?"
 
            BatchSaveConfirm: "Change your text", // change your text instead of "Are you sure you want to save changes?"
 
            BatchSaveLostChanges: "Change your text", // change your text instead of "Unsaved changes will be lost. Are you sure you want to continue?"
 
            CancelEdit: "Change your text" // change your text instead of "Are you sure you want to Cancel the changes?"
 
    };
 
</script>

 

We have uploaded the predefined language packs for some commonly used cultures in the below GitHub location and refer to it for the corresponding culture. The culture file has localized texts for all the Syncfusion controls.

https://github.com/syncfusion/ej-global 

The output result will be as follows.

Change confirmation dialgoue

Figure 1: Change the confirmation dialog text.

 

Sample Link:

https://jsplayground.syncfusion.com/l2czcx1d

 

Conclusion

I hope you enjoyed learning about how to change confirmation dialog message in Grid.

You can refer to our jQuery Grid’s feature tour page to know about its other groundbreaking feature representations. You can also explore our jQuery Grid Control documentation to understand how to present and manipulate data.

For current customers, you can check out our jQuery components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our jQuery Grid and other jQuery Grid components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied