剑道网格 - 绑定数据搜索后 [英] Kendo Grid - Bind Data After Search

问题描述

ASP.NET MVC 4 | .NET 4.5 |剃刀| C＃

我有一个文本框，并在页面顶部的按钮。下面是一个剑道网格被绑定到一个列表，我的视图模型。当用户点击搜索按钮jQuery的AJAX请求时，数据被返回的JSON。我唯一​​的问题是我怎么绑定数据到我的剑道电网？任何帮助是AP preciated。

  @（Html.Kendo（）。网格（Model.PurchaseOrder.LineItems）
    。名称（poSearchGrid）
    .Columns（C =＆GT;
    {
        c.Bound（X =＆GT; x.LineNumber）.title伪（行号）;
        c.Bound（X =＆GT; x.Qty）.title伪（订单数量）;
        c.Bound（X =＆GT; x.OpenQty）.title伪（开放数量）;
        c.Bound（X =＆GT; x.QtyReceived）.title伪（接收数量）;
    }）
    .Events（E =＆GT; e.DataBound（onDataBound））
    .DataSource（S = GT; s.Ajax（）模型（模型=方式＆gt; model.Id（I =＆GT; i.ID）））
    ）
 

按钮点击Ajax调用

  $（＃btnSearch）。在（'点击'，功能（）{
的console.log（点击）;
VAR SEARCHTEXT = $（＃采购单号码）VAL（）。如果（SEARCHTEXT ==）{
    警报（你必须输入一个搜索值）;
    返回;
}    $阿贾克斯（{
        网址：'@ Url.Action（搜索）'，
        数据：{采购单号码：SEARCHTEXT}，
        输入：POST，
        数据类型：JSON
        成功：函数（结果）{        }
    }）;
}）;
 

解决方案

你所需要的：

1-你的结果的对象必须是同一类型Model.PurchaseOrder.LineItems的，​​它必须是一个JSON对象。如果你使用MVC的ActionResult您可以在服务器code使用下面code：

 返回JSON（了LineItem）;
 

2 - 使用下面你更迭Ajax调用code：

  VAR电网= $（'＃poSearchGrid'）getKendoGrid（）。 //或$（'＃poSearchGrid'）数据（kendoGrid）;
grid.dataSource.data（结果）;
grid.refresh（）;
 

ASP.NET MVC 4 | .NET 4.5 | Razor| C#

I have a textbox and a button at the top of the page. Below that is a Kendo Grid which is bound to a List in my view model. When the user clicks the search button a jQuery ajax request is made and the data is returned as JSON. The only question I have is how do I bind that data to my Kendo Grid? Any help is appreciated.

@(Html.Kendo().Grid(Model.PurchaseOrder.LineItems)
    .Name("poSearchGrid")
    .Columns(c =>
    {
        c.Bound(x => x.LineNumber).Title("Line Number");
        c.Bound(x => x.Qty).Title("PO Qty");
        c.Bound(x => x.OpenQty).Title("Open Qty");
        c.Bound(x => x.QtyReceived).Title("Qty Received");
    })
    .Events(e => e.DataBound("onDataBound"))
    .DataSource(s => s.Ajax().Model(model => model.Id(i => i.ID)))
    )

Button Click Ajax Call

$("#btnSearch").on('click', function() {
console.log("click");
var searchText = $("#PONumber").val();

if (searchText == "") {
    alert("You must enter a search value");
    return;
}

    $.ajax({
        url: '@Url.Action("Search")',
        data: { poNumber: searchText},
        type: 'POST',
        dataType: "json",
        success: function(result) {

        }
    });
});

解决方案

All you need:

1- Your result object must be same type of Model.PurchaseOrder.LineItems and it must be a JSON object. If you use MVC ActionResult you can use below code in ServerCode:

return Json(lineItems);

2- Use below code in your succes ajax call:

var grid = $('#poSearchGrid').getKendoGrid(); //Or $('#poSearchGrid').data("kendoGrid");
grid.dataSource.data(result);
grid.refresh();

这篇关于剑道网格 - 绑定数据搜索后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！