1. Home
  2. Forum
  3. Vue
  4. How to load grid with empty row initially and always have empty row at the bottom without using toolbar

How to load grid with empty row initially and always have empty row at the bottom without using toolbar

Hi Team,

I am working on requirement where grid has to be loaded initially with empty row and need to always have an empty row at the bottom to add new items. I want to achieve this without using toolbar.

I am adding gif image for reference.



Thanks & Regards,
Sandeep G


Attachment: Grid_with_empty_row_57247a70.zip

3 Replies
RS Rajapandiyan Settu Syncfusion Team September 20, 2021 10:44 AM UTC

Hi Sandeep,  
  
Thanks for contacting Syncfusion support. 

Based on your requirement, you want to maintain the edit form always at the bottom of the Grid to add a record. We have prepared a sample based on this, kindly follow the below steps to achieve this. 

1. By setting newRowPosition as ‘Bottom’ in the editSettings, we render the edit form at the bottom of Grid for Add action.

https://ej2.syncfusion.com/vue/documentation/grid/edit/#adding-a-new-row-at-the-bottom-of-the-grid 

[App.vue] 

 
      editSettings: { 
        allowEditing: true, 
        allowAdding: true, 
        allowDeleting: true, 
        newRowPosition: "Bottom", 
      }, 
 


2. By using flag variable in the dataBound event, we shown the edit form at initial render of Grid. 


[App.vue] 

 
<template> 
  <div id="app"> 
    <ejs-grid 
      ref="grid" 
      :dataSource="data" 
      :editSettings="editSettings" 
      :toolbar="toolbar" 
      :load="load" 
      :dataBound="dataBound" 
      :actionBegin="actionBegin" 
      :actionComplete="actionComplete" 
      height="273px" 
    > 
      ---- 
    </ejs-grid> 
  </div> 
</template> 
<script> 
-- 
 
Vue.use(GridPlugin); 
 
export default { 
  data() { 
    flag: false, 
    -- 
  }, 
  methods: { 
    load: function (args) { 
      this.flag = true; 
    }, 
    dataBound: function (args) { 
      if (this.flag) { 
        // below code is executed only at initial render of Grid 
        this.flag = false; 
        var grid = this.$refs.grid.$el.ej2_instances[0]; 
        grid.addRecord();  // perform the add action in Grid 
      } 
    }, 
    --- 
  }, 
}; 
</script> 
 


3. By default, the new records are saved at first position of the Grid. To save the newly added records at bottom position, use the below code in the actionBegin event of Grid. 



[App.vue] 

 
    actionBegin: function (args) { 
      if (args.requestType === "save" && args.action === "add") { 
        var grid = this.$refs.grid.$el.ej2_instances[0]; 
        args.index = grid.currentViewData.length;  // add the record at bottom of Grid 
      } 
    }, 
 


4. Once the record is saved in the Grid, the actionComplete event will be triggered. In that event, you can execute addRecord method to show edit form in the Grid. 



[App.vue] 

 
    actionComplete: function (args) { 
      var grid = this.$refs.grid.$el.ej2_instances[0]; 
      if (args.requestType === "save" && args.action === "add") { 
        grid.addRecord(); // execute the addRecord method after saving action done  
      } 
      if (args.requestType === "add") { 
        setTimeout(() => { 
          args.form.querySelector("#" + grid.element.id + "OrderID").focus(); // focus the input of OrderID column 
        }, 100); 
      } 
    }, 
 


We have prepared a sample for your reference. You can get it from the below link. 


Please get back to us if you need further assistance with this. 

Regards,  
Rajapandiyan S 


SG Sandeep G September 23, 2021 07:53 AM UTC

Hi Rajapandiyan,

Thanks for you reply. I am able to add new empty record  but unable to set focus to the input.

I am getting below error 




I have editTemplate in row's first column

itemCodeTemplate: function() {
      return {
        template: Vue.component('itemcodeTemplate', {
          template: `<ejs-autocomplete
                :dataSource="productMaster"
                :filtering="getProducts"
                @change="changeSelectedProduct"
                ref="sideBarSearchInline"
                v-model="data.ItemCode"
                :focus="getProducts"
                :fields="productSearchFields"
              ></ejs-autocomplete>`,
          data() {
            return {
              data: {},
              productMaster: [],
              itemAddObj: {},
              productSearchFields: { text: 'ItemCode', value: 'ItemNumber' }
            }
          },
          methods: {
            getProducts(searchText) {
              console.log(searchText, 'autocomplete')
              if (!searchText.isInteracted) {
                return
              }
              this.itemCodeOptions = []
              const client = api()
              client
                .get('/products', {
                  params: {
                    requesttype: 16
                  }
                })
                .then(response => {
                  if (response.data.ProductMaster && response.data.ProductMaster.length > 0) {
                    this.productMaster = response.data.ProductMaster
                  }
                })
                .catch(error => {
                  console.error(error, 'Unable to search products!')
                  this.$bvToast.toast('Unable to search products!', {
                    title: `Error`,
                    variant: 'danger',
                    solid: true,
                    autoHideDelay: 3000
                  })
                })
            },
            /**
             * On item selection
             */
            changeSelectedProduct(event) {
              console.log('this.changeSelectedProduct', event)
              if (!event.isInteracted) {
                return
              }
              // var gridInst = this.$root.$children[0].$refs.SO_lineItem_Grid.ej2Instances
              // console.log(gridInst, 'gridInst')
              if (event.itemData && event.itemData.id) {
                const client = api()
                client
                  .get('/products', {
                    params: {
                      requesttype: 23,
                      _: new Date().getTime()
                    }
                  })
                  .then(response => {
                    if (response.data && response.data.ProductMaster && response.data.ProductMaster.length > 0) {
                      var gridInst = this.$root.$children[0].$refs.SO_lineItem_Grid.ej2Instances
                      console.log(gridInst, 'gridInst')
                      // update value of current row here
                    }
                  })
                  .catch(error => {
                    console.error(error, 'Unable to get product MRP details')
                    this.$bvToast.toast('Unable to get product MRP details!', {
                      title: `Failed`,
                      variant: 'danger',
                      solid: true,
                      autoHideDelay: 3000
                    })
                  })
              }
            }
          }
        })
      }
    },


Package.json

  "dependencies": {
    "@syncfusion/ej2-vue-calendars": "^19.2.62",
    "@syncfusion/ej2-vue-dropdowns": "*",
    "@syncfusion/ej2-vue-grids": "*",
    "@syncfusion/ej2-vue-treegrid": "^19.1.67",
    "axios": "^0.21.1",
    "bootstrap": "4.5.3",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "font-awesome": "^4.7.0",
    "moment": "^2.29.1",
    "vue": "^2.6.12",
    "vue-autosuggest": "^2.2.0",
    "vue-good-table": "^2.21.10",
    "vue-i18n": "^8.24.4",
    "vue-loading-overlay": "^4.0.2",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },

Regards,
Sandeep G




RS Rajapandiyan Settu Syncfusion Team September 24, 2021 10:09 AM UTC

Hi Sandeep,  
  
Thanks for your update. 

We have validated your query, you can maintain the focus in the newly added edit form by executing addRecord method after some time interval in the actionComplete event. 



[App.vue] 

 
    actionComplete: function (args) { 
      if (args.requestType === "save" && args.action === "add") { 
      var grid = this.$refs.grid.$el.ej2_instances[0]; 
       // execute the addRecord method after some time interval to maintain the focus 
       setTimeout(() => { 
          grid.addRecord(); 
          }, 200); 
      } 
    }, 
 


Find the modified sample for your reference. 


Please get back to us if you need further assistance with this. 

Regards,  
Rajapandiyan S 


Loader.
Up arrow icon