1. Home
  2. Forum
  3. Vue
  4. Setting Column Template on Nested JSON Node on Auto Generated Columns

Setting Column Template on Nested JSON Node on Auto Generated Columns

Hi Syncfusion,

Please refer to this earlier quesiton to get some context:

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



5 Replies
DR Dhivya Rajendran Syncfusion Team January 6, 2020 12:01 PM UTC

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] 
  } 
}; 



Regards, 
R. Dhivya 


ML Marius Lian January 6, 2020 12:09 PM UTC

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

BS Balaji Sekar Syncfusion Team January 7, 2020 12:20 PM UTC

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. 
 
 
 
Regards, 
Balaji Sekar. 


ML Marius Lian January 7, 2020 03:49 PM UTC

Hi Balaji,

Nice! Didn't see that one. 

Thanks,
Marius

DR Dhivya Rajendran Syncfusion Team January 8, 2020 06:07 AM UTC

Hi Marius, 
 
Please refer the documentation and get back to us if you need further assistance on this. 
 
Regards, 
R.Dhivya  


Loader.
Up arrow icon