KendoGrid超链接列：点击新标签页打开文档的动态内容问题

我来帮你搞定这个KendoGrid的问题～你的核心需求是点击ID列的链接在新标签页打开文档，但当前写法遇到了动态内容（特殊公式、符号）的兼容性问题，咱们一步步来改：

问题根源 #

原来的写法混合了kendo.template和内联onclick事件，当动态内容里包含引号、&、<这类特殊字符时，会直接破坏HTML结构，导致模板解析失败或者链接参数出错。

优化方案 #

推荐用事件委托替代内联onclick+正确的Kendo模板语法，既解决特殊字符问题，也让代码更健壮：

1. 修改列模板，移除内联事件

把模板改成纯链接结构，给链接加一个统一的类名方便后续绑定事件，同时对参数做URL编码（处理特殊符号）：

columns: [
    { selectable: true, width: "10px", headerTemplate: ' ' },
    { 
        title: "ID", 
        field: "ProposalId",
        // 用encodeURIComponent编码参数，处理特殊符号；#: # 自动转义HTML特殊字符防止XSS
        template: '<a class="proposal-doc-link" href="http://testapp.com/RateSheet?Id=#= encodeURIComponent(ProposalId) #">#: ProposalId #</a>'
    }
]

2. 用Grid的dataBound事件绑定点击逻辑

通过事件委托的方式给所有链接绑定点击事件，避免内联事件的引号冲突：

$("#your-grid-id").kendoGrid({
    // 你的其他Grid配置（数据源、高度等）
    dataBound: function() {
        // 给表格内的所有proposal-doc-link绑定点击事件
        this.table.on("click", ".proposal-doc-link", function(e) {
            e.preventDefault(); // 阻止默认跳转
            window.open(this.href, "_blank"); // 在新标签页打开链接
        });
    }
});

关键细节说明 #

• encodeURIComponent(ProposalId)：对ID参数进行URL编码，确保像空格、&、=这类特殊符号不会导致链接参数截断或失效。
• #: ProposalId #：自动转义HTML特殊字符（比如<、>、&），防止XSS攻击同时保证页面结构不被破坏；如果你的ID里包含需要保留的HTML内容，可以改用#= ProposalId #（不转义）。
• 事件委托：相比内联onclick，这种方式不会因为Grid数据刷新（分页、过滤）而丢失事件绑定，也避免了模板里的引号嵌套问题。

这样修改后，不管你的ProposalId里有什么特殊公式、符号，链接都能正确生成并在新标签页打开啦～

内容的提问来源于stack exchange，提问作者Beginer