Question

我必须在按钮点击时绑定一个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;
});

Answer 1

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

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

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

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

Answer 2

您可以添加 .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>

Answer 3

为了将参数从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){}

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

3 个答案: