如何在kendo网格列模板中将参数传递给javascript?

时间:2014-04-08 11:34:56

标签: kendo-ui parameter-passing kendo-grid

我有一个带有列模板的kendo网格。我尝试从当前行传递一个值作为我的javascript函数的参数。我的代码:

{
  field: "CrmTaskId",
  title: "Crm ", 
  template: '<a href="javascript:hrefTest(#=CrmTaskId#);" ># if( CrmTaskId==null) {#<span><span># } else {#<span>#: CrmTaskId#<span>#} #</a>'

}

hrefTest是带有一个参数的javascript函数。但它不起作用。有什么想法吗?

5 个答案:

答案 0 :(得分:2)

可以这样做

.ClientTemplate("<a href='javascript: void(0);' 
 onclick=\"return YourJSFunction('#= OpportunityUrl #');\">#= OpportunityName #</a>")

这是列定义的一部分,所以它说的是......创建OpportunityName 可点击并传入OpportunityUrl。 #= Field #是从模型中提取值的语法。

答案 1 :(得分:2)

使用此:

{
   field: "Field",
   editable: true,
   title: "Title",
   template: showRelatedLink,
   allownull: true,
   width: 100
}

然后在你的函数中:

function showRelatedLink(container, options)
{
    var yourVariable = container.YourField;
}

答案 2 :(得分:1)

我已尝试使用您的代码但无法重现此问题。请创建新的HTML / CSHTML页面并进行检查。

<!DOCTYPE html>
<html>
<head> 
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var movies = [
                    { "CrmTaskId": 1, "rating": 9.2, "year": 1994, "title": "The Shawshank Redemption"},
                    { "CrmTaskId": 2, "rating": 9.2, "year": 1972, "title": "The Godfather"},
                    { "CrmTaskId": null, "rating": 9, "year": 1974, "title": "The Godfather: Part II" },
                    { "CrmTaskId": '', "rating": 9.9, "year": 1874, "title": "The Godmother: Part III" }

                ];

function hrefTest(CrmTaskId)
{
    alert("CrmTaskId is: " + CrmTaskId);
}


$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            data: movies,
            pageSize: 10
        },
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true
        },
        columns: [{
            field: "CrmTaskId",
            title: "Crm"
        }, {
            field: "title",
            title: "title"
        },
    {
        template: '<a href="javascript:hrefTest(#=CrmTaskId#);" ># if( CrmTaskId==null) {#<span><span># } else {#<span>#: CrmTaskId#<span>#} #</a>'
    }
    ]
    });
});

</script>
</body>
</html>

请尝试使用以下代码段。

答案 3 :(得分:0)

您也可以将字段传递给这样的函数:

网格:

    columns: [
       { field: "ProductTypeID", title: "Type", template: "#=product_type_to_name(ProductTypeID)#" },
    ]

功能:

function product_type_to_name(product_type_id) {
    console.log(product_type_id);
    var name = "";
    // convert ID to name
    return name;
}

答案 4 :(得分:0)

我已经尝试过了     { field: "DisplayChangedFrom", title: "From", template:"#=generateTemplate(DisplayChangedFrom)#
},

然后功能     function generateTemplate(items) { var html = "<ul>"; if (items !== null && items.length > 0) { for (var x = 0; x < items.length; x++) { html += "<li>"; html += items[x]; html += "</li>"; } } html += "</ul>"; return html; };