How to add the custom content above the particular row respecively in the data grid.

[Punith B N]

Hi Team,

As I am developing the application there I had a requirement that I need to add some content above the individual row separate custom data I have to insert in the data grid. Please provide me with the solution to do the same.

For reference i have attached screenshots

 The screenshot1(with custom content above the row) is the same that I need to achieve in screenshot2 (without custom content)

Screenshot1 

Screenshot2

Thank you,

Punith BN

 

[Rajapandi Ravi]

Hi Punith, 

Greetings from Syncfusion support 

We understand that you like to add the custom content above the row. Before we start providing solution on your query, we need some information for our clarification. Please share the below details that will be helpful for us to provide better solution. 

1)              We have analyzed your shared screenshot 1 and we could see that in custom content you are displaying some text, anchor link and remove button. So please share your use case and  

                  exact requirement scenario with detailed description. 

2)              Please confirm for every above row you like to add the custom content or not. 

Regards, 

Rajapandi R 

[Punith B N]

Hi team,

As I mentioned I need to add custom data above every row in the data grid.

1) With the anchor link ( + sign) left corner of the data grid of the custom data section which is to collapse the row cell(data) as shown in the video attached.

2) Buttons are there as per the requirement of the project i.e. is to perform some actions that are present in the custom section as shown in the video attached.

Please provide the solution for the query I have mentioned above asap.

Regards,

Punith BN

Attachment: recordGrid_a60c1d29.zip

[Rajapandi Ravi]

Hi Punith, 

Thanks for the update 

We have checked your shared information and we suspect that your requirement is suitable for our hierarchy binding feature of Grid . If so, please check the below documentation and online demo sample links for more details on this,  

  

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/hierarchy-grid/  

  

Online demo sample: https://ej2.syncfusion.com/vue/demos/#/material/grid/hierarchy-grid.html 

  

Please get back to us if you need further assistance 

Regards, 

Rajapandi R 

[Punith B N]

Hi Team,

Thanks for your response to the issue in / Grid / Hierarchical Binding.

But as I am working in the Datagrid i.e. Hierarchical Binding, there in childGrid Object I need to customize the Grid using header template feature.. how to achieve in this  Hierarchical Binding.

for eg: 

<e-column field='EmployeeID' headerText='Employee ID' width='120' textAlign='Right' :headerTemplate='employeetemplate'></e-column>

employeetemplate: function() { return { template: Vue.component('employeetemplate', { template: `<div><span class="e-icon-userlogin e-icons employee"></span> {{emp}}</div>`, data: function () {return {emp: 'Emp ID'};} }) }

But same I need to do it childGrid columns in Hierarchical Binding shown below.

childGrid: {

        dataSource: this.childData,

        queryString: 'SIDNDocumentNumber',

        allowResizing: true,

        columns: [

            { field: 'ItemCode', headerText: 'Item Code', textAlign: 'Right'},

            { field: 'ItemDescription', headerText: 'Description' },

            { field: 'SubHierarchyCode', headerText: 'Subcode' },

            { field: '', headerText: 'UOM0', textAlign: 'Center'},

            { field: '', headerText: 'UOM1', textAlign: 'Center'},

            { field: '', headerText: 'UOM2', textAlign: 'Center' },

            { field: '', headerText: 'UOM3', textAlign: 'Center'},

            { field: '', headerText: 'UOM4', textAlign: 'Center'},

            { field: 'BaseItemQuantity', headerText: 'Qty', textAlign: 'Center'},

            { field: 'MRP', headerText: 'MRP', textAlign: 'Center'},

            { field: 'ItemPrice', headerText: 'Price', textAlign: 'Center' },

            { field: '', headerText: 'Amt', textAlign: 'Center'},

            { field: '', headerText: 'Perc', textAlign: 'Center'},

            { field: '', headerText: 'Scheme', textAlign: 'Center'},

            { field: 'ItemExciseTax', headerText: 'Tax', textAlign: 'Center'},

            { field: '', headerText: 'Free', textAlign: 'Center' },

            { field: 'LineNetAmount', headerText: 'Amount', textAlign: 'Center'},

        ]

      },

Can u please help to achieve this feature.

Thanks & Regards,

Punith BN

[Rajapandiyan Settu]

Hi Punith, 

 

Thanks for your update. 

 

By default, the child-Grid is initialized in typescript way. So, you can define template string in the column headerTemplate. Refer to the below code example. 

 

Column HeaderTemplate API: https://ej2.syncfusion.com/vue/documentation/api/grid/column/#headertemplate 

 

 

        { 

          field: 'ShipName', 

          headerText: 'Ship Name', 

          headerTemplate: "<div>Ship Name ## </div>", 

          width: 150, 

        }, 

 

 

If you want to render the Child-Grid’s column template in Vue way then use the below code example. 

 

 

var itemVue = Vue.component("itemTemplate", { 

  template: `<div>Ship City ## </div>`, 

  data() { 

    return { 

      data: {}, 

    }; 

  }, 

}); 

 

---- 

 

          { 

            field: "ShipCity", 

            headerText: "Ship City", 

            headerTemplate: function () { 

              return { template: itemVue }; 

            }, 

            width: 150, 

          } 

 

 

Find the below sample for your reference. 

 

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

 

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

 

Regards, 

Rajapandiyan S