How to toggle columns visibility in read and inline edit mode

[Sandeep G]

Hi Team,

I have been working on a requirement, where grid has to load data with limited columns and when user changes it to edit mode, we need to show all required columns in adding new line next to the row. I am adding the screenshots please refer

Initial state of grid

When user changes to edit mode, need to add new line for the selected row

Regards,
Sandeep G

[Rajapandiyan Settu]

Hi Sandeep, 

Thanks for contacting Syncfusion support. 

Based on your requirement, you want to edit new columns in the Grid, but it is not shown when Grid in read state. You can achieve your requirement by using editSettings template feature of Gird. Find the below documentation for more information. 

Dialog Edit Template: https://ej2.syncfusion.com/vue/documentation/grid/edit/#dialoginline-template 

Demo: https://ej2.syncfusion.com/vue/demos/#/material/grid/dialog-template.html 

 

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

Regards, 

Rajapandiyan S 

[Sandeep G]

Hi Rajapandiyan,

Can we achieve the same with inline columns edit.

[Vignesh Sivagnanam]

Hi Sandeep 

Thanks for the update 

By default, In EJ2 Grid Inline editing, the row is automatically moved to the edit mode while editing the row. Before providing solution to your requirement, we need some more information to understand your exact requirement. So please share the below details, 

1. Explain your exact requirement in the grid with video demonstration. 

2. Are you want to externally add the additional row while editing? 

3. What is the exact use case of your requirement?  

Please get back to us for further assistance, 

Regards 

Vignesh Sivagnanam 

[Sandeep G]

Hi Vignesh,


We have a requirement where grid should show only limited columns initially, but when user changes grid state to edit mode we are supposed to show all the columns as editable fields with in row by opening accordion.
I have added the gif for reference

we don't require to add additional row. Our use case is to show limited columns in view mode and all columns in edit mode

Initial State


Regards,
Sandeep G

Attachment: chromecapture_(1)_acee8fd6.7z

[Rajapandiyan Settu]

Hi Sandeep, 

Thanks for your update. 

Before proceeding with requirement, we would like to share the behavior of Inline Edit in the Grid. 

When we using Inline Edit feature, the edit form shows the input element for the visible columns only. In which we are unable to show edit input for hidden columns in the Inline Edit Form. 

But you can achieve your requirement by using Dialog Edit feature. In which you can dynamically show input element for hidden columns in the Edit Dialog. We can achieve this using actionBegin and actionComplete event. 

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

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

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

[App.vue] 

 

<template> 

  <div id="app"> 

    <ejs-grid 

      ref="grid" 

      :dataSource="data" 

      :editSettings="editSettings" 

      :toolbar="toolbar" 

      :actionBegin="actionBegin" 

      :actionComplete="actionComplete" 

      height="273px" 

    > 

      <e-columns> 

        <e-column 

          field="OrderID" 

          headerText="Order ID" 

          textAlign="Right" 

          :isPrimaryKey="true" 

          width="100" 

        ></e-column> 

        --- 

        <e-column 

          field="ShipCountry" 

          headerText="Ship Country" 

          :visible="false" // hide the columns at render 

          editType="dropdownedit" 

          width="150" 

        ></e-column> 

        <e-column 

          field="ShipCity" 

          headerText="Ship City" 

          :visible="false" // hide the columns at render 

          editType="dropdownedit" 

          width="150" 

        ></e-column> 

        <e-column 

          field="ShipName" 

          headerText="Ship Name" 

          :visible="false" // hide the columns at render 

          editType="dropdownedit" 

          width="150" 

        ></e-column> 

        ---- 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

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

import { data } from "./datasource.js"; 

 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: data, 

      editSettings: { 

        allowEditing: true, 

        allowAdding: true, 

        allowDeleting: true, 

        mode: "Dialog", 

      }, 

      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"], 

    }; 

  }, 

  methods: { 

    actionBegin: function (args) { 

      if (args.requestType === "beginEdit" || args.requestType === "add") { 

        // show the particular columns while editing 

        this.$refs.grid.$el.ej2_instances[0].getColumnByField("ShipCountry").visible = true; 

        this.$refs.grid.$el.ej2_instances[0].getColumnByField("ShipCity").visible = true; 

        this.$refs.grid.$el.ej2_instances[0].getColumnByField("ShipName").visible = true; 

        this.$refs.grid.$el.ej2_instances[0].getColumnByField("ShipRegion").visible = true; 

        this.$refs.grid.$el.ej2_instances[0].getColumnByField("ShipPostalCode").visible = true; 

        this.$refs.grid.$el.ej2_instances[0].getColumnByField("ShipAddress").visible = true; 

      } 

    }, 

    actionComplete: function (args) { 

      if (args.requestType === "beginEdit" || args.requestType === "add") { 

        // hide the columns after the edit action 

        this.$refs.grid.$el.ej2_instances[0].getColumnByField("ShipCountry").visible = false; 

        this.$refs.grid.$el.ej2_instances[0].getColumnByField("ShipCity").visible = false; 

        this.$refs.grid.$el.ej2_instances[0].getColumnByField("ShipName").visible = false; 

        this.$refs.grid.$el.ej2_instances[0].getColumnByField("ShipRegion").visible = false; 

        this.$refs.grid.$el.ej2_instances[0].getColumnByField("ShipPostalCode").visible = false; 

        this.$refs.grid.$el.ej2_instances[0].getColumnByField("ShipAddress").visible = false; 

      } 

    }, 

  }, 

  provide: { 

    grid: [Page, Edit, Toolbar], 

  }, 

}; 

</script> 

 

<style> 

@import https://cdn.syncfusion.com/ej2/material.css; 

</style> 

 

Screenshot: 

 

Sample: https://codesandbox.io/s/vue-template-forked-y3pf6?file=/src/App.vue 

Note: The hidden column field should be available in the Grid’s dataSource. Then only the edited value update in the dataSource. 

Please let us know if you have any concerns. 

Regards, 

Rajapandiyan S 

[Sandeep G]

Hi  Rajapandiyan,

Thanks for your prompt reply.


Regards,
Sandeep G

[Rajapandiyan Settu]

Hi Sandeep, 

We are glad that the provided solution was helpful for you. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandiyan S