Calling Javascript from clienttemplate with apostrophe in data

[David]

Hi

I have and ID field in a grid, and one of the items has an apostrophe in its content.
As I am trying to call a javascript function via a button or hyperlink, this is proving to be and isssue.
The Boundcolumn template looks like this:

columns.Bound(o => o.Id).ClientTemplate("<a href=\"javascript:onPopupLinks('<#=Id#>','<#=Description#>')\"  class=\"t-button\">Properties</a>").Title("Property Links").Encoded(false);

The Id field contains a data item as "JV 'ER"
This is stored in the Json data as an encoded string, but this is decoded when trying to call the javascript function, and the command becomes incomplete. The Ecoded method makes no difference

So how do i either retain the encoding within the clienttemplate or access the data directly to run the javascript?
And no, the data cannot be changed, legacy systems etc. :)

Regards
David

[Nikolay Rusev]

Hello David,

You can escape the values for the field as in the sample bellow:

.ClientTemplate("<a
href=\"javascript:myFunc(<# var item = fixValues(data);#> '<#=item.ProductName#>','<#=item.UnitPrice#>')\"
class=\"t-button\">Properties</a>")

where myFunc is the function that handles the action and fixValues is the function that replaces all " ' " for ProductName field. For example:

function fixValues(item){
 item.ProductName = item.ProductName.replace("'", "\\'");
 return item;
}

Regards,
Nikolay
the Telerik team

[David]

Thank you Nikolay

That did exactly what i wanted, and also showed me how to expose all of the data through javascript.

Much appreciated.


David

[Kot]

Btw, instead of escaping apostrophe you can replace it with it's code: '

Here is my client template:

.ClientTemplate("<# if (Note) {#><span note='<#= fixValues(Note) #>' onclick='showNote(this, <#= ID #>)'>View</span><#}#>");

Javascript:

function fixValues(text) {
        
        if (text) {
            text = text.replace(/\'/g, "&apos;"); // global replace
        }
        
        return text;
    }

function showNote(el, id) {
 // get note text
var note = $(el).attr("note");
}

I noticed that I have no problems with new lines, multiple apostrophes or double quotes. Only apostrophe should be replaced with html code.

[Ed]

Nikolay,

Thanks for the example. It's taken me several days of researching to find this post. I would suggest this information be published prominently, since I haven't seen it documented elsewhere.

It's nice to know that the data for the row is available in a variable. It's also nice to know that the client template has the ability to evaluate Javascript expressions. This is information that I have been sorely missing. Please correct me, but this is what I gleaned from your example:

• Data for the client row is stored in the Javascript variable data as an object.
• Javascript expressions can be evaluated in a client template by using client-side evaluation syntax: <# expr #>.
• Javascript expressions can be displayed in a client template by using client-side output syntax: <#= expr #>.
• Variables defined for use in expr are:

• data - containing the row's data in object form and it can be passed to other Javascript functions for manipulation; e.g. "<#= product(data) #>", where the product function could access the individual members of the row data.
• data member name - containing the associated member of the data object bound to the row. So if data = { 'op1': 2, 'op2': 3 }, and I defined:

function product(o)
    return o.op1 * o.op2;
}

• then "<#= op1 + ' * ' + op2 + ' = ' + product(data) #>" would output "2 * 3 = 6".
• Javascript variables - as defined in expressions evaluated previously in the client-side template; e.g. "<# var x = 3; var y = 5; #>Sum is <#= x + y #>" would output "Sum is 8".

I trust that summarizes it accurately.