Telerik MVC 网格上的 ClientRowTemplate 中的自定义按钮答案

【问题标题】：Custom Button in a ClientRowTemplate on the Telerik MVC GridTelerik MVC 网格上的 ClientRowTemplate 中的自定义按钮
【发布时间】：2012-03-12 15:44:34
【问题描述】：

对不起，如果这是重复。我进行了搜索，但没有找到与我的情况完全匹配的任何内容。

我有一个需要 ClientRowTemplate 的网格。我的模板运行良好。

我需要该 RowTemplate 中的一个按钮，该按钮通过 ajax 回调控制器方法。控制器方法需要执行一些复杂的逻辑，然后将一组新数据返回到网格，然后网格将需要绑定到该网格。我认为这应该以与 ajax 绑定相同的方式工作。例如，当您执行保存或删除（使用内置按钮）时，将调用一个属性为 [GridAction] 的 ajax 方法，然后返回一个 IQueryable。网格会自动绑定到此 IQueryable。

如何使用自定义按钮做同样的事情？使用 ClientRowTemplate 时甚至可以添加自定义按钮吗？

【问题讨论】：

标签： asp.net-mvc-3 telerik-mvc

【解决方案1】：

在网格行的客户端模板中放置一个链接

@(Html.Telerik().Grid<myModel>()
.Name("myGrid")
.Columns(columns =>
{
        @* You can put a link in your client template to trigger a refresh function *@
        columns.Bound(o => o.Id).ClientTemplate("<a href='javascript:refreshGrid(<#= Id #>);'>Refresh</a>");
        columns.Bound(e => e.col1);
        columns.Bound(e => e.col2);
        columns.Bound(e => e.col3);
})
.ClientEvents(events => events.OnDataBinding("myGrid_onRowDataBinding"))
.DataBinding(dataBinding => dataBinding.Ajax().Select("Action", "Controller", new { param1 = ..., param2 = ... } )))

编写代码以刷新网格

<script type="text/javascript">

    //parameters needed for grid
    var x = ...;
    var y = ...;

    //grid refresh function
    function refreshGrid(id) {
        //make a call to server
        $.post("/controller/action/" + id, function() {

            //after making a successfull call to server
            //you may update parameters 
            x = ...;
            y = ...;

            //and rebind your grid
            $('#myGrid').data('tGrid').rebind();
        })        
    }

    //grid on row data binding event
    function myGrid_onRowDataBinding(e) {
        e.data = $.extend(e.data, { param1: x, param2: y });
    }
</script>

就是这样

编辑：

ClientRowTemplate 示例

您只需更改网格代码。其余的都一样。

@(Html.Telerik().Grid<myModel>()
.Name("myGrid")   
.ClientRowTemplate(grid => "<div class='firstcolumn'><a href='javascript:refreshGrid(<#= Id #>);'>Refresh</a></div><div class='secondcolumn'>Content....</div>")
.ClientEvents(events => events.OnDataBinding("myGrid_onRowDataBinding"))
.DataBinding(dataBinding => dataBinding.Ajax().Select("Action", "Controller", new { param1 = ..., param2 = ... } )))

【讨论】：

我没有使用 ClientTemplate，而是使用 ClientRowTemplate。答案可能是一样的，但我想澄清一下。
它们几乎是一回事。 ClientTemplate 用于单元格，ClientRowTemplate 用于整行。但是用法是一样的。我将编辑 ClientRowTemplate 版本的答案。