Setting Column Template on Nested JSON Node on Auto Generated Columns

[Marius Lian]

Hi Syncfusion,

Please refer to this earlier quesiton to get some context:

https://www.syncfusion.com/forums/149904/setting-column-template-on-auto-generated-column

That answer was very good in order to set column template on autogenerated column.

However we have on additional complexity so this solution won't work in our case.

Our data source has nested json objects. So consider this json file:

{

  "data" : [ {

    "gid" : "303380665885990",

    "assignee" : {

      "gid" : "7388678016070",

      "name" : "Marius",

      "resource_type" : "user"

  } ]

}

Our initial intent here was to set a column template on "assignee" column on dataBound event but this won't work because then the grid has already populated this into colunns assignee.gid, assignee.name and so on: https://www.screencast.com/t/hkNrfz2D

So I guess we need a way to handle the "assignee" column/node before the data is bound. And remember it must still be on autogenerated columns. I guess something like:

if column[0].type = 'object' then parseObject()

Any ideas on how we can solve this?

Thanks,

Marius

[Dhivya Rajendran]

Hi Marius, 

Greetings from Syncfusion support. 

From analyzing your query we understand you like to set column template by using nested datasource. Based on your query we have prepared a sample and achieved your requirement so please refer the code example for more information. 

let cTemp = function() { 

  return { 

    template: Vue.component("columnTemplate", { 

      template: `<a rel='nofollow' href="#">{{CustomerID}}</a>`, 

      data: function() { 

        return { 

          data: {} 

        }; 

      }, 

      computed: { 

        CustomerID: function() { 

          return this.data.assignee.name; 

        } 

      } 

    }) 

  }; 

}; 

export default { 

  data() { 

    return { 

      formatoptions: { type: "dateTime", format: "M/d/y hh:mm:ss ss" }, 

      data: nested, 

      isInitial: false 

    }; 

  }, 

  methods: { 

    dataBound: function() { 

      var gridObj = document.getElementsByClassName("e-grid")[0] 

        .ej2_instances[0]; 

      let tempCol = gridObj.getColumnByField("assignee.name"); 

      tempCol.template = cTemp; 

      tempCol.templateFn = templateCompiler(cTemp); 

      if (this.isInitial) { 

        gridObj.refreshColumns(); 

        this.isInitial = false; 

      } 

    }, 

    onLoad: function() { 

      this.isInitial = true; 

    } 

  }, 

  provide: { 

    grid: [Filter, Page] 

  } 

}; 

Sample: https://codesandbox.io/s/vue-template-8r0px 

Regards, 

R. Dhivya 

[Marius Lian]

Hi R. Dhivya,

Sorry but this is not what I asked. 

The result in your sample is 4 columns gid, assignee.gid, assignee.name and assignee.resource_type. 

What we want is to apply a template to the "assignee" field before it parses out the nested fields. 

So expected result should be 2 columns: gid and assignee. 

then in the "assignee" template we might add code to open a modal for instance to look at the sub-fields. 

Do you have a solution for this?

Thanks,

Marius

[Balaji Sekar]

Hi Marius, 

 

Thanks for the update. 

 

Query#: What we want is to apply a template to the "assignee" field before it parses out the nested fields. 

 

we have already discussed about your requirement in our documentation. Please find the below documentation and sample demo link for more information. 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/#how-to-auto-generate-columns-from-complex-column-fields-to-flat-columns 

 

Sample: https://codesandbox.io/s/vue-template-i36cm 

 

Regards, 

Balaji Sekar. 

[Marius Lian]

Hi Balaji,

Nice! Didn't see that one. 

Thanks,

Marius

[Dhivya Rajendran]

Hi Marius, 

 

Please refer the documentation and get back to us if you need further assistance on this. 

 

Regards, 

R.Dhivya