How to prevent on Save (custom) button?

[Shivani]

How to prevent on save button about validation?
like if i click on save button, first check or prevent whether validation is true or false or something like that then only move forward..
here SAVE button i created (custom).

[Rajapandi Ravi]

Hi Shivani, 

Greetings from syncfusion support 

Before we proceed with your query, we would like to confirm the following details.  

1)  Confirm whether are you using Essential JavaScript 1 Or Essential JavaScript 2. 

2)  Share the grid code example. 

3)  Since we have not understanding your requirement, So please share your exact requirement scenario with detailed information. 

Regards,  

Rajapandi R

[Shivani]

Hello, 
I am using Vue.
I am using custom-created  SAVE button to saving records from DATA GRID. I put validation on each column but I want when I go fo save at that time also again need to check that all validation is okay or not..
right now I don't know such an event. 

I am using Data Grid validation only.

<e-column field='Cate1Code' :headerText='localizedArray.Lbl.cate1Code' :validationRules='cate1CodeRules'></e-column>

cate1CodeRules: {

        required: [true, localizeConstants.Msg.cate1CodeRequired]

},

but in that, it invokes when the cell is unfocused. and I want on save button also. right now if the user directly clicks on the save button then there is no validation or something to prevent saving records. On save button I simply call API to save the record. If possible then share with example in Vue

[Rajapandi Ravi]

Hi Shivani, 

Based on your query you need to display validation when click on the external save button in the toolbar. To achieve your requirement by using toolbar click event.  

In toolbarClick event we have called the Grid endEdit() method. If Grid is in editable state, you can save a record by invoking endEdit. Before saving a record its validate the edited or added rowData and its display the error message when it does not meet the required condition in that validation function. Please refer the below code example and sample for more information. 

In this below sample, we have used the custom validation for CustomerID column. 

<template> 

  <div id="app"> 

    <div> 

      <ejs-grid 

        ref="grid" 

        :dataSource="data" 

        :allowSorting="true" 

        :toolbar="toolbar" 

        :editSettings="editSettings" 

        :toolbarClick="clickHandler" 

        height="273px" 

        id="grid" 

      > 

        <e-columns> 

          <e-column field="CaseID" headerText="Order ID" :isPrimaryKey="true" width="100"></e-column> 

          <e-column 

            field="CustomerID" 

            headerText="Customer ID" 

            :validationRules="customerIDRules" 

            textAlign="left" 

          ></e-column> 

        </e-columns> 

      </ejs-grid> 

    </div> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, Toolbar, Edit, Sort } from "@syncfusion/ej2-vue-grids"; 

import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons"; 

Vue.use(ButtonPlugin); 

Vue.use(GridPlugin); 

export default { 

  name: "App", 

  data: () => { 

    return { 

      data: [ 

          .  .  .  . 

       ], 

      formatOptions: { type: "date", format: "M/d/y" }, 

      editSettings: { 

        allowEditing: true, 

        allowAdding: true, 

        allowDeleting: true, 

        mode: "Normal" 

      }, 

      toolbar: [ 

        "Add", 

        "Edit", 

        "Delete", 

        "Update", 

        "Cancel", 

        { text: "Custom SaveButton", tooltipText: "Save", id: "savebutton" } 

      ], 

      customerIDRules: { 

        required: true, 

        minLength: [ 

          args => { 

            return args["value"].length >= 5; 

          }, 

          "Need atleast 5 letters" 

        ] 

      } 

    }; 

  }, 

  methods: { 

    clickHandler: function(args) {    //toolbarclick event 

      if (args.item.id === "savebutton") { 

        this.$refs.grid.endEdit();     //you can save a record by invoking endEdit 

      }    

    } 

  }, 

  provide: { 

    grid: [Toolbar, Edit, Sort] 

  } 

}; 

</script> 

Sample: https://codesandbox.io/s/vue-template-3vugh?file=/src/App.vue:0-5297 

Regards, 

Rajapandi R

[Shivani]

Hello, 

Thank you for your reply but that toolbar of buttons I am not using SyncFusion toolbar.
I am using our Custom  Created ToolBar for Button.

So, Here validation called (that is from SyncFusion) but when I leave focused from the cell. 
Now I am going to save a record like this (Click on SAve button) then it calls API but as we still have an error. 

so basically it doesn't allow to call API or save a record into DB.

Now On Save Button, I want to prevent if the validation doesn't fulfill or something. 
I used DataGrid, validation from SyncFusion. 

But upper toolbar of buttons i am not using from SyncFusion.

[Rajapandi Ravi]

Hi Shivani, 

If you are using the external save button in the toolbar, in this save button click function we have called the Grid endEnd() method to save the record. This method start to perform the saving action and calls the API, if you defined the validation rules in Grid columns this method will validate the columns and showing error message when it does not meet the required condition in that validation function. It was the default behavior of the Grid.  

And from your query, you have mentioned while save a record by clicking on that external button it calls the API while having an validation error message. By default while saving the record if the record displays the any validation message the edited record was not sent the post to the server. But in your scenario we suspect you are calling your API somewhere in your Application. To prevent the API call we suggest you to call the API in actionBegin event of Grid.  Please refer the below code example for more information. 

 

<script> 

    function begin(args) { 

        if (args.requestType === "save") { 

            //Call your API here 

        } 

    } 

</script> 

 

If you still face the issue, Please share the below details that will be helpful for us to provide better Solution. 

1)   From validating your query we suspect that you like to prevent the validation message and save the record while clicking on that external save button. So please confirm if your requirement also same with our suspect scenario. 

2)   In your query, you have mentioned while save a record while clicking on that external button it calls the API. So Please the details where you can the call that API 

3)   Please share your complete Grid rendering code. We would like to see how you customized the grid and which datamanager adaptor are used in your application. 

Regards,
Rajapandi R

[Shivani]

hello,

thank you for your reply.. yes I am using that only which you mention

function begin(args) { 

        if (args.requestType === "save") { 

            //Call your API here 

        } 

    } 

and then i call this 

if (!this.$refs.grid.ej2Instances.editModule.formObj.validate()) {

}

and here I can prevent.

Thank you.

[Mohammed Farook J]

 Hi Shivani, 

 

We have suspect that you want to prevent the Grid save action based on your condition. We have suggest to use , ‘args.cancel’ as ‘true’  in ‘actionBegin’  event with requestType as ‘save’. 

 

 

<script>  

    function begin(args) {  

        if (args.requestType === "save") {  

            //Call your API here  

                        if (!this.$refs.grid.ej2Instances.editModule.formObj.validate()) { 

                                      args.cancel = true //you can prevent the save 

            } 

                          

        }  

    }  

</script>  

 

 

 

Please find the documentation for your reference. 

 

https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin 

 

https://ej2.syncfusion.com/vue/documentation/api/grid/saveEventArgs/ 

  

Regards, 

J Mohammed Farook