How to configure a link on a KendoGrid column that opens in new tab instead of the same tab?

How to configure a link on a KendoGrid column that opens in new tab instead of the same tab? I have something like the following, but clicking on the link opens it in the same tab. I want to open it in a new one, like target="_blank"

"columns": [
    {
        "name": "something",
        "field": "someField",
        "link": "www.c3.ai"
    }
]

Instead of doing link, you can write a custom format function that wraps the value in
<a target="_blank" href="www.c3.ai">...</a>

See the UIHelper type

examples I’ve used…

remix type UIHelper  {
  camelCaseToRegularForm: function(item: any) : any js client
}

function camelCaseToRegularForm(item) {
  return item.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
    return str.toUpperCase();
  })
}

called in Kendo column:

"format": {
    "funk": "camelCaseToRegularForm"
}

or UIActionOpenNewTab

2 Likes

I would advocate for this unless you plan to have this functionality on multiple components.

This appears to be supported out of the box on the UIViewKendoGrid type:

@param {Boolean} newTab Whether or not to open the link in a new tab. Please see {@link C3.script.helpers#linkToRecord}

So,

"columns": [
    {
        "name": "something",
        "field": "someField",
        "link": "www.c3.ai",
        "newTab": true
    }
]

The documentation is out of date; the method being used here is UIHelper.linkToRecord()

3 Likes