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

时间:2012-03-12 15:44:35

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

很抱歉,如果这是重复。我做了一次搜索,没有发现任何与我的情况完全匹配的内容。

我有一个需要ClientRowTemplate的网格。我的模板工作得很好。

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

如何使用自定义按钮执行相同操作?甚至可以在使用ClientRowTemplate时添加自定义按钮吗?

1 个答案:

答案 0 :(得分:1)

在网格行的clienttemplate中放置一个链接

@(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 = ... } )))