如何在按钮单击事件上绑定Kendo Grid

时间:2014-02-21 13:18:11

标签: jquery asp.net-mvc kendo-grid

我必须在按钮点击时绑定一个kendo网格,并在另一个SO问题中得到了示例:Kendo Grid - Bind Data After Search,但这对我不起作用。我的控制器操作是返回json对象,但该对象没有映射到我的网格。

以下是另一个问题中提供的相同代码:

@(Html.Kendo().Grid<Project.Data.Entity.SearchResult>()
   .Name("ClaimantSearch") 
   .DataSource(dataSource => dataSource 
        .Ajax() 
    //.Read(read => read.Action("Search", "Claimant")) ) 
   .Columns(columns => 
   { 
    columns.Bound(x => x.Name); 
    columns.Bound(x => x.Authorized); 
    columns.Bound(x => x.CompanyName); 
    columns.Bound(x => x.Address); 
    }) 
   .Resizable(resizing => resizing.Columns(true))
)

使用Javascript:

$('#btnSearch').click(function () {
    alert('a');
    $.ajax({
        data: '@Url.Action("Search", "Claimant")',
        type: 'POST',
        contentType: "application/json;charset=utf-8",
        data: "",
        dataType: "json",
        success: function (data) {
            alert(data);
            var grid = $('#Claimant').getKendoGrid();
            grid.dataSource.data(result);
            grid.refresh();
        }
    });
    return false;
});

3 个答案:

答案 0 :(得分:0)

用以下代替您的成功回调:

success: function (result) {
    alert(result);
    var grid = $('#Claimant').getKendoGrid();
    grid.dataSource.data(result);
    grid.refresh();
}

问题只是您将函数参数重命名为data,但您仍在尝试绑定result。将其更改回result,它应该有效。

另外,我注意到你的ajax调用中有两个data属性,可能想删除空白属性。

答案 1 :(得分:0)

您可以添加 .AutoBind(false)

@(Html.Kendo().Grid<Project.Data.Entity.SearchResult>()
  .Name("ClaimantSearch") 
  .AutoBind(false)
  .DataSource(dataSource => dataSource 
  .Ajax() 
  .Read(read => read.Action("Search", "Claimant")) ) 
  .Columns(columns => 
{ 
 columns.Bound(x => x.Name); 
 columns.Bound(x => x.Authorized); 
 columns.Bound(x => x.CompanyName); 
 columns.Bound(x => x.Address); 
}) 
.Resizable(resizing => resizing.Columns(true))
)

<input type="button" value="Generate" id="btnGenerate" />

您可以在Jquery按钮点击事件中添加 $(“#ClaimantSearch”)。data(“kendoGrid”)。dataSource.read();

<script>
$('#btnGenerate').click(function () {
    $("#ClaimantSearch").data("kendoGrid").dataSource.read();
});
</script>

答案 2 :(得分:0)

为了将参数从View传递给Controller,.Data(“additionalInfo”)被添加到grid的.DataSource

的.Read属性中。

ASP.NET MVC解决方案

@(Html.Kendo().Grid<Your_Model>()
    .Name("grd_yourGrid")
    .AutoBind(false)
    .Columns(columns =>
    {
        columns.Bound(c => c.modelAttribute).Width(300);
    })
    .HtmlAttributes(new { style = "height: 500px;" })
    .Scrollable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes((new int[] { 5, 10, 20, 50, 100, 200 }).ToList())
        .ButtonCount(15))
    .DataSource(dataSource => dataSource
           .Ajax().ServerOperation(false)
           .Read(read => read.Action("MyActionName", "MyController").Data("additionalInfo"))
        .PageSize(100)
    ))

使用Javascript:

 <script>

        $('#btn_yourButtonName').click(function () {

            $("#grd_yourGrid").data("kendoGrid").dataSource.read();

            return false; // WITHOUT THIS GRID WILL NOT BE FILLED
        });


        function additionalInfo() {
            return {
                startRange: $("#inputValueOne").data("kendoNumericTextBox").value(),
                endRange: $("#inputValueTwo").data("kendoNumericTextBox").value()
            }
        }
</script>

Controller(MyController):

[HttpPost]
public ActionResult MyActionName([DataSourceRequest]DataSourceRequest request, string startRange, string endRange){}