2012-03-12 68 views
0

對不起,如果這是重複。我做了搜索,沒有找到與我的情況完全相符的內容。Telerik MVC Grid上的ClientRowTemplate中的自定義按鈕

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

我需要在RowTemplate通過AJAX回調到控制器方法的按鈕。控制器方法需要執行一些複雜的邏輯,然後將一組新的數據返回到網格,然後網格需要綁定到該網格。我認爲這應該以與ajax綁定相同的方式工作。例如,當您執行保存或刪除操作(使用內置按鈕)時,會調用屬於[GridAction]的ajax方法,然後返回IQueryable。網格自動綁定到這個IQueryable。

如何使用自定義按鈕做同樣的事情?使用ClientRowTemplate時甚至可以添加自定義按鈕?

回答

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

的clienttemplate編寫代碼來刷新電網

<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> 

就是這樣

編輯:

ClientRowT emplate例如

你只需要改變電網碼。其餘的都是一樣的。

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

我沒有使用ClientTemplate,而是使用ClientRowTemplate。答案可能是一樣的,但我想澄清。 – 2012-03-12 16:48:46

+0

他們兩個都差不多。 ClientTemplate用於單元格,ClientRowTemplate用於整行。但用法是一樣的。我將編輯我的答案爲ClientRowTemplate版本。 – adyusuf 2012-03-13 05:41:33