Templated column not displaying formatted data

[David House]

So, I've seen this question asked multiple times, but I was unable to make any of their fixes work, so here goes. I need to apply a template to a column within a grid, however the field that is displayed is not formatted properly, so within js how do I fix this?

This is what I currently have:

newColumn.template = '<a target="_blank" rel='nofollow' href=' + '"' + Settings.linkurl + '${' + Settings.linkRef + '}">${' + Settings.linkColumn + '}</a>'

I have also tried this:

newColumn.template = '<a target="_blank" rel='nofollow' href=' + '"' + Settings.linkurl + '${' + Settings.linkRef + '}">${getFormattedField(' + Settings.linkColumn + ',' + Settings.yindex.aggregatetype + ',' + Settings.yindex.optionalFormatting + ')}</a>'

The function getFormattedField never gets called, so no dice there.

[Rajapandi Ravi]

Hi David, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you are using a template column in Grid and facing the problem with formatting the data. Based on your query we have prepared a sample which was same as your application scenario.  

In this sample we have format the date and display it in the HireDate template column. Please refer the below code example and sample for more information. 

(window as DateFormat).format = (value: Date) => { 

    return instance.formatDate(value, { skeleton: 'yMd', type: 'date' }); 

}; 

interface DateFormat extends Window { 

    format?: Function; 

} 

     

    let grid: Grid = new Grid({ 

        dataSource: new DataManager(employeeData as JSON[]).executeLocal(new Query().take(8)), 

        columns: [ 

            { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 }, 

            { field: 'FirstName', headerText: 'Name', width: 120 }, 

            { field: 'Title', headerText: 'Title', width: 170 }, 

            { 

                field: 'HireDate', headerText: 'Hire Date', textAlign: 'Right', 

                width: 135, template: '#template' 

            }, 

            { field: 'ReportsTo', headerText: 'Reports To', width: 120, textAlign: 'Right' } 

        ], 

        width: 'auto', 

        height: 359 

    }); 

    grid.appendTo('#Grid'); 

Index.html 

<script id="template" type="text/x-template"> 

        <div class="image"> 

        <td>${format(data.HireDate)} </td> 

        </div> 

      </script> 

Sample: https://stackblitz.com/edit/x1vuwp?file=index.html 

If we misunderstood anything wrongly, please share the below details that will be helpful for us to provide better solution. 

1)       Please share your exact requirement scenario with detailed description. 

2)       Please share what type of column you like to format(EX: String/Number/Date) 

3)       Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards, 

Rajapandi R 

[David House]

Ok so definitely in the right direction, however that is type script, which I am unable to use with this project, as well as that doesn't exactly scale. The data I am providing to this method is entirely user selected, so I need to be able to pass it a link, tell it which column to put it on, and add a template to that column with a given url, the text that is displayed needs to be formatted for date or number, using a given format string. The code you provided I tried to implement and it didn't exactly work even after trying to translate it to pure js. I need a scalable option that puts an rel='nofollow' href link in the template which is formatted properly, that is it, in pure js/jquery, cannot work with typescript.

As for providing code, I apologize but the code I have would be of no use without the databases and the rest of the cms system I'm working it, it is not self contained at all.

[Rajapandi Ravi]

Hi David, 

Based on your query we suspect that you like to use the anchor tag in Grid Column template and also found that to use the data value in rel='nofollow' href link & also displayed the format data into the Grid columnTemplate. Based on your requirement we have prepared a sample and we suggest you use the below way to achieve your requirement.  

In this below sample we have format the FirstName and HireDate column data values and displayed it into the template. Please refer the below code example and Javascript sample for more information. 

Index.html 

<script id="template" type="text/x-template"> 

  <div class="image"> 

        <a rel='nofollow' rel='nofollow' href="https://en.wikipedia.org/wiki/${EmployeeID}"> ${format(data.HireDate)} </a> 

        </div> 

      </script> 

Sample: https://stackblitz.com/edit/4gqj9p-wqmtdv?file=index.html 

Regards, 

Rajapandi R 

[David House]

The problem isn't that I can't get a link or proper values into a template, it's that what columns the data is coming from is variable, I cannot hard code anything, not even the link, I need to make the template on the fly, how would I achieve this?

[Rajapandi Ravi]

Hi David, 

 

Based on your query we could see that you are using dynamic rel='nofollow' href Url in anchor tag. By default, in our Grid column Template, we can get the current dataSource column model value by using ‘data’ argument and using this argument, we can get each row information. Based on your requirement we have prepared a sample and generating dynamic URL in the rel='nofollow' href by using the Window function. Please refer the below code example 

 

Index.html 

<script id="template" type="text/x-template"> 

  <div class="image">                        //data parameter contain current row information 

        <a rel='nofollow' rel='nofollow' href="${getUrl(data, data.HireDate)}/${FirstName}">${format(data , data.HireDate)}</a> 

        </div> 

      </script> 

Index.js 

window.getUrl = function (data, value) { 

  return "https://en.wikipedia.org/wiki/" + data.FirstName; //generating dynamic link 

}; 

 

From validating your shared code, you have sent the multiple values in your format method and trying to display the formatted data in column template. So, based on that we have send the multiple values of current row information and return the formatted data and achieved your requirement. Please refer the below code example and sample for more information. 

Index.html 

<script id="template" type="text/x-template"> 

  <div class="image">                                                                                                      //passing data and value 

        <a rel='nofollow' rel='nofollow' href="${getUrl(data, data.HireDate)}/${FirstName}">${format(data , data.HireDate)}</a> 

        </div> 

      </script> 

 

Index.js 

window.format = function (data, value) { 

    return    "Date:" + " " + instance.formatDate(value, { skeleton: 'yMd', type: 'date' }) + "<br>" +     //format the multivalues 

                   "LastName:" + " " + data.LastName.toLocaleUpperCase(); 

}; 

Sample: https://stackblitz.com/edit/4gqj9p-uwsd8g?file=index.html 

Screenshot:  

 

If we misunderstood anything wrongly, please share the below details that will be helpful for us to provide better solution. 

1)       In your query you have mentioned that in the anchor tag “Settings.linkurl , Settings.linkColumn”. So please share the details about where you are defining the Settings and how you are accessing  

          the Settings and what you are trying to access from the Settings. 

Regards,
Rajapandi R 

[David House]

OK! So this was it! thank you so much, for anyone who comes and like me was a bit confused, you need to put data in there, which just tells the template engine to dump a whole bunch of stuff in there about the column and row, now I did have to inject AFTER I appended and build the grid, a hidden formatting info field on the columns that is meant to have the link in it, then in the format call I'm able to access that to format dynamically based on the column type.

You did a great job Rajapandi, thank you, for your patience.

[Rajapandiyan Settu]

Hi David, 

We are happy to hear that you resolved your requirement. 

 

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

 

Regards, 

Rajapandiyan S