How to customize edit dialog button in Vue Grid

[Sandra Bordier]

Dear support,

I used this documentation in order to create my Dialog Grid.
https://ej2.syncfusion.com/vue/documentation/grid/edit/#dialoginline-template 

However, I did not find the way to customize the buttons "cancel" and "save". I would like to change the label & colors.

Can you help me ?

Best regards,

[Manivel Sellamuthu]

Hi Sandra, 

Greetings from Syncfusion support. 

You can change the label of the Dialog using Grid localization and color of the Dialog using CSS. Please refer the below code example and sample for more information. 

<template> 

  <div id="app"> 

    <ejs-grid 

      ref="grid" 

      :dataSource="data" 

      :toolbar="Toolbar" 

      allowPaging="true" 

      :editSettings="editSettings" 

    > 

      <e-columns> 

.  .  . 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import { L10n, setCulture } from "@syncfusion/ej2-base"; 

 

Vue.use(GridPlugin); 

// changing the label of the buttons 

L10n.load({ 

  "en-US": { 

    grid: { 

      SaveButton: "Allow", 

      CancelButton: "Deny", 

    }, 

  }, 

}); 

 

export default Vue.extend({ 

  data: () => { 

    return { 

      data: gridData, 

      wrapSettings: { wrapMode: "Content" }, 

      customAttributes: { class: "customcss" }, 

      pageSettings: { pageSize: 5 }, 

      Toolbar: ["Add", "Delete", "Edit"], 

      editSettings: { 

        allowEditing: true, 

        allowAdding: true, 

        allowDeleting: true, 

        mode: "Dialog", 

        template: function () { 

       . . .  

    }; 

  }, 

  methods: {}, 

  provide: { 

    grid: [Edit, Page, Toolbar, ContextMenu], 

  }, 

}); 

</script> 

 

<style> 

@import https://cdn.syncfusion.com/ej2/material.css;
// changing the color of the buttons 

.e-footer-content button.e-control.e-btn.e-lib.e-primary.e-flat { 

  background: blanchedalmond; 

  color: green; 

} 

.e-footer-content button.e-control.e-btn.e-lib.e-flat { 

  color: red; 

} 

</style> 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/global-local/#localization 

Sample: https://codesandbox.io/s/166131-sample-2ysvh?file=/src/App.vue 

Please let us know if you need further assistance. 

Regards, 

Manivel 

[aurelian]

how can i do the same but in angular? to have a custom label for the buttons on ej-dialog....

[Rajapandi Ravi]

Aurelian,

Also, the locale text for the Save and Cancel buttons has been changed by overriding the default locale strings. We have already discussed about your requirement in our documentation which can be accessed from the below link,

Documentation: https://helpej2.syncfusion.com/angular/documentation/grid/editing/dialog-editing#customize-edit-dialog