We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Setting Column Template on Nested JSON Node on Auto Generated Columns

Thread ID:

Created:

Updated:

Platform:

Replies:

150391 Jan 5,2020 12:37 PM UTC Jan 8,2020 06:07 AM UTC Vue 5
loading
Tags: Data Grid
Marius Lian
Asked On January 5, 2020 12:37 PM UTC

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



Dhivya Rajendran [Syncfusion]
Replied On 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 


Marius Lian
Replied On 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

Balaji Sekar [Syncfusion]
Replied On 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. 


Marius Lian
Replied On January 7, 2020 03:49 PM UTC

Hi Balaji,

Nice! Didn't see that one. 

Thanks,
Marius

Dhivya Rajendran [Syncfusion]
Replied On 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  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon